Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

Developers slowly adopt logical CSS properties to be good web citizens and write CSS that follows a defined writing mode, directionality, and text orientation.

width becomes inline-size, margin-inline is a shorthand for margin-left and margin-right โ€” you get the idea.

MDN lists all the logical CSS properties if you haven't heard about them yet.

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; isn't this declaration mixing things up?

inline-size is logical property and will define either the horizontal or vertical size depending on the writing mode, but 50vw will always be the viewport width. Whoops.

I don't know if this mix is a real issue because I can't read languages that go from top to bottom, let alone build a website this way, but I can imagine that writing mode dependent viewport units can be handy!

Today I learned these viewport units exist! vi and 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

I built a component to learn how this works because this stuff is confusing as heck!

Playground
Choose a writing mode
Choose size properies
Choose a unit type
.๐Ÿ‘‹ {
  writing-mode: horizontal-tb;
  width: 50vw;
  height: 20vh;
}
Preview
Inline Axis
Block Axis

Text is lined out horizontally and flows from top to bottom.

The container's horizontal size is 50% viewport width and its vertical size is 20% viewport height.

There's nothing fancy here. It's pretty much the default.

What's the vi and vb browser support these days?

MDN Compat Data (source)
Browser support info for `vi` unit
chromechrome_androidedgefirefoxfirefox_androidsafarisafari_iossamsunginternet_androidwebview_android
10810810810110115.415.421.0108

We're pretty green!

And now that container queries landed, we also have cqi (container inline size) and cqb (container block size) if you want to query your container sizes writing mode dependent. ๐Ÿคฏ

I'm no expert in languages other than German and English, but are people building Asian websites ecstatic about these units? Does using these units make things easier? If you know more about it, I'd love to hear more!

If you enjoyed this article...

Join 5.5k readers and learn something new every week with Web Weekly.

Web Weekly โ€” Your friendly Web Dev newsletter
Reply to this post and share your thoughts via good old email.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles