CSS logical properties explained - Part 1 (definition)

CSS logical properties

With CSS evolving every year and having new ways of layout design, knowing new properties that help on that is essential. We will explain the new CSS logical properties which are an evolution in layout systems just like FlexBox and Grid. I will explain it in a different point of view from what you might have seen before.

CSS logical properties definition

We are all used to physical naming of the CSS properties. Meaning these properties are defining how and where that property is used. (Margin-top, border-bottom, width, height,…).

But these properties could only be meaningful if the **language flow (writing mode) ** is from left to right and the website direction is from top to bottom. Interesting hah! We are only used to English on the web. But web has evolved and we need more control over the content and the language.

CSS block , inline , start and end properties

Block and Inline. These are the properties replacing the direction and flow definition in properties.

Block represents direction of the website

Logically if the website is scrolling from top to bottom, block is vertical and if the website is scrolling from right to left, block is horizontal. Also start and end properties will specify the endpoints on each direction.

Therefore here is the difference for margin properties in each case:

In vertical sites :

// Old way
margin-top: 1rem;

// New way
margin-block-start: 1rem; 

In horizontal sites:

// Old way
margin-right: 1rem;

// New way
margin-block-start: 1rem; 

Amazing. The block property shows the direction of the site. The margin-block-start property is the margin-top in vertical direction because the site direction is from the top. And it is equal to margin-right in a horizontal site because the site (elements blocks of the site) flow from right to left. Make sure you understand the direction of the site.

Inline represents the writing mode or text flow of the site

In each direction the text has a flow (This can be define with writing-mode property). English flows from left to right like most languages. But Farsi and Arabic and some other languages flow from right to left. Also Japanese and some languages flow from top to bottom.

We define left and right using inline and start/end properties. Inline-start means left in English flow and means right in Farsi/ Arabic. Furthermore It means top in Japanese flow.

// English:

 margin-inline-start = margin-left

// Farsi/Arabic 

margin-inline-start = margin-right

// Japanese

 margin-inline-start = margin-top

Width and height Properties

Similar for width and height, we will consider the direction to define them. In left to right and right to left languages width is from left to right. Therefore we use size property combining with inline and block properties:

// English/Farsi/Arabic
 width = inline-size

 height = block-size

And in a top to bottom language such as Japanese, we see the opposite:

// Japanese
inline-size = height
block-size = width

Please check out this CodePen from Elad Shechter and change the language to see some of the properties in action:

In the next article, I will demonstrate some real examples of how to use these properties in different cases.

Thank you for reading.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.