CSS Writing Modes

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

We shared a little trick not long ago about using the writing-mode property to set a title vertically. While a useful trick, it’s the tip of the iceberg on this property. Jen Simmons digs in and explains what’s really going on.

There is a certain way elements flow on websites. Without doing anything special, block elements push downward from top to bottom. Inline elements go from left to right. In writing-mode, that would be expressed by (the default) horizontal-tb (horizontal inline flow, “top to bottom” block flow). Different languages and cultures handle layout in other ways, so this property allows for control over that in a more comprehensive way than the dir attribute is capable of. For example, vertical-rl (vertical inline flow, “right to left” block flow).

Direct Link →