Easily Create Sideways Text Using the “writing-mode” CSS Property

In this quick tip I’m going to show you how to display text on a web page running from top to bottom, instead of left to right (or right to left). There are a two approaches, one being better than the other, so let’s jump in and take a look!

How to Use CSS “writing-mode”

[embedded content]

Approach #1: CSS Transforms

If you’re familiar with CSS you might instinctively think that transform would be the best way to approach this problem, but let me show you why it isn’t ideal. We’ll start with some content (some headings and a paragraph), then we’ll apply a transform, along with a transform-origin so that it rotates from the correct point, then an offset to keep it on screen:

This approach works in terms of rotating the text, but the document flow isn’t affected, so the h2 in our case now sits on top of the content below it. Still, it gives us quite a cool abstract result.

Approach #2: CSS writing-mode

Our second approach will keep the document flow so that it remains true to the dimensions of the h2, irrespective of the text direction. We’ll use the writing-mode property, like this:

h2 { writing-mode: vertical-rl;
}

In this case we’ve given it a value of vertical-rl, which applies a display direction of vertical, and a text direction of right to left. Take a look:

Much better. You’ll also notice that the cursor changes too, which doesn’t happen with CSS transform.

Block Flow Direction

You might have noticed that we’ve used a value of rl (right to left) whereas we’re used to reading latin script left to right. But that’s because we’ve changed the Block Flow Direction. if we give our h2 a set height value, you’ll see the text wrap and you’ll realise that in this case we actually need the lines to read from the right of the page to the left: 

This leads to us needing to define which bits of all this alignment need to flow and in which directions. Latin-based scripts flow from top to bottom (this is the Block Flow Direction). Their text reads left to right (this is the Inline Flow Direction). And their characters have a baseline at the bottom whilst pointing upward (this is the Character Direction). Like this:

Other scripts, such as Arabic-based, Han-based (like Chinese and Japanese), and Mongolian-based, can display text using these three flows in any combination of directions.

Scripts and Writing Mode

The Writing Mode specification was designed to support all the various scripts and writing systems of the world. We mentioned Mongolian-based systems, for example, any they are displayed vertically, but flow left-to-right.

Other writing-mode values, which you can use today, include:

• vertical-lr where the text runs vertically but begins at the left of the container running right.
• horizontal-tb where the text remains horizontal, but flows from top to bottom. This (you’ll have noticed) is default behavior.

Text Orientation

Here’s one more thing to take a look at: a Chinese poem, using vertical-rl writing mode. Its content is floated right, so that you begin at the right of the page and read toward the left. But what you’ll perhaps notice is that the characters are still oriented upright. Latin characters would be oriented differently with these exact same rules. This is deliberate:

“The Unicode Standard assigns a property to each character and browsers can use this to determine the default orientation of a given character.”

– W3C

You can further tailor the orientation of characters by using the text-orientation property.

Conclusion

CSS writing mode has excellent browser support at the time of writing, though some aspects of it are still in development. Everything you’ve see me do in this tutorial can be used in production right now.

Whether you use this for practical or aesthetic results, let us see what you’ve done in the comments!

Useful Links