CSS logical properties were introduced with the aim of improving a website’s accessibility. Translating web content is becoming more and more common — but not every language has the same characteristics. Writing can run from left to right, but also from right to left, and so on.
To solve this, you can get familiar with CSS logical properties.
What are CSS Logical Properties?
CSS properties are based on physical values. That means the ones we know and use let us position the various elements on a web page however we like. To do so, we use properties such as right, left, bottom and top. The difference with CSS logical properties is that they are based on logical values. So you can indicate the start and the end of elements, which makes it possible to change the reading direction without having to change the layout.
Example of a CSS layout based on physical values
You can see that with physical values, the margins are anchored to the bottom and top relative to the page rather than relative to the text. This behaviour is also very clear on the coloured borders. Even when the text changes direction, the CSS properties do not move along with it — they stay fixed.
Media to re-attach: the CodePen “CSS – Valeurs physiques” by Melanie (@mlazarus) is embedded here in the French article and was lost during content extraction.
Example of a CSS layout based on logical properties
Unlike the example above, with logical properties the layout follows the text. The margin above the text stays the same whatever direction the text runs in. In the same way, the borders remain positioned relative to the text. The layout has therefore not changed: it is as though the page had simply been turned around.
Media to re-attach: the CodePen “CSS – Valeurs logiques” by Melanie (@mlazarus) is embedded here in the French article and was lost during content extraction.
Browser support that is not always complete
CSS logical properties are supported in many browsers. Watch out, though, for Opera Mobile, UC Browser, QQ Browser and Baidu, which only support them partially. As for Internet Explorer and Opera Mini, there is no support at all.
Note for the English version: this compatibility section dates from 2020 and is now obsolete. CSS logical properties are supported in all modern browsers, and Internet Explorer has been retired — the paragraph should be rewritten before publication.
Multilingual websites
When you develop websites aimed at several countries, you are sometimes required to integrate content for languages with particular characteristics compared with the Latin alphabet. One example is the Arabic alphabet, which is written and read from right to left.
This particularity needs to be taken into account from the outset in order to avoid additional development work. As we saw earlier, it is possible to adapt the CSS to the text by favouring certain properties over others. CSS logical properties make it possible to keep the same layout, whatever the writing direction.
The dir attribute
When it comes to writing direction, using the dir attribute lets you specify the value LTR (Left To Right) or RTL (Right To Left). The direction of the text is therefore signalled to search engines, but you can also give it the value auto. In that case it is the user agent that decides.
Although it is possible to indicate the direction in CSS with the direction: ltr; or direction: rtl; property, it is recommended to do it directly in the HTML, with the dir="ltr" or dir="rtl" attribute.
Example of the layout of an RTL text
The following example shows that depending on the direction of the text and the CSS properties used, the result will not be the same.
The block of text on the left serves as a point of comparison for the other two. It is a simple layout with LTR text. The middle block of text uses the same layout but with RTL text. Finally, the block on the right also contains RTL text, but uses CSS logical properties for its layout.
Media to re-attach: the CodePen
dir="ltr"&dir="rtl"by Melanie (@mlazarus) is embedded here in the French article and was lost during content extraction.
Combining the dir attribute with CSS logical properties gives a consistent layout whatever the writing direction of the text, without having to redevelop anything — as would be the case for the layout of the middle block, which did not adapt.
A few tips
When developing websites with content in different languages, you need to make sure you use typefaces that are compatible with the language’s characters (Arabic glyphs, Chinese glyphs, and so on).
You also need to be careful to respect the direction of the symbols used. For example, a play button should also be mirrored if the text is in RTL.
Even though CSS logical properties are not yet supported by every browser, they may well be the next major improvement. Combined with the HTML dir attribute, they will let you build sites compatible with any language without extra effort. Remember that to be effective, you should plan for this from the very start, even if it will only be used in the future.
