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.
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
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.
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
- positioning properties like
lefthave no equivalent yet
- 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
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 things you need to find workarounds for are
float and non-static positioning. Often you can replace
them 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.