CSS Writing Mode: A Journey Through Text Orientation

Hello, aspiring web developers! Today, we're going to embark on an exciting adventure into the world of CSS Writing Mode. As your friendly neighborhood computer teacher, I'm here to guide you through this fascinating property that can quite literally turn your text on its head! So, buckle up and let's dive in!

What is CSS Writing Mode?

Before we start coding, let's understand what writing mode is all about. Imagine you're reading a book. In English, we typically read from left to right and top to bottom. But what if you're reading a traditional Japanese book? The text runs vertically from top to bottom and right to left. That's where CSS writing-mode comes in handy!

The writing-mode property in CSS allows us to control the direction in which we display text and other inline content. It's like having a magic wand that can make your text dance in different directions!

Possible Values

Let's take a look at the different values we can use with the writing-mode property:

Value	Description
horizontal-tb	Text flows horizontally from left to right, top to bottom
vertical-rl	Text flows vertically from top to bottom, right to left
vertical-lr	Text flows vertically from top to bottom, left to right
sideways-rl	Text flows vertically from top to bottom, all characters rotated 90° clockwise
sideways-lr	Text flows vertically from top to bottom, all characters rotated 90° counter-clockwise

Applies to

The writing-mode property can be applied to all elements, including ::first-letter and ::first-line pseudo-elements. It's like a universal remote control for text direction!

DOM Syntax

Now, let's see how we can use writing-mode in our CSS:

element {
  writing-mode: value;
}

Simple, right? Let's dive into each value and see them in action!

CSS writing-mode - horizontal-tb Value

This is the default writing mode for most languages, including English. Let's see an example:

<div class="horizontal-tb">
  <p>This is horizontal text from left to right, top to bottom.</p>
</div>

.horizontal-tb {
  writing-mode: horizontal-tb;
}

This will display the text just as you're reading this article now. Nothing fancy, but it's our starting point!

CSS writing-mode - vertical-rl Value

Now, let's flip things around:

<div class="vertical-rl">
  <p>This text is vertical, right to left!</p>
</div>

.vertical-rl {
  writing-mode: vertical-rl;
  height: 200px;
}

Voila! Your text is now running vertically from top to bottom, and multiple lines will start from the right and move left. It's like reading a traditional Japanese or Chinese scroll!

CSS writing-mode - vertical-lr Value

Let's try the left-to-right vertical mode:

<div class="vertical-lr">
  <p>This text is vertical, left to right!</p>
</div>

.vertical-lr {
  writing-mode: vertical-lr;
  height: 200px;
}

Now your text is vertical, but it starts from the left side. It's like reading a Mongolian script!

CSS writing-mode - sideways-rl Value

Ready for some acrobatics? Let's try sideways-rl:

<div class="sideways-rl">
  <p>This text is sideways, right to left!</p>
</div>

.sideways-rl {
  writing-mode: sideways-rl;
  height: 200px;
}

This rotates each character 90° clockwise. It's like your text is doing a cartwheel!

CSS writing-mode - sideways-lr Value

And now for the final flip:

<div class="sideways-lr">
  <p>This text is sideways, left to right!</p>
</div>

.sideways-lr {
  writing-mode: sideways-lr;
  height: 200px;
}

This time, each character is rotated 90° counter-clockwise. It's like your text is doing a back-flip!

CSS writing-mode - Aesthetic Use (English Language)

While these different writing modes are crucial for supporting various languages, they can also be used creatively in English. Here's a fun example:

<div class="book-spine">
  <h2>The CSS Adventure</h2>
</div>

.book-spine {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  height: 300px;
  width: 50px;
  background-color: #f0f0f0;
  padding: 10px;
}

This creates a vertical text that looks like the spine of a book on a shelf. Cool, right?

CSS writing-mode - Related Properties

To fully control text orientation, you might want to use these properties alongside writing-mode:

Property	Description
text-orientation	Defines the orientation of the text characters
direction	Sets the direction of text, inline elements, and table columns
unicode-bidi	Overrides the bidirectional algorithm for text

Here's a quick example:

.vertical-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

This allows for vertical text where some characters (like Latin letters) are rotated, while others (like Chinese characters) remain upright.

And there you have it, folks! We've journeyed through the fascinating world of CSS Writing Mode. Remember, the web is a global platform, and these properties help make it accessible and beautiful for everyone, regardless of their language or script.

Next time you're building a website, why not try playing around with these properties? You might just create something unexpectedly awesome! Happy coding, and may your text always flow in the right direction!

Credits: Image by storyset