It's time to say goodbye to width and height in CSS
Back in 2016 I wrote about right-to-left CSS. Now I want to give a quick update on what has changed since then.
To recap: different scripts are written in different directions. While Latin is usually written left-to-right, Arabic and Hebrew are usually written right-to-left. The layout is usually mirrored accordingly. However, there are also scripts that are usually written top-to-bottom, so the axes need to be flipped.
CSS Writing Modes Level 3 defines the concept of different writing modes as well as the 4 logical directions
inline-end. It became an official W3C recommendation in 2019.
CSS Logical Properties and Values Level 1 defines the relevant changes to CSS that would be required to define a layout that automatically adapts to the current writing mode. Unfortunately it is still in the draft stage. Some parts are already available in browsers, but some other parts are still likely to change.
inset-inline-end, … (instead of
border-start-end-radius, … (
- the axis in flex and grid layout are always flow-relative
viunits (instead of
Source: https://www.w3.org/TR/CSS/#CR-exceptions and https://caniuse.com/css-logical-props
What doesn't work
- media queries do not have flow-relative equivalents for
There is probably much more. There are so many CSS properties that it is easy to loose track. Also note that there are some properties that might interact with the layout but that do not adapt to the writing mode for a good reason:
- images are not rotated
- clip paths are not rotated
- shadow offsets refer to physical directions
There is no real reason to use
margin-bottom anymore. Just get used to
You have to be careful with shorthand properties though.
margin: 1em is fine because it sets the same value to all directions.
margin: 1em 2em uses physical directions, so it should be split into
margin-block: 1em and
If you do not need to support vertical writing modes, this will get your pretty far. The only thing you need to find a workaround for is
float. Often you can replace it with flex or grid layout. For the few remaining cases I actually still use my simple script from 2016.
Vertical writing modes are not quite there yet. If you need to support them you will have to put in some extra effort. But it doesn't hurt to get into this mode of thinking already. It will come sooner or later.
And finally: Don't be dogmatic about this. There might be cases in which you actually do want physical dimensions. I really think these will be rare exceptions though.