Viewport units can consider the writing mode
- Published at
- Updated at
- Reading time
Slowly but surely, developers adopt logical CSS properties to be good web citizens and write CSS that follows a defined writing mode, directionality, and text orientation.
margin-inline is a shorthand for
margin-right, you get the idea.
That's all good and dandy, but there's at least one situation where logical CSS properties aren't enough. Suppose you want to style a container and make it 50% of the viewport on the horizontal axis.
You can define
inline-size: 50vw; but isn't that mixing things up?
inline-size will define either the horizontal or vertical size depending on the writing mode, but
50vw will always be the viewport width.
I don't know if that's a real issue because I can't read languages that go from top to bottom, let alone build a website. But I can imagine that writing mode dependent viewport units can be handy!
And today I learned these viewport units exist!
vb consider writing direction!
vi is the percentage of the initial containing blocks inline axis and
vb the percentage of the block axis. 🤯
In left-to-right vi -> vw vb -> vh --- In top-to-bottom vi -> vh vb -> vw
That's confusing stuff, so I build a component to learn how this works!
What's the browser support? Chrome started supporting these units not very long ago.
I'm no expert in languages other than German and English, but are people building Asian websites ecstatic about these units and that they're almost cross-browser supported at the time I'm publishing this article?
If you know more about it, I'd love to hear more!