The ‘writing-mode’ Property: Setting Whether Text Lines Run Horizontally or Vertically.

The ‘writing-mode’ Property: Setting Whether Text Lines Run Horizontally or Vertically (Or Maybe Even Diagonally, If You’re Really Ambitious!)

Alright, gather ’round, class! Settle down, you lot! No throwing erasers – I’m looking at you, Kevin! Today, we’re diving headfirst into a CSS property so powerful, so versatile, it can single-handedly flip your entire website on its head… literally. I’m talking, of course, about the glorious, the magnificent, the utterly transformative writing-mode property! 🤩

Forget everything you thought you knew about text flowing from left to right, or right to left, or whatever other boring direction you’ve been shackled to your entire web-developing lives. Today, we’re breaking free from the tyranny of horizontal lines! We’re going vertical! We’re going… well, we’ll see where we’re going. Buckle up, it’s going to be a wild ride! 🎢

What is writing-mode, Anyway? (And Why Should I Care?)

Simply put, the writing-mode property determines the direction in which lines of text are laid out. Think of it as the conductor of your textual orchestra, dictating whether the violins play horizontally, vertically, or, if you’re feeling particularly avant-garde, some sort of chaotic, experimental jig.

Why should you care? Because it opens up a whole new world of design possibilities! Imagine:

Vertical Navigation Menus: Sleek, modern, and a fantastic way to stand out from the crowd. No more boring horizontal bars! 🙅‍♂️
Japanese/Chinese Calligraphy-Inspired Layouts: Perfect for adding a touch of authenticity and cultural richness to your designs. ⛩️
Artistic Typography: Create eye-catching headlines and visual effects that simply aren’t possible with horizontal text alone. 🎨
Breaking the Monotony: Just because everyone else is doing it horizontally doesn’t mean you have to! Be a rebel! 🤘

Enough talk! Let’s see some code!

The writing-mode property accepts a few key values, each with its own unique flavor and application. Let’s explore them, shall we?

1. horizontal-tb (The Old Faithful)

This is the default value. It’s the one you’ve been living with your whole life. It’s the reason your website doesn’t look like a Jackson Pollock painting (yet). It stands for "horizontal top-to-bottom" and means text flows horizontally, starting from the top of the line and progressing downwards.

.my-element {
  writing-mode: horizontal-tb; /* Yawn... */
}

Honestly, this is so common, you probably haven’t even realized it existed. It’s the unsung hero of web typography, silently doing its job without demanding attention. Let’s move on to something a bit more… exciting.

2. vertical-rl (The Classic Vertical Look)

This is where things start to get interesting! vertical-rl stands for "vertical right-to-left" and lays out text vertically, with each line starting from the right and progressing to the left.

.my-element {
  writing-mode: vertical-rl; /* Now we're talking! */
}

Think of traditional Chinese or Japanese writing. This is the look we’re going for. It’s perfect for mimicking that elegant, calligraphic feel.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Vertical Text Example</title>
<style>
  .vertical-text {
    writing-mode: vertical-rl;
    font-size: 24px;
    line-height: 1.5;
  }
</style>
</head>
<body>

<div class="vertical-text">
  This is some vertical text! Isn't it fancy?  This is some vertical text! Isn't it fancy? This is some vertical text! Isn't it fancy?
</div>

</body>
</html>

3. vertical-lr (The Mirror Image)

Similar to vertical-rl, but flipped! vertical-lr stands for "vertical left-to-right" and lays out text vertically, with each line starting from the left and progressing to the right.

.my-element {
  writing-mode: vertical-lr; /* Almost the same, but different! */
}

While less common than vertical-rl in traditional East Asian writing, it can be useful for creating a mirrored or reversed effect. Think of it as the "evil twin" of vertical-rl. 😈

Example:

<!DOCTYPE html>
<html>
<head>
<title>Vertical Text Example (Left-to-Right)</title>
<style>
  .vertical-text {
    writing-mode: vertical-lr;
    font-size: 24px;
    line-height: 1.5;
  }
</style>
</head>
<body>

<div class="vertical-text">
  This is some vertical text! Isn't it fancy? This is some vertical text! Isn't it fancy? This is some vertical text! Isn't it fancy?
</div>

</body>
</html>

4. sideways-rl (The Rotator)

This value rotates the characters themselves by 90 degrees clockwise, and then arranges them horizontally, right-to-left.

.my-element {
  writing-mode: sideways-rl;
}

5. sideways-lr (The Other Rotator)

This value rotates the characters themselves by 90 degrees counter-clockwise, and then arranges them horizontally, left-to-right.

.my-element {
  writing-mode: sideways-lr;
}

A Handy Table for Quick Reference:

Value	Description	Visual Representation (Simplified)	Common Use Cases
`horizontal-tb`	Text flows horizontally, top to bottom.	➡️ (Top to Bottom)	Standard website text, paragraphs, headings.
`vertical-rl`	Text flows vertically, right to left.	⬇️ (Right to Left)	Mimicking traditional East Asian writing, vertical navigation, artistic typography.
`vertical-lr`	Text flows vertically, left to right.	⬇️ (Left to Right)	Mirrored/reversed text effects, less common use cases.
`sideways-rl`	Rotates characters 90° clockwise, then arranges horizontally, right-to-left.	文字 (Rotated Right)	Sidebar labels, callouts where space is limited, artistic effects.
`sideways-lr`	Rotates characters 90° counter-clockwise, then arranges horizontally, left-to-right.	文字 (Rotated Left)	Sidebar labels, callouts where space is limited, artistic effects.

But Wait, There’s More! (Logical vs. Physical Values)

Now, things are about to get a tad more complex, but don’t worry, I’ll hold your hand (figuratively, of course – social distancing, remember?). The values we’ve discussed so far are considered physical values. They directly specify the physical direction of the text flow.

However, there are also logical values. These are relative to the writing direction of the document. Why is this important? Because it allows your website to adapt to different languages and cultural contexts!

Here’s the breakdown:

block-flow: This is the key logical value. It signifies the direction in which block elements are laid out. Think of it as the overall flow of your content.
- block-flow: horizontal: Blocks are laid out horizontally, like paragraphs in English.
- block-flow: vertical: Blocks are laid out vertically, like columns in a Japanese newspaper.
inline-base: This specifies the direction in which inline content (like text within a paragraph) flows.

Logical Properties in Action (with a touch of international flair):

Imagine you’re building a website that needs to support both English (left-to-right) and Arabic (right-to-left) languages. Using physical values would mean you’d have to rewrite your CSS for each language! That’s a recipe for madness (and a serious waste of time).

Instead, you can use logical properties:

.my-element {
  writing-mode: vertical-lr; /* Physical Value - might not be what you want in all languages */
  /* Better approach using logical properties: */
  writing-mode: block-flow vertical; /*  This will adjust based on the document's direction */
}

In an English (LTR) document, block-flow vertical would render similarly to vertical-lr. In an Arabic (RTL) document, it would render similarly to vertical-rl. See how clever that is? 🧠

Browser Compatibility (The Ever-Present Caveat)

As with all things web development, browser compatibility is a crucial consideration. The writing-mode property has been around for a while, so support is generally good across modern browsers. However, it’s always wise to double-check!

Most Modern Browsers (Chrome, Firefox, Safari, Edge): Generally, good support for all the values we’ve discussed. 🎉
Older Browsers: May require prefixes (like -webkit-, -moz-) or may not support the property at all. 😫

Best Practices and Tips & Tricks (Because I’m a Generous Teacher):

Use Logical Values When Possible: Especially if you’re building a multilingual website. It’ll save you headaches down the road. 🤕
Experiment with line-height: Vertical text often requires adjustments to line-height to ensure readability. Play around with different values until you find something that looks good.
Consider text-orientation: This property controls the orientation of characters within a vertical text flow. You can use values like upright (characters are upright) or mixed (characters are rotated).
Don’t Overdo It!: Vertical text can be visually striking, but it can also be difficult to read if used excessively. Use it sparingly and strategically. Remember, just because you can make everything vertical doesn’t mean you should. 🤪
Test, Test, Test!: Always test your designs in different browsers and devices to ensure they look as intended.

Example Combining writing-mode and text-orientation

<!DOCTYPE html>
<html>
<head>
<title>Combined Example</title>
<style>
  .vertical-text {
    writing-mode: vertical-rl;
    text-orientation: upright; /* Keeps characters upright */
    font-size: 24px;
    line-height: 1.5;
    margin: 20px;
  }

  .sideways-text {
    writing-mode: sideways-lr;
    font-size: 20px;
    margin: 20px;
  }
</style>
</head>
<body>

<div class="vertical-text">
  This is vertical text with upright orientation!  This is vertical text with upright orientation!
</div>

<div class="sideways-text">
  This is sideways text!  Useful for labels!
</div>

</body>
</html>

Advanced Techniques (For the Web Design Ninjas)

Okay, you’ve mastered the basics. Now let’s delve into some advanced techniques that will truly set you apart from the crowd:

Animations and Transitions: Animate the writing-mode property to create stunning visual effects. Imagine a menu that smoothly transitions from horizontal to vertical on hover! ✨
Media Queries: Use media queries to adapt the writing-mode based on screen size or device orientation. This is particularly useful for mobile devices.
Combining with Other CSS Properties: Experiment with other properties like transform, letter-spacing, and word-spacing to further refine the appearance of your vertical text.

Conclusion (And a Final Word of Wisdom)

The writing-mode property is a powerful tool that can unlock a whole new dimension of creativity in your web designs. It’s not just about flipping text vertically; it’s about thinking outside the box and challenging the conventions of traditional web typography.

So go forth, experiment, and create something amazing! Just remember to use your newfound powers responsibly. Don’t turn the entire internet vertical overnight – a little subtlety goes a long way. 😉

And with that, class dismissed! Now get out there and make some vertical magic! 🎉

The ‘writing-mode’ Property: Setting Whether Text Lines Run Horizontally or Vertically.

The ‘writing-mode’ Property: Setting Whether Text Lines Run Horizontally or Vertically (Or Maybe Even Diagonally, If You’re Really Ambitious!)

Comments

Leave a Reply Cancel reply