CSS has historically revolved around
physical directions:
width, height,
top, right, bottom, and left.
Those make sense
in a world where
what you see is what you get –
but that’s fundamentally
not how the web works.
Over time,
new layout methods
like flexbox and grid
have started to introduce
‘flow-relative’ or ‘logical’ directions:
inline-size, block-size,
inline-start, inline-end,
block-start, and block-end.
That allows more meaningful and resilient design in the face of translation – both for multi-lingual sites, and for a web that supports more and more automatic translation.
It’s not bad to use the physical properties sometimes, when they best express the design intent, but they shouldn’t be encouraged as the default choice.
So the goal in my mind is that it should be simple to write an entire site without reference to physical coordinates. And doing that should be encouraged by the language.
For example,
we currently have a margin
shorthand that defines physical margin properties.
We could add a margin-logical shorthand,
but it feels like
a second-class citizen of the language.
If the physical property feels like the ‘default’,
then the language is encouraging
authors to stick with physical dimensions.
Yesterday, Jeremy Keith wrote a great article – Let’s get logical – about his attempts to refactor a site using only flow-relative properties, and the limitations he ran intro with existing CSS. It’s a great run down of what works already, and what’s still missing.
We’re not there yet. So how do we get there?
Well, I don’t know for sure – but articles like this are very helpful as we try to work it out!
Fantasai and I did spend some time working on this last year, and came up with a multi-year and multi-step proposal. Maybe there are other approaches we should consider as well?
We’re discussing all of that today at W3C’s annual TPAC conference, in a joint meeting between the CSS Working Group and the Internationalization Working Group. Maybe we’ll have something new to report later today?
If you have ideas, or additional issues that we should have in mind – let us know!