--- title: It's time to say goodbye to width and height in CSS date: 2023-02-26 tags: [code, css, a11y] description: 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. --- Back in 2016 I wrote about [right-to-left CSS](https://blog.ce9e.org/posts/2016-06-04-rtl-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](https://www.w3.org/TR/css-writing-modes-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](https://www.w3.org/TR/css-logical-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](https://www.w3.org/TR/css-logical-1/#issue-3d880eb1). ## 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: and ## What doesn't work - [`float`](https://caniuse.com/mdn-css_properties_float_flow_relative_values) - [`overflow-block|inline`](https://caniuse.com/mdn-css_properties_overflow-block) - [`resize-block|inline`](https://caniuse.com/mdn-css_properties_resize_flow_relative_support) - 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](https://blog.ce9e.org/posts/2016-06-04-rtl-css/#the-workaround). 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.