There are two modules of CSS properties — Logical and Physical. If you are working on a multi-lingual web-app, then logical CSS properties will come real handy.
Physical properties refer to the physical aspects of the viewports — height/width of the viewport.
On the other hand, logical CSS properties works according to the flow of content. The values of such properties change with the change of:
The Need For Logical CSS
Consider this example of a button with an icon on the left. Sample button with an icon and a margin between the icon and button text is shown below.
All is good till we are dealing with languages that are left-to-right. With languages like Arabic/Hebrew, which are right-to-left, the button will look something like this (Button with language right-to-left):
Here, the icon has the margin on the wrong side. If you want to check, you can use the dir
attribute for <p>
tag to change the writing direction.
<button dir="rtl">
<svg></svg>
<span>Sample Button</span>
</button>
To fix this, in addition to providing automatic support for internationalization, and creating a more robust front-end, we have CSS Logical Properties.
Defination
CSS Logical Properties and Values is a module of CSS introducing logical properties and values that provide the ability to control layout through logical, rather than physical, direction and dimension mappings.
The module also defines logical properties and values for properties previously defined in CSS 2.1. Logical properties define direction‐relative equivalents of their corresponding physical properties.
- MDN Web Docs
The thing to note in the above detailed (also verbose) defination is: Logical properties define direction‐relative equivalents of their corresponding physical properties.
Some of the Logical CSS properties are:
- margin-block
- margin-block-start
- margin-block-end
- margin-inline
- margin-inline-start
- margin-inline-end
The above combination exists for padding
too. To go through a complete list of these Logical CSS properties, explore here.
Physical CSS Properties: Rewind
If you are fimiliar with the workings and short-hands for margin
and padding
, then you know that the values go clockwise. For example:
margin: 1px 2px 3px 4px;
sets position 1, 2, 3 and 4 in clock-wise direction.
Clockswise positions to explain shorthands for margin and padding
Understanding The Basics Of Logical CSS Properties
For this, we’ll consider going over the 4 basic properties:
- padding-inline and padding-block
- margin-inline and margin-block
The margin and padding here are “flow relative” and not “direction relative”. This means, historically when we appliedmargin-top
to a block, it added margin-top according to the physical aspect of the viewport — irrespective of the language direction/writing-mode. This causes an issue like:
But what should actually happen when the direction or writing-mode changes:
Understanding Block Flow
The block flow is the direction in which the next “block” element will be placed. For example, if there are two <div>
tags, so where the adjacent <div>
will be placed is determined by the block flow.
Understanding Inline Flow
The inline flow is the direction in which the next “inline” element will be placed. i.e. how the words flow in a sentence. For example, if there are two <span>
tags, so where the adjacent <span>
will be placed is determined by the inline flow.
With logical properties, margin-top
becomes margin-block-start
, irrespective of the writing mode or direction. This helps to create a more inclusive front-end and hence the block flow has appropriate margins.
Box Model for Logical CSS Properties
Image Credits: Box-model for logical CSS properties:
Smart readers must have accounted for similarities with inline as well:
text-align: right;
becomes text-align:end
This helps us to align the text on the basis of “reading direction” and not to the physical right of the viewport.
For direction: ltr
and text-align: end
For direction:rtl
and and text-align: end
Support
The properties having a suffix of start
and end
(margin-block-start
and margin-block-end
) have strong compatibility and are a good choice for desktop and mobile both. But the properties which lack the suffix like margin-block
and margin-inline
are good for desktop but not for mobile.
You can explore CANIUSE.COM to check complete support.
Thanks for reading ❤
Want to connect?
Follow me on Twitter and LinkedIn or reach out in the comments below!
Top comments (0)