CSS Logical Properties

November 13, 2019 ; 3 Comments

I have often remarked that my blog is little more than a place for me to offload my memory. I need not remember the syntax, logic, test results, etc. of every control, widget, style, browser, and so on. I can just write a post and refer to it later.

This post on CSS logical properties is just that. I don’t need to know it all yet, but when browser support is common I need to be able to support it out of the gate. I need to be able to implement it, test it, debug it, and understand the accessibility impact. Since my work straddles accessibility and internationalization, those are critical skills.

Whether or not you know it, dear reader, this probably applies to you too.

The Syntax

Logical properties mostly do away with positional naming. Positions can become meaningless when text is rendered in a different language. For example, making list items by padding on the left and dropping a bullet in the gap will look a bit weird when translated to Hebrew, which is read right-to-left. The visual indent will be consumed by end-of-line spacing (since it is read from the right) and the bullet will look like a really aggressive period.

Keywords that are based on content flow are a key aspect of logical properties (and values). While text-align: left may be your standard style for a ragged-right block of text, a logical style would be text-align: start .

I made a thing to try to illustrate the mapping change. It is really for native English speakers (me). Yes, it leans on the colors from the Firefox dev tools.

See the Pen Logical Properties Mapping by Adrian Roselli (@aardrian) on CodePen.

Screen shots of the two views in the visualization, in case you find it easier to look at them next to one another.

For those (me on Thursdays) who want a chart instead of a visualization to compare, the following table might help. It also includes a few mappings not in the preceding visualization.

Logical Property and Value Mappings Typical Logical border-top border-block-start border-right border-inline-end border-bottom border-block-end border-left border-inline-start border-top: X

border-bottom: Y border-block: X Y border-left: X;

border-right: Y; border-inline: X Y; border-top-left-radius border-start-start-radius border-top-right-radius border-start-end-radius border-bottom-left-radius border-end-start-radius border-bottom-right-radius border-end-end-radius margin-top margin-block-start margin-right margin-inline-end margin-bottom margin-block-end margin-left margin-inline-start margin: X Y; margin-block: X;

margin-inline: Y; padding-top padding-block-start padding-right padding-inline-end padding-bottom padding-block-end padding-left padding-inline-start padding: X Y; padding-block: X;

padding-inline: Y; min-width min-inline-size min-height min-block-size text-align: left; text-align: start; text-align: right; text-align: end;

Block vs. Inline

By now you should have noticed a lot of block and inline in those properties. Once you get your head around the general meaning it might be easier (it was for me).

Inline This corresponds to the axis of the text flow. English, for example, has a left-to-right text flow, so the inline axis is horizontal. For Japanese it would be vertical (since it has a top-to-bottom text flow). Block This is the axis perpendicular to the text flow axis. For English, the block axis is vertical. For Chinese it would be horizontal.

Start vs. End

You probably also noticed start and end used throughout as well. Once you know the text direction this might be easier.

Start This corresponds to the text direction and reflects the side of the text from which you would start reading. For English, this corresponds to left. For Hebrew this would be right. End This also corresponds to the text direction and reflects the side of the text at which you would end reading. For English, this corresponds to right. For Hebrew this would be left.

An Example

For this example I use a quote originally in English. I machine-translated it into Urdu, Japanese, and Chinese, representing horizontal left-to-right, horizontal right-to-left, vertical left-to-right, and vertical right-to-left.

It uses margin, padding, borders, border radius, CSS generated content, quotes, widths, and text alignment. Seeing them in action makes it a bit easier to understand the effects of logical properties.

I want to stress — I do not speak any of these languages. I am using them for demonstration purposes only. If you understand these languages and find my translations (and mark-up) lacking, then please share. After all, I am just a guy from Buffalo who has the ego to assert he knows how to make kaya, but the humility to know that is not true.

See the Pen Logical Properties Demo by Adrian Roselli (@aardrian) on CodePen.

View the debug version of this pen.

As of this writing, if you are using any browser other than Firefox you should be unimpressed. Toggling between typical styles and the new logical styles will likely make each example look broken, including the English one (the first one).

Screen Shots

I collected screen shots in Firefox to show how these should look. A before and after, showing how one looks with typical styles and then how it should look with logical styles.

The Urdu samples as seen in Firefox 71.0b6. Most obviously the border changes sides to correspond with the text direction. The <dd> s now indent from the right.

The Japanese samples as seen in Firefox 71.0b6. The maximum width of the <blockquote> is now applied on the correct axis (vertical) and the border on the <footer> shifts to the correct orientation.

The Chinese samples as seen in Firefox 71.0b6. The border on the <footer> shifts to the correct orientation and the overall border changes sides to correspond with the text direction.

A Cheatsheet

I am not going to remember all the syntax every time. I can, however, refer to my own cheat sheet to refresh my memory.

I built this for me, so it may not work well for your way of learning. For example, I use <button> s as my containers because I wanted to be able to use my keyboard to quickly jump around (and do some scripting that I have since removed).

Note that at the top of the page I have radio buttons to flip between writing modes and text directions, making it easier for me to confirm a style adapts, the browser does not support it, or remind myself that not everyone consumes content the same way.

You can also visit a debug version of this cheatsheet pen.

See the Pen Playing with CSS Logical Properties Support by Adrian Roselli (@aardrian) on CodePen.

Wrap-up

If it’s not obvious, I tried a few different approaches to get my head around logical properties. Maybe one of these will help you. If not, links follow.

References

The CSS Working Group has published CSS Writing Modes Level 3 as a W3C Recommendation w3.org/TR/2019/REC-css-writing-modes-3-20191210.

Defines support for various international writing modes & their combinations, including left-to-right and right-to-left text ordering as well as vertical orientations. pic.twitter.com/hi80XdombH W3C I18n Activity (@webi18n) December 10, 2019

RTLStyling.com looks to be a resource for styling right-to-left text in CSS. It contains a general guide and, unlike my post, was written by someone who understands and reads/writes an RTL language.