CSS Logical Properties: Layout That Speaks Every Language
Think 'start/end' not 'left/right'. CSS Logical Properties adapt your layout to the user's writing direction, from English to Arabic. Use padding-inline-start instead of padding-left for robust, internationalized sites.
Why it exists
CSS was first designed for horizontal, left-to-right languages like English. Physical properties like padding-left or width are hardcoded to a physical screen direction. This model breaks when content is translated into right-to-left languages like Arabic or vertical languages like traditional Japanese, requiring complex overrides to fix broken layouts.
The mental model
Instead of physical directions (left, right, top, bottom), think in terms of two flow-relative axes: inline and block. The inline axis is the direction text flows within a line. The block axis is the direction in which new lines are added. For English, inline is horizontal and block is vertical. Properties are defined by their position on these axes, like inline-start or block-end.
How it works
You replace physical properties with their logical equivalents. For a standard English layout, width becomes inline-size, height becomes block-size, margin-left becomes margin-inline-start, and border-top becomes border-block-start. When the document's writing-mode changes, the browser automatically maps these logical properties to the correct physical direction. inline-start will map to left in English, but to right in Arabic, with no changes to your CSS.
When to use it
Use logical properties by default for any new project, especially if there's any chance of internationalization. They are essential for creating resilient component libraries and design systems intended for global use. They make your CSS future-proof and reduce the need for language-specific style overrides.
When not to use it
There are few reasons to avoid them in modern development. The main one is supporting very old browsers that lack support. For most modern web applications, however, logical properties should be the default choice over their physical counterparts.
One canonical example
Consider a card with an icon and a title. You want space between them. Using margin-left on the title works for English. But in Arabic (RTL), the icon would be on the right, and the title would still have a left margin, creating an awkward gap. Using margin-inline-start on the title adds space on the left for LTR languages and on the right for RTL languages, maintaining the correct visual spacing automatically.
Interview question
How do CSS Logical Properties primarily enhance the internationalization of web layouts?
- a.By automatically adjusting flow-relative properties (like inline-start) to match the document's writing direction.Correct
- b.By providing specific CSS rules that activate only for certain language codes.
- c.By allowing developers to define custom physical directions (e.g., "north", "south") for layout elements.
- d.By enabling the dynamic loading of different CSS files based on the user's geographical location.
Why? this is the answer
Logical properties like margin-inline-start automatically map to the correct physical direction (e.g., left or right) based on the document's writing-mode, ensuring layouts adapt seamlessly to different text directions. Option B describes a language-specific CSS approach, which logical properties aim to minimize.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles