CSS Writing Modes: Creating Vertical or Other Non-Horizontal Text Layouts.

CSS Writing Modes: Turning the Page (Literally!) and Creating Vertical or Other Non-Horizontal Text Layouts

Alright, buckle up, design adventurers! Today, we’re diving headfirst into the fascinating, sometimes bizarre, and always powerful world of CSS Writing Modes. Forget everything you thought you knew about text flowing neatly from left to right (or right to left, depending on your localization). We’re about to bend the rules, twist the words, and make text dance to our creative tune! 💃🕺

Think of this lecture as a masterclass in typographic acrobatics. We’ll explore how writing modes allow you to create stunning vertical text, explore unconventional layouts, and generally impress (and maybe slightly confuse) your users with your design wizardry.

So, what exactly are CSS Writing Modes?

Imagine you’re a calligrapher, but instead of ink and paper, you wield the power of CSS. Writing modes are your tools to control the direction and flow of text within a block-level element. They define how lines of text are laid out, and how blocks progress along the page.

Think of it like this:

Concept	Analogy
Writing Mode	The direction you hold your calligraphy pen
Text Direction	Whether you’re writing left-to-right or right-to-left
Block Flow	How you move your hand down the page

Essentially, writing modes give you the keys to the typographic kingdom. You can dictate how text is positioned, where it starts, and in what direction it flows. 😎

Why should you care?

"But wait," you might cry, "horizontal text is perfectly fine! Why bother with this weirdness?"

Good question! Here’s why you should embrace the non-horizontal:

• Unique Design: Stand out from the crowd! Vertical text can add a distinctive and sophisticated touch to your website.
• Localization: Essential for languages like Japanese, Chinese, and Korean, which commonly use vertical writing.
• Creative Layouts: Break the monotony! Experiment with layouts that defy convention and grab attention.
• Space Efficiency: Sometimes vertical text is simply the best way to fit content into a tight space, especially in sidebars or navigation menus.

Let’s Get Practical: The Core Properties

The foundation of writing modes lies in these two crucial CSS properties:

1. writing-mode: This property defines the block flow direction and the inline base direction. In simpler terms, it determines the direction in which lines of text stack and the direction in which characters are arranged within a line. Think of it as the overarching instruction for how the text should behave.

2. text-orientation: This property dictates how individual characters are oriented within the inline direction. It allows you to control whether characters are displayed upright, sideways, or rotated. It’s the fine-tuning knob for character alignment.

Let’s break down each of these properties in detail.

1. writing-mode: The Master Controller

The writing-mode property accepts several values, each with its own unique effect. Let’s explore the most common ones:

• horizontal-tb (Default): This is the standard, familiar writing mode. Text flows horizontally from left to right (or right to left, depending on the direction property), and lines stack vertically from top to bottom. tb stands for Top to Bottom. Think of it as the classic novel layout. 📖

  • direction: ltr; (left-to-right)
  • direction: rtl; (right-to-left)

• vertical-rl: This is where the magic begins! Text flows vertically from top to bottom, and lines stack horizontally from right to left. rl stands for Right to Left. Imagine flipping a book sideways and reading from right to left. 📚➡️

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

  This will turn your text into a vertical column, reading from top to bottom, with each column progressing from right to left.

• vertical-lr: Similar to vertical-rl, but lines stack horizontally from left to right. lr stands for Left to Right. Think of it as the opposite of vertical-rl. ⬅️📚

  .vertical-text {
    writing-mode: vertical-lr;
  }

  Now the vertical columns progress from left to right.

• sideways-rl: Characters are laid out horizontally, but the entire block is rotated 90 degrees clockwise. This can be useful for creating vertical labels or banners. 🔄

  • text-orientation: sideways; is implicitly applied.

• sideways-lr: Characters are laid out horizontally, but the entire block is rotated 90 degrees counter-clockwise. ↩️

  • text-orientation: sideways; is implicitly applied.

Example:

Let’s say we have the following HTML:

<div class="container">
  <p class="vertical-rl">This is some vertical text (Right to Left).</p>
  <p class="vertical-lr">This is some vertical text (Left to Right).</p>
  <p class="sideways-rl">This is some sideways text (Right to Left).</p>
  <p class="sideways-lr">This is some sideways text (Left to Right).</p>
</div>

And the following CSS:

.container {
  display: flex; /* Easier to visualize the effects */
  gap: 20px;
}

.vertical-rl {
  writing-mode: vertical-rl;
  border: 1px solid blue;
}

.vertical-lr {
  writing-mode: vertical-lr;
  border: 1px solid red;
}

.sideways-rl {
  writing-mode: sideways-rl;
  border: 1px solid green;
}

.sideways-lr {
  writing-mode: sideways-lr;
  border: 1px solid purple;
}

You’ll see four different blocks of text, each with a different orientation and flow. Experiment with these values to get a feel for how they work!

2. text-orientation: Character Control

The text-orientation property fine-tunes how individual characters are displayed within the writing mode. It’s especially important when dealing with vertical writing.

Here are the key values:

• mixed (Default): This is the most common and often the most desirable behavior for Latin characters in vertical writing. Characters that are naturally vertical (like most Latin letters) remain upright. Characters that are naturally horizontal (like ideographs) are rotated 90 degrees clockwise. This ensures that the text is readable while still maintaining a vertical flow.

