How to Use CSS Logical Properties to Control Layout

CSS logical properties define a new way of working with layout. Their primary goal is to help developers support different writing systems such as right-to-left (RTL) and vertically displayed scripts. These new features make it possible to control layout through logical rather than physical properties. For example, with logical properties you might describe the start and end of an element, rather than its left and right boundaries. See the difference?

Even if you don’t work with non-LTR languages and multi-directional websites, it’s worth getting familiar with the new specifications. Logical properties will help establish a new philosophy of creating more flexible layouts with CSS.

Browser Support

As browser support still has much space for improvement, logical properties are not yet production-ready. However, newer versions of Firefox, Chrome, and Safari already support them, so you can certainly get started with testing.

Older versions of Firefox, Chrome, and Safari also provide partial support with the -moz- and -webkit- prefixes. Currently, Internet Explorer and Edge don’t support the feature at all.

Content Directions in CSS

English is written with a left-to-right (LTR) and top-to-bottom (tb) horizontal script (the Latin script). However, not every language is like that. There are many examples of languages which use a right-to-left (RTL) script, like Arabic and Hebrew, and others which can be vertically displayed, like Japanese, Chinese, and Mongolian.

“Languages don't have a direction. Scripts have a writing direction, and so languages written in a particular script, will be written with the direction of that script.” – W3C

In CSS you can set content direction on a page with the direction and writing-mode properties.

1. Writing-mode

The writing-mode property defines how block content (such as paragraphs) flows on the screen. It can take three values:

horizontal-tb (default): horizontal content, from top to bottom;
vertical-lr: vertical content, from left to right;
vertical-rl: vertical content, from right to left.

2. Direction

The direction property defines how inline content (such as characters in a paragraph) flows on the screen. It can take two values:

ltr (default): left-to-right
rtl: right-to-left

CSS logical properties automatically map layouts to the content direction set with the direction and writing-mode properties.

A New Approach to Layout

1. Flexbox

The new approach to logical layouts started with the flexbox specifications. Flexbox doesn’t take into account physical dimensions such as left, right, top, and bottom. It uses values like flex-start and flex-end that rely on the direction of the main and cross axes.

Whether flex items flow horizontally or vertically also depends on the position of the two axes you can define with the flex-direction property. All in all, concepts like "start" and "end" are entirely relative in flexbox and can easily be flipped.

2. CSS Grid

CSS Grid follows the same logic. CSS Grid doesn’t know left, right, top, and bottom, either. It lays out items in rows and columns, along two non-hierarchical axes.

You can define the position of grid items with properties such as grid-row-start, or with named grid areas using the grid-template-areas property. Similarly to flexbox, CSS Grid also has logical properties instead of physical ones.

3. Logical Properties

CSS logical properties take this new approach to the next level. They change the way we define frequently used properties such as margin, padding, width, and height.

Physical vs. Logical Dimensions

Top, bottom, left, and right are the physical dimensions of the screen. Currently, CSS maps properties to these physical directions. However, when you have an RTL website, you don’t want to start writing from the left. For example, if you want to add a margin before the text, you need to use the margin-right property instead of margin-left, which you would use on an LTR page.

And, this is just setting the margin of one content box. If you want to add RTL support to your whole site you either have to rewrite your entire CSS or perform the conversion with Sass or another CSS preprocessor.

Logical properties change this modus operandi. Instead of vertical and horizontal dimensions, they use block and inline dimensions:

The block dimension is how block items such as paragraphs are laid out on a page (in English from top to bottom).
The inline dimension is how inline items such as characters in a paragraph are laid out on a page (in English from left to right).

Here’s how logical dimensions map to physical dimensions in English and other LTR/horizontal-tb languages:

Logical dimensions	Physical dimensions (English)
block-start	top
block-end	bottom
inline-start	left
inline-end	right

The logical-to-physical mapping looks like this in RTL/horizontal-tb scripts like Arabic:

Logical dimensions	Physical dimensions (Arabic script)
block-start	top
block-end	bottom
inline-start	right
inline-end	left

And, this is how logical dimensions work with a vertical-rl script like Japanese when written in tategaki (縦書き) style:

Logical dimensions	Physical dimensions (Japanese)
block-start	right
block-end	left
inline-start	top
inline-end	bottom

Logical properties in Japanese tategaki vertical style script

As you can see, CSS logical properties will allow developers to flip layouts around on a whim.

CSS Logical Properties

CSS logical properties are currently defined by Level 1 specifications (Editor’s Draft; provided for open discussion).

Below, you can find examples of the most important logical properties. They are the logical equivalents of frequently used physical properties such as margin and float. If you are interested in the full list of logical properties check out MDN’s reference guide, too.

1. Text Align

You can use the text-align property with the start and end values in browsers that support CSS logical properties. In English and other languages which are displayed LTR, start equates to left; and end equates to right.

In RTL examples such as Arabic, it works reversely: start equates to right and end equates to left.

.align-start {
  /* Physical property | English */
  text-align: left;   
  
  /* Logical property */
  text-align: start;
}
.align-end {
/* Physical property | English */
  text-align: right;   
  
  /* Logical property */
  text-align: end;
}

In the demo below, you can test how text-align works with logical properties if you change direction or writing-mode of the page:

