Here’s how to use logical properties in CSS

Introduction

CSS is the language that handles presentation on the web. It was originally created to target the physical coordinates (or dimensions) of the screen. As developers, we write styles targeting the screen dimension by using properties like margin-top, margin-right, margin-bottom, and others.

But the web is global, and languages ain’t entirely written in the same direction. For example, the English language is written from left to right (ltr), while Arabic is written from right to left (rtl).

To address the issue of internationalization, we now have logical properties and values. Here’s what the spec says about logical properties and values:

Logical properties and values provide the author (developer) with the ability to control layout through logical, rather than physical, direction and dimension mappings. – W3C Specs

What this means is that instead of targeting the physical parts of the screen, we can use flow-relative terms in our CSS styling.

For example, the logical mapping for width is inline-size, and for height it’s block-side. The inline-size will determine the length in the inline dimension, while the block-side determines the length in the block dimension. Using inline-size and block-size in place of width and height will produce the same layout.

Here is an example on codepen showing styling for two <div>s. One with width and height, and another with inline-size and block-size. Notice that the output is the same:

<div class="container">
  <div class="item physical-section"> 
  </div>
  <div class="item logical-section">
  </div>
</div>

.physical-section{
  width: 300px;
  height: 300px;
  background-color: blue;
}

.logical-section{
  inline-size: 300px;
  block-size: 300px;
  background-color: yellow;
}

You can view the result on codepen.

A look at writing-mode and direction property

There are different types of writing systems across the globe. Each writing system can be written in a particular direction according to the language. For example, the English language writing system is left to right (ltr). Meanwhile, Arabic or Hebrew are written from right to left (rtl).

Writing-mode

The writing-mode CSS property sets whether lines of texts are laid out horizontally or vertically, and the direction in which the blocks progress.

-MDN

Here is what the above definition means: the lines of texts are the texts contained inside a block element like the <p> element. These lines of text will flow from left to right (ltr) or right to left (rtl) in a horizontal top to bottom (horizontal-tb) or vertical left to right (vertical-lr) or vertical right to left (vertical-rl), depending on the writing system.

To accommodate the writing styles of different languages, we have the writing-mode property. And why do we have writing-mode? We use the writing-mode to target the starting point.

Writing-mode also determines how lines of text are laid out, which can be horizontal or vertical, and the direction (ltr or rtl) of the block.

Let’s take a look at inline and block-level elements to understand writing-mode.

The HTML <p> element is a block-level element (container). It’s the reason why another <p> element will start a new paragraph below the preceding paragraph. But the <p> element usually contains texts, and these texts are inline-level contents.

So writing-mode will determine the stacking of block-level containers, while direction will determine the flow of the inline-level contents.

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

Here is the complex index of the writing-mode property from the specs.

Syntax

writing-mode: horizontal-tb; 
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;

Here’s an example in Codepen :

Writing-mode

No Description

Direction

The direction CSS property sets the direction of text, table columns, and horizontal overflow. – MDN.

The direction property can take either of these two values: ltr (left to right) or rtl (right to left). Direction is used to define the direction of text.
Syntax

/* Keyword values*/

direction: ltr;            /* text goes from left to right.*/
direction: rtl;            /* text goes from right to left. */

Here is an example of a sample text in Hebrew using the direction rtl . You can view it on codepen. Note that the text was translated with Google:

<p class="sampleText">
 טקסט לדוגמה בעברית. תורגם באמצעות Google Translate.
</p>

.sampleText {
  direction: rtl;
}

There is also the dir attribute in HTML, which can be set at the root of the HTML document to define the direction of the texts. To use the dir attribute, we can do this:

<html dir="rtl">
<p>This sample text will be read from right to left</p>
</html>

Logical properties and values

With some basic understanding of some of the concepts like writing-mode and direction, we can now take a deep dive into understanding logical properties and values with some examples.

Logical properties are the writing-mode equivalent of their corresponding CSS physical properties.

Here’s a non-exhaustive list of logical properties and physical properties:

For the comprehensive list of logical properties, please see here.

With logical properties, developers can now write styles with a start/end aligned mindset instead of top, right, bottom, left (the physical dimensions of the screen), or even float as we have been used to.

So we have inline-start and inline-end for inline direction and block-start and block-end for block direction.

Logical properties makes it easy for developers to change or alter layouts. Think of CSS Grids (grid-row-start, grid-row-end, grid-column-start and grid-column-end).

Why block and inline dimension matters in logical properties

Logical properties and values use block and inline as an abstraction for the direction of flow.

Block dimension handles the direction of flow of text in a line within a line. For horizontal writing-mode, the text will flow in a vertical direction. For vertical writing-mode, the text will flow in a horizontal dimension.

Inline dimension is parallel to the flow of text within a line. Meanwhile, the horizontal dimension in a horizontal-writing-mode and vertical dimension in a vertical-writing-mode.

Example

Here is an example for using logical properties for the writing-mode of three different languages: English, Arabic, and Chinese.

<!--- HTML index.html -->

<div class="container">
 <div class="english-style item">
   <h2>English</h2>
   <p>
     This is a text sample, for demonstration purposes only in the English, Arabic. and Chinese language, writing-mode. Notice how the text is read from left to right (ltr) for English, right to left (rtl) for Arabic and vertical right to left (vertical-rl) for the Chinese language. Interesting how using logical properties and values can help make the web a more open and accessible place. Cheers to logical properties. </p> </div> <div class="arabic-syle item"> <h2>Arabic</h2> <p> هذا نموذج نصي ، لغرض التوضيح فقط في اللغة العربية. لاحظ كيف يُقرأ النص من اليمين إلى اليسار (rtl) للغة العربية. أتمنى أن تكون قد فهمت هذه النقطة. من المثير للاهتمام كيف أن استخدام الخصائص والقيم المنطقية يمكن أن يساعد في جعل الويب مكانًا أكثر انفتاحًا وسهولة. هتاف الخصائص المنطقية. </p> </div> <div class="chinese-style item"> <h2>Chinese</h2> <p> 這是文本示例，僅在中文中顯示。 注意中文是如何從右向左（rtl）讀取的。 我希望你明白這一點。 有趣的是，如何使用邏輯屬性和值可以使網絡變得更加開放和可訪問。 為邏輯屬性加油。 </p> </div> </div>

/* Styles.css*/

.container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 400px;
  gap: 1rem;
}


.item{
  background: #E1E3E4;
  text-align: justify;
}

.english-style{
  writing: horizontal-tb;
  direction: ltr;
}

.arabic-syle{
  writing-mode: horizontal-tb;
  direction: rtl;
}

.chinese-style{
  writing-mode: vertical-rl;
}

See the example here on Codepen.

Browser compatibility

While support for logical properties and values has not being fully adopted by all the browsers, a basic understanding of logical properties is key to understanding and working with layouts.

Please use caniuse to check for browser support and the compatibility of logical properties and values.

Conclusion

I recommend you start writing your styles using logical properties for accessibility because the web is undoubtedly an international tool.

With logical properties, developers can now make text run and flow vertically, flip layouts, and handle different writing-modes for languages across the world.

Though logical properties are yet to be fully supported in all browsers, I highly recommend you start writing your styles using logical properties rather than physical properties.

Further reading and resources:

• CSSWG Editor’s Draft CSS Logical Properties and Values
• MDN CSS logical properties and values
• Andrew Rachel’s Understanding Logical Properties and Values
• Jen Simmon’s CSS Writing Mode

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — start monitoring for free.