CSS Writing Mode Practice Questions with Solutions

By /

Introduction

CSS writing-mode controls whether text and other content flows horizontally or vertically. It is useful when creating layouts for different writing systems, vertical headings, side labels, magazines, multilingual websites, and creative designs. The most common values are horizontal-tb, vertical-rl, and vertical-lr. In this chapter, you’ll practice the writing-mode property through simple solved questions and learn how to control text direction and flow also CSS Writing Mode practice questions with solutions help to build concepts.

Question 1: Use Horizontal Writing Mode

Problem Statement

Write CSS to explicitly make text flow from left to right and top to bottom.

CSS Code

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

Output

The text flows normally in a horizontal direction.

Explanation

  • horizontal-tb means horizontal writing mode.
  • Content flows from top to bottom.
  • This is the normal writing mode used by many Latin-based layouts.

Question 2: Create a Vertical Right-to-Left Layout

Problem Statement

Write CSS to make text flow vertically with new lines progressing toward the left.

CSS Code

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

Output

The text flows vertically, with successive lines progressing from right toward left.

Explanation

  • vertical-rl creates a vertical writing mode.
  • The inline content flows vertically.
  • New vertical lines are placed toward the left.

Question 3: Create a Vertical Left-to-Right Layout

Problem Statement

Write CSS to make text flow vertically with new lines progressing toward the right.

CSS Code

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

Output

The text flows vertically, with successive lines progressing from left toward right.

Explanation

  • vertical-lr creates vertical writing mode.
  • The inline direction is vertical.
  • New vertical lines are placed toward the right.

Question 4: Create a Vertical Heading

Problem Statement

Create a vertical heading using writing-mode.

CSS

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

Output

The heading is displayed vertically.

Explanation

writing-mode: vertical-rl changes the normal horizontal flow into a vertical flow.

This technique is useful for:

  • Side headings
  • Magazine layouts
  • Sidebar labels
  • Creative website designs

Question 5: Create a Vertical Sidebar Label

Problem Statement

Create a sidebar label that displays vertically.

CSS

.sidebar-label {
    writing-mode: vertical-rl;
    padding: 10px;
}

Output

The text appears vertically along the sidebar.

Explanation

  • writing-mode: vertical-rl changes the text flow direction.
  • padding provides spacing around the label.
  • This is useful for vertical navigation labels and decorative side content.

Question 6: Combine writing-mode with text-orientation

Problem Statement

Write CSS to display text vertically while keeping individual characters upright.

CSS Code

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

Output

The text flows vertically, with individual characters displayed upright.

Explanation

  • writing-mode: vertical-rl creates vertical text flow.
  • text-orientation: upright keeps characters upright where the writing system supports that behavior.
  • These properties can be useful for vertical labels and multilingual layouts.

Question 7: Create a Vertical Navigation Label

Problem Statement

Create a vertical navigation label that reads MENU.

CSS

.menu-label {
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 10px;
}

Output

The word MENU is displayed vertically with the characters remaining upright.

Explanation

  • writing-mode changes the flow direction.
  • text-orientation controls how characters are oriented.
  • padding adds space around the label.

Question 8: Use sideways-rl

Problem Statement

Write CSS to display text vertically with the text rotated sideways toward the right.

CSS Code

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

Output

The text is displayed vertically with sideways character orientation.

Explanation

  • sideways-rl is a writing mode that flows vertically while displaying text sideways.
  • It can be useful for decorative labels and specialized layouts.
  • Browser support should be considered when using less common writing-mode values.

Question 9: Create a Vertical Product Card Title

Problem Statement

Create a product title that appears vertically on the side of a product card.

CSS

.product-card {
    width: 250px;
    height: 180px;
}

.product-title {
    writing-mode: vertical-rl;
    text-orientation: upright;
}

Output

The product title appears vertically along the card.

Explanation

The combination of writing-mode and text-orientation provides control over the vertical presentation of the title.

Question 10: Build a Practical Vertical Label

Problem Statement

Create a vertical SALE label that can be placed beside a product or promotional section.

CSS

.sale-label {
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 12px;
    font-weight: bold;
}

Output

The word SALE is displayed vertically with upright characters.

Explanation

  • writing-mode: vertical-rl creates vertical text flow.
  • text-orientation: upright keeps the characters upright.
  • padding creates internal spacing.
  • font-weight: bold makes the label more prominent.

Key Takeaways

  • writing-mode controls the flow direction of text and inline content.
  • horizontal-tb creates the normal horizontal writing flow.
  • vertical-rl creates vertical flow with lines progressing toward the left.
  • vertical-lr creates vertical flow with lines progressing toward the right.
  • text-orientation controls the orientation of text inside vertical writing modes.
  • upright can keep characters upright.
  • sideways-rl provides a sideways vertical writing mode.
  • Writing modes are useful for side labels, navigation, headings, product cards, and multilingual layouts.
  • Writing-mode properties can be combined with padding, positioning, Flexbox, and Grid.
  • Test vertical layouts carefully across browsers and writing systems.

Frequently Asked Questions (FAQs)

1. What is writing-mode in CSS?

writing-mode controls whether content flows horizontally or vertically.

Example:

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

2. What is the default writing mode?

The default value is:

writing-mode: horizontal-tb;

This creates the normal horizontal flow used by many common web layouts.

3. What does vertical-rl mean?

vertical-rl creates a vertical writing mode where successive vertical lines progress toward the left.

4. What does vertical-lr mean?

vertical-lr creates a vertical writing mode where successive vertical lines progress toward the right.

5. What does text-orientation do?

text-orientation controls the orientation of text within vertical writing modes.

Example:

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

6. Can writing mode be used for website headings?

Yes. Vertical headings are a common creative use of CSS writing modes.

h2 {
    writing-mode: vertical-rl;
}

7. Is writing-mode useful for multilingual websites?

Yes. It is particularly useful when building layouts that need to accommodate different writing systems and text-flow directions.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top