The writing-mode CSS property controls text flow direction and layout, supporting horizontal or vertical text for languages and design needs. It affects how inline and block elements behave, with values like horizontal-tb, vertical-rl, and vertical-lr. Use it for internationalization, creative layouts, and accessibility. Apply it directly to elements, but be mindful of alignment, layout shifts, and browser support. Common pitfalls include unexpected sizing, mixed-direction issues, and font rendering differences. Test thoroughly and adjust dimensions as needed.

The writing-mode CSS property determines how text flows within a layout. It’s not just about left-to-right or right-to-left — it also controls whether lines of text are laid out horizontally or vertically. This becomes especially important when dealing with languages like Japanese or Chinese, where vertical writing is common, or for specific design layouts on the web.

What Does writing-mode Do?

At its core, writing-mode changes the direction in which text and block elements flow. The most common values are:

• horizontal-tb: Default in most browsers. Text flows horizontally from left to right, and blocks stack top to bottom.
• vertical-rl: Text flows vertically, and characters are placed from right to left (common in traditional East Asian writing systems).
• vertical-lr: Text flows vertically, but characters go from left to right.

This affects not only how letters appear but also how inline and block elements behave. For example, with vertical-rl, the width of an element becomes the height in vertical text layout.

When Should You Use writing-mode?

You might reach for writing-mode in these scenarios:

• Internationalization: Supporting languages that use vertical scripts, such as Japanese or Mongolian.
• Creative Layouts: Designing sidebars, headers, or buttons with vertical text for visual interest.
• Accessibility & Readability: Ensuring correct reading order and orientation for multilingual content.

For instance, if you're building a bilingual website that includes both English and Japanese, using the appropriate writing-mode ensures that Japanese text appears naturally in vertical columns without extra hacks.

How to Apply writing-mode

Using writing-mode is straightforward — just apply it to any HTML element:

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

When applied to a paragraph or span, this will rotate the text so it reads from top to bottom, with each character stacked vertically. But there are a few things to keep in mind:

• Text alignment may need adjustment. Vertical writing can affect how text-align works.
• Flexbox and Grid behavior changes slightly — the main axis shifts based on the writing mode.
• Browser support is solid across modern browsers, but older versions of IE had limited support.

Here's a quick tip: If you want rotated text but don't want to change the entire layout, consider combining writing-mode with transform: rotate() to fine-tune the appearance.

Common Pitfalls

Even though writing-mode is powerful, some issues pop up often:

• Unexpected layout shifts: Changing the writing mode can flip how inline and block elements are sized.
• Mixed-direction content: Using different writing modes in the same layout can confuse screen readers or cause misalignment.
• Font rendering differences: Some fonts render differently in vertical mode — test thoroughly.

If you're seeing text squished or misaligned after applying writing-mode, double-check your element dimensions and parent containers. Sometimes setting explicit widths or heights helps stabilize the layout.

That’s basically what you need to know to start using writing-mode. It’s not complicated, but it does require thinking carefully about layout structure and content direction.

The above is the detailed content of Explain the `writing-mode` property. For more information, please follow other related articles on the PHP Chinese website!