Flip the Script Part II: CSS Logical Properties for Global Reach

A common way to position and size elements in CSS is to use properties that orient according to physical location, such as right ("padding-right," for instance), left, top and bottom. As an alternative, for the purposes of internationalization and universal design, we can style elements relative to writing direction using properties such as inline-start ("padding-inline-start," for example), inline-end, block-start and block-end. These logical properties help us style elements consistently, whether the language reads left-to-right (LTR), as English does, right-to-left (RTL), like Arabic, or even top-to-bottom, like some East Asian scripts. Understanding how and why to use the logical properties can be beneficial for all web developers, regardless of the language.

The Logical Properties

In English and other LTR languages, the physical properties seem fairly uncomplicated. We can add a left margin to a paragraph with the property 'margin-left':

.element p { margin-left: 30px; }        

In the context of a LTR language, the left margin of a paragraph is where we start reading. It is where our eyes return on each new line. In a multi-paragraph article, that left margin carries stylistic heft and significance. For the billions of people that use a right-to-left language, however, paragraphs align to the right margin. If a developer changes web content from a LTR script to Arabic, Farsi, Hebrew, or Urdu, they need to change our example styling from margin-left to margin-right to maintain the same design.

Changing from LTR to RTL affects more than just text elements. Progress bars, navigation menus, horizontal scrolling, the placement of the "next" and "previous" buttons--on a page reading RTL, the movement of all UI elements flips, potentially creating a lot of work for developers.

The logical properties provide one way to account for multiple reading directions because they style an element based on logical location, relative to the reading direction of the page. To indicate the margin where the writing starts, we can use the CSS logical property margin-inline-start.

.element p { margin-inline-start: 30px; }        

For LTR text, this will be visually equivalent to the left margin. For RTL texts, this will be the right margin. For scripts written top-to-bottom, margin-inline-start is the top margin. The "inline" keyword refers to the direction that the text flows. For horizontal writing, the inline values affect the left and right side of the element. "Block" refers to the area perpendicular to the inline values. In horizontal scripts, the block values adjust the top and bottom sides of the element.

Inline

Block

Logical Equivalent in LTR Scripts

Note that the logical properties can be used on many CSS properties that refer to position or size, such as padding, border, and text-align. Here is a list of physical properties and their logical equivalent in LTR scripts, using margin as an example:

• margin-left --> margin-inline-start
• margin-right --> margin-inline-end
• margin-top --> margin-block-start
• margin-bottom --> margin-block-end
• width --> inline-size
• height --> block-size

The logical properties work in agreement with the direction attribute and writing-mode property. By default, the browser assumes the direction is "ltr" (left-to-right) and the writing-mode is "horizontal-tb" (horizontal top-bottom) For RTL languages, set the global "dir" attribute in the HTML to dir="rtl". For scripts that read top-to-bottom, set the writing-mode property in CSS to "vertical-rl" (vertical-right-left) or "vertical-lr" (vertical-left-right).

The logical properties have strong browser support, although not all physical properties have a logical property equivalent. The box-shadow property, for instance, only accepts physical values. Please check a resource like MDN web docs for a full list of supported and unsupported values.

Benefits of Logical Properties

• Internationalization: The logical properties enable web content to be presented in various global languages and scripts. Two of the fastest-growing languages in the world use a right-to-left (RTL) script: Arabic and Urdu. The Arabic script is used by 189 languages, representing over two billion people. Logical properties make designing and scaling digital products for a global audience easier.
• Universal Design: In the spirit of the world wide web, it's important to consider the diversity of languages and write code in a way that acknowledges and accommodates the readers of those languages. Positioning elements with logical keywords is a way to design according to the principle of Universal Design as conceptualized by Ron Mace: "usable by all people, to the greatest extent possible, without the need for adaptation or specialized design."
• Efficiency: Using logical properties provides all designers with helpful shortcuts. For example, to add padding to the top and bottom of an element, combine padding-top and padding-bottom to a single property, padding-block.
• Creative Design: Consider that a non-traditional writing direction can be used for an artistic effect in any language. If we make a design choice to change all section headings to read top-to-bottom, the logical properties can help us style those headings in a way that makes sense semantically.

The next time you're writing fresh code, I hope you'll consider trying the logical properties. It's an important practice if you're designing content with RTL languages. I consider it a good practice for all CSS because it respects the context of multiple international languages.

References

• CSS logical properties and values (mdn web docs)
• RTL Styling Guide by Ahmad Shadeed
• Languages Using RTL Scripts (W3C)