CSS Writing Modes

Avatar of Chris Coyier
Chris Coyier on

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 →