Well, now I’m really glad I wrote that post about logical properties!
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!
I was refactoring some CSS on The Session over the weekend. I thought it would be good to switch over to using logical properties exclusively. I did this partly to make the site more easily translatable into languages with different writing modes, but mostly as an exercise to help train me in thinking with logical properties by default.
All in all, it went pretty smoothly. You can kick the tyres by opening up dev tools on The Session and adding a writing-mode declaration to the body or html element.
For the most part, the switchover was smooth. It mostly involved swapping out property names with left, right, top, and bottom for inline-start, inline-end, block-start, and block-end.
The border-radius properties tripped me up a little. You have to use shorthand like border-start-end-radius, not border-block-start-inline-end-radius (that doesn’t exist). So you have to keep the order of the properties in mind:
border-{{block direction}}-{{inline-direction}}-radius
Speaking of shorthand, I also had to kiss some shorthand declarations goodbye. Let’s say I use this shorthand for something like margin or padding:
margin: 1em 1.5em 2em 0.5em;
Those values get applied to margin-top, margin-right, margin-bottom, and margin-left, not the logical equivalents (block-start, inline-end, block-end, and inline-start). So separate declarations are needed instead:
margin-block-start: 1em;
margin-inline-end: 1.5em;
margin-block-end: 2em;
margin-inline-start: 0.5em;
Same goes for shorthand like this:
margin: 1em 2em;
That needs to be written as two declarations:
margin-block: 1em;
margin-inline: 2em;
Now I’ve said it before and I’ll say it again: it feels really weird that you can’t use logical properties in media queries. Although as I said:
Now you could rightly argue that in this instance we’re talking about the physical dimensions of the viewport. So maybe width and height make more sense than inline and block.
But along comes the new kid on the block (or inline), container queries, ready to roll with container-type values like inline-size. I hope it’s just a matter of time until we can use logical properties in all our conditional queries.
The other place where there’s still a cognitive mismatch is in transforms and animations. We’ve got a translateX() function but no translate-inline(). We’ve got translateY() but no translate-block().
On The Session I’m using some JavaScript to figure out the details of some animation effects. I’m using methods like getBoundingClientRect(). It doesn’t return logical properties. So if I ever want to adjust my animations based on writing direction, I’ll need to fork my JavaScript code.
Oh, and one other thing: the aspect-ratio property takes values in the form of width/height, not inline/block. That makes sense if you’re dealing with images, videos, or other embedded content but it makes it really tricky to use aspect-ratio on elements that contain text. I mean, it works fine as long as the text is in a language using a top-to-bottom writing mode, but not for any other languages.
This is the trick that Charlotte used to get the nifty blobby effect on last year’s UX London site. Now there’s a tool to help you do the same.
We don’t take our other valuables with us when we travel—we leave the important stuff at home, or in a safe place. But Facebook and Google don’t give us similar control over our valuable data. With these online services, it’s all or nothing.
We need a ‘trip mode’ for social media sites that reduces our contact list and history to a minimal subset of what the site normally offers.
In which Dan simultaneously goes to the Netherlands and Belgium in a Miévillian sort of way.
Have a listen to the dConstruct 2011 talk from Kars for context.
Continuous partial City And The City, courtesy of James.
Those of us who reside on the “right” side of fixed, physical borders seem to cross the electromagnetic border every day, whether overtly, by entering the right passwords and credit card numbers, or covertly, as when using VPNs to watch TV programs viewable only in other territories. Those on the “wrong” side are subjected to a different but analogous battery of tests, intensifying at the physical border but often carried out far from it, in networked enclaves or foreign transit zones or aboard floating teleconference platforms in international waters.