skip to content

The CSS Working Group is discussing ‘logical properties’ today with the Internationalization Working Group – and there’s a great new article on the topic this week from Jeremy Keith.

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!

WebMentions

Adam Argyle

on twitter.com

excellent excellent article recap by @adactio! i look forward to the solutions and will try and be helpful in the proposals 🤓 viva logical props!

Jens Oliver Meiert

on twitter.com

It’s great to read “long-term plan” here Logical properties would have been great to build on from the start However, with few sites (LTR *and* RTL) truly *needing* LPs, some excitement has also appeared more theoretical than practical in nature Curious about @CSSWG thoughts!

Christopher Kirk-Nielsen

on twitter.com

I've been using shorthand thinking they mapped to logical, oh no… I've been lying to myself this whole time? My existential CriSiS aside, this is tough! All ideas have pros & cons! The box-sizing-like approach would be my proposal…but that was discussed 5 years ago already. 🙈

Justgu.us (looking for des-ops job!)

on twitter.com

I'm curious if the "survivalship bias" is on regarding the adoption of logical properties, and turning them into custom properties by naming things. My take on this is that no matter how hard you try making them "better" technically, naming things is harder and mostly forgotten