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 block-start, block-end, inline-start, and 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.

What works

• block-size and inline-size
• margin-block-start, margin-inline-end, …
• padding-block-start, padding-inline-end, …
• border-block-start, border-inline-end, …
• inset-block-start, inset-inline-end, … (instead of top, right, …)
• border-start-end-radius, … (border-{block}-{inline}-radius)
• text-align: start|end
• the axis in flex and grid layout are always flow-relative
• vb and vi units (instead of vh and vw)

Source: https://www.w3.org/TR/CSS/#CR-exceptions and https://caniuse.com/css-logical-props

What doesn't work

• float
• overflow-block|inline
• resize-block|inline
• media queries do not have flow-relative equivalents for width and height yet

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
• …

Recommendations

There is no real reason to use width or margin-bottom anymore. Just get used to inline-size and margin-block-end.

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 margin-inline: 2em.

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.