• upright: All characters are forced to be upright, regardless of their natural orientation. This can be useful for displaying Latin text vertically without rotation, but it can look a bit… unusual. Imagine reading each letter sideways! 😵

• sideways: All characters are rotated 90 degrees clockwise. This is essentially the same as using sideways-rl or sideways-lr for the writing-mode.

• sideways-right: An alias for sideways.

• use-glyph-orientation: This value allows the rendering engine to use the glyph orientation information embedded within the font itself. This is rarely used.

Example:

Let’s modify our previous example:

<div class="container">
  <p class="vertical-mixed">This is some vertical text (Mixed).</p>
  <p class="vertical-upright">This is some vertical text (Upright).</p>
</div>

.container {
  display: flex;
  gap: 20px;
}

.vertical-mixed {
  writing-mode: vertical-rl;
  text-orientation: mixed; /* Default, but explicitly set for clarity */
  border: 1px solid blue;
}

.vertical-upright {
  writing-mode: vertical-rl;
  text-orientation: upright;
  border: 1px solid red;
}

Notice how the "mixed" text automatically rotates horizontal characters, while the "upright" text keeps everything vertical, even if it looks a bit strange.

Important Considerations and Caveats

• Browser Support: While writing modes are generally well-supported in modern browsers, it’s always a good idea to check compatibility tables on sites like Can I Use. Consider using vendor prefixes (e.g., -webkit-, -moz-) for older browsers. Although, this is becoming less necessary.

• Language Awareness: Be mindful of the language you’re using. Vertical writing is most common in East Asian languages, and the text-orientation property is crucial for ensuring proper rendering.

• Readability: Don’t sacrifice readability for aesthetics! Vertical text can be visually striking, but make sure it’s still easy for your users to read. Use appropriate font sizes and spacing.

• Layout Quirks: Vertical text can sometimes introduce unexpected layout challenges. You might need to adjust margins, padding, and other properties to achieve the desired result. Flexbox and Grid can be your best friends here!

• Logical Properties: In modern CSS, consider using logical properties instead of physical ones. For example, instead of margin-left, use margin-inline-start. This will ensure that your layout adapts correctly to different writing modes and text directions.

Advanced Techniques and Tips

• Combining Writing Modes with Flexbox and Grid: This is where the real power lies! Use flexbox or grid to create complex layouts with both horizontal and vertical text elements.

  <div class="grid-container">
    <div class="sidebar">
      <p class="vertical-text">Navigation</p>
      <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
      </ul>
    </div>
    <div class="content">
      <h1>Main Content</h1>
      <p>This is the main content area.</p>
    </div>
  </div>

  .grid-container {
    display: grid;
    grid-template-columns: 150px 1fr; /* Sidebar and content */
    gap: 20px;
  }
  
  .sidebar {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    background-color: #f0f0f0;
    padding: 10px;
  }
  
  .content {
    padding: 10px;
  }
  
  .sidebar ul {
    writing-mode: horizontal-tb; /* Reset for the list items */
    list-style: none;
    padding: 0;
  }
  
  .sidebar li a {
    display: block;
    padding: 5px;
    writing-mode: horizontal-tb;
  }

  In this example, we use a grid layout to create a sidebar with vertical text. Notice how we reset the writing-mode to horizontal-tb for the list items within the sidebar to make them readable.

• Animations and Transitions: Add some flair to your vertical text with CSS animations and transitions. Imagine a vertical menu sliding in from the side, or text rotating into place.

• Font Selection: Choose fonts that are well-suited for vertical writing. Some fonts are specifically designed for vertical layouts, and they often have adjusted kerning and spacing to improve readability.

• Accessibility: Ensure that your vertical text is accessible to users with disabilities. Use semantic HTML and provide alternative text descriptions for images or other visual elements.

• Experiment! Don’t be afraid to experiment with different writing modes and text orientations. The best way to learn is to try things out and see what works. You might stumble upon some unexpected and beautiful results!

Common Use Cases

• Sidebars and Navigation Menus: As shown in the previous example, vertical text is a great way to create visually interesting and space-efficient sidebars and navigation menus.

• Headings and Titles: A vertical heading can add a dramatic and sophisticated touch to a page.

• Labels and Annotations: Use vertical text to label diagrams, charts, or other visual elements.

• Japanese, Chinese, and Korean Websites: Essential for displaying text in these languages, which often use vertical writing.

• Creative Typography: Push the boundaries of typographic design and create unique and memorable experiences.

The Future of Writing Modes

CSS Writing Modes are a powerful tool for creating innovative and visually engaging layouts. As web design continues to evolve, we can expect to see even more creative and unexpected uses of writing modes. Embrace the challenge, experiment with different techniques, and let your imagination run wild!

Conclusion: Go Forth and Vertically!

You’ve now been equipped with the knowledge and the inspiration to conquer the world of CSS Writing Modes. Go forth, experiment, and create layouts that are both functional and visually stunning. Remember to prioritize readability and accessibility, and don’t be afraid to break the rules and try something new.

So, the next time you’re staring at a boring, horizontal line of text, remember this lecture and ask yourself: "Could this be vertical?" The answer, my friends, is often a resounding "YES!" 🚀

Happy coding, and may your text always flow in the most interesting direction! 😉