CSS Logical Properties Are the Future of the Web & I18N
By: Daniel Yuschick
Tags: I18n, Front End Development, Accessibility, CSS, Web Development

I can’t remember how many years ago it was, but during my first interview for a Frontend position, I was asked to sketch out the CSS box model. I outlined the margins, borders, and padding and even denoted each side with its physical description–left, right, top and bottom.

I had committed that model to memory, and have never really reconsidered it since. It never occurred to me that something so fundamental could change. Yet here I am, writing an article to tell you that it, in fact, has.

Enter Logical Properties

Properties like top and left are physical in nature. They describe the specific side of an element, and stay attached to that physical location no matter how that element may render. Whereas, logical properties describe locations of an element based on the content flow, like start and end .

Why is this important?

If we’re going to adjust our fundamental approach to writing and visualizing CSS, it’s fair to ask why.

The web has firmly shifted into an expectation of responsive, user-friendly sites and products. That fluidity has allowed the platform to scale at tremendous rates, and has fully altered entire markets and industries.

But in the pursuit of supporting more and more devices, what happens if one of those devices isn’t in English? Or French? Or any other language that flows from top to bottom, left to right?

Building inclusive products doesn’t mean supporting devices, but supporting the people using them.

Looking at Hebrew specifically, a language written and read from right to left, there’re plenty of styling challenges in handling this minor variation. Instances of text-align: left would need to be conditionally updated to text-align: right or an entirely separate set of styles is loaded, essentially creating a second unique version of the site or product.

What happens then with Japanese, where text flows from top to bottom, and content from right to left? Or Mongolian where the text flows the same, but the content is flipped to flow left to right?

Previously, elements were positioned with CSS physically into place where content would start or end with properties like bottom , left , right , and top . Then depending on the specific use case or situation, like Hebrew, reposition everything again.

This is where CSS Logical Properties shine. When writing text-align: left , it’s likely because the text should be positioned where the content is expected to start. Only, as mentioned, content doesn’t always start at the left. So what would be ideal is something like text-align: start to ensure our content is aligned with its expected starting point.

And that’s exactly what CSS Logical Properties do.

Logical Approach

We’re likely familiar with how the web is broken into two main axes– X and Y. While this hasn’t changed, the naming conventions have.

The horizontal, X-axis becomes the inline-axis, while the vertical, Y-axis becomes the block-axis. But before breaking down individual property comparisons, let’s dig a little deeper into understanding the inline and block axes and how they relate to this shift to logical properties.

Logical Axes

The inline and block axes determine the content and document flow of a page. Each axis, though, and their corresponding flow, can be set using two CSS properties — direction and writing-mode .

Inline Axis (direction)

The direction property affects the inline axis. This property can be used to set the flow (or direction) of text, columns, and horizontal overflow from left to right or, like in the case of Arabic or Hebrew, right to left.

direction: rtl | ltr

Block Axis (writing-mode)

The writing-mode property affects the block axis. This property can be used to set the flow of block-level containers either horizontally or, like in the case of Japanese, vertically.

writing-mode: horizontal-tb | vertical-lr | vertical-rl

The three keyword values shown here represent:

horizontal-tb : Horizontal, top to bottom

: Horizontal, top to bottom vertical-lr : Vertical, left to right

: Vertical, left to right vertical-rl : Vertical, right to left

What happens to the axes when direction or writing-mode are set?

Logical properties will replace styles like text-align: left with text-align: start . This is because, when defining the direction property, the start and end points of the inline axis are set.

In Latin languages, setting direction: ltr will define the start of the inline axis to the left. Whereas, in a language like Hebrew, direction: rtl will define the start of the inline axis to the right.

Aligning content with text-align: start will align the text to the start of the inline axis, relative to its direction value.

How the direction property affects the inline axis flow

The block axis is where changes to the page can become dramatic. It’s one thing to define the direction of the content flow, but another to define the flow of block content and containers with writing-mode .

For this, maybe it’ll help to show the graphic first.