2. Margin, Padding, Border

You can also define margin, padding, and border with logical properties. You need to use the -inline-start postfix to indicate the start of the inline dimension, which is left in English and other LTR/tb languages. Similarly, the -inline-end postfix is used for the end of the inline dimension, which is right on English-language websites.

The -block-start postfix is for the start of the block dimension—in English: top, while -block-end is for the end of the block dimension—in English: bottom.

.add-border {
  /* Physical properties | English */
  border-left: 0.625rem red solid;
  border-top: 0.625rem blue solid;
  border-right: 0.625rem purple solid;
  border-bottom: 0.625rem green solid;
    
  /* Logical properties */
  border-inline-start: 0.5rem red solid;
  border-block-start: 0.5rem blue solid;
  border-inline-end: 0.5rem purple solid;
  border-block-end: 0.5rem green solid;
}

.add-margin {
  /* Physical properties | English */
  margin-left: 0.25rem;
  margin-top: 0.5rem;
  margin-right: 0.75rem;
  margin-bottom: 1rem;
    
  /* Logical properties */
  margin-inline-start: 0.25rem;
  margin-block-start: 0.5rem;
  margin-inline-end: 0.75rem;
  margin-block-end: 1rem;
}

.add-padding {
  /* Physical properties | English */
  padding-left: 1.25rem;
  padding-top: 1.5rem;
  padding-right: 1.75rem;
  padding-bottom: 2rem;
    
  /* Logical properties */
  padding-inline-start: 1.25rem;
  padding-block-start: 1.5rem;
  padding-inline-end: 1.75rem;
  padding-block-end: 2rem;
}

Below, you can test logical properties belonging to the border property.

Note that you could also use the logical equivalents of longhand border properties. For instance, border-inline-start-color (instead of border-left-color) is a valid logical property, too.

You have probably noticed that something is missing here, though. Most likely, you frequently use the margin, padding, and border shorthands instead of longhands such as padding-top. How do logical properties handle these shorthands? Currently, they don’t handle them at all.

The logical equivalents of these shorthands is still an open question, under active discussion. There will be a solution in the future, however, right now, you need to use the longhand properties of logical margins, paddings, and borders. For more information, check out Issue 1282 in the GitHub repo of the CSS Working Group.

3. Float

You can also define floats using logical properties. In LTR scripts, inline-start equates to left and inline-end equates to right. In RTL languages, it happens reversely, as here the inline dimension starts on the right of the screen.

.float-inline-start {
  /* Physical property | English */
  float: left;   
  
  /* Logical property */
  float: inline-start;
}

.float-inline-end {
  /* Physical property | English */
  float: right;   
  
  /* Logical property */
  float: inline-end;
}

You can test logical floats in the demo below:

4. Width and Height

Sizing properties, namely width and height, also have their logical equivalents. In top-to-bottom writing scripts, inline-size equates to width, as this is the dimension in which inline elements (e.g. characters in a paragraph) flow on the screen. And, block-size equates to height, as this is the dimension in which block elements (e.g. paragraphs) flow.

In vertical writing scripts, height is the inline dimension (inline-size), as characters flow vertically and width is the block dimension (block-size), as paragraphs flow horizontally.

As you can see below, max-width, max-height, min-width, and min-height have their own logical properties, too.

.add-dimensions {
   /* Physical property | English */
   width: 600px;
   height: 200px;
  
   /* Logical property */
   inline-size: 600px;
   block-size: 200px;
}

.max-dimensions {
   /* Physical property | English */
   max-width: 100%;
   max-height: 300px;
  
   /* Logical property */
   max-inline-size: 100%;
   max-block-size: 300px;
}

.min-dimensions {
   /* Physical property | English */
   min-width: 50%;
   min-height: 200px;
  
   /* Logical property */
   min-inline-size: 50%;
   min-block-size: 200px;
}

In the demo below, you can try out how the inline-size and block-size properties work with different directions and writing modes:

5. Position

You can position elements on the screen using logical properties as well. Logical positions replace the physical top, right, bottom, and left properties.

The start of the block dimension (top in English) is defined by the inset-block-start logical property. Similarly, the start of the inline dimension (right in English) is defined by the inset-inline-start property.

Logical positions also have a cool shorthand property: inset, which follows the

inset-block-start,
inset-inline-start,
inset-block-end,
inset-inline-end

order.

.add-position {
   /* Physical properties | English */
   top: 0;
   right: 100px;
   bottom: 200px;
   left: 300px;
   
  
   /* Logical properties | Longhand */
   inset-block-start: 0;
   inset-inline-start: 100px;
   inset-block-end: 200px;
   inset-inline-end: 300px
   
   /* Logical properties | Shorthand */
   inset: 0 100px 200px 300px;
}

The demo below sticks a div to the start of both the block and inline axes, using the inset-block-start and inset-inline-start properties (in English top and left):

Conclusion

Logical properties are evidently logical and convenient, but it won’t be easy to get used to them as they require a completely different mindset. No doubt they will be a huge win for developers who need to support RTL and/or vertical language scripts.

Thinking in terms of inline and block dimensions rather than physical directions will also change the way we think about layout. Let’s hope this new approach will result in some interesting layouts and multi-directional websites in the future, too.