writing-mode is an attribute in CSS that controls the writing direction of text. Common values ??include horizontal-tb (default), vertical-rl (vertical from right to left) and vertical-lr (vertical from left to right); its common uses include vertical text that supports Japanese and Korean languages, vertical navigation bar layout, PDF reader interface adaptation, etc.; text-orientation is used to control the direction of a single character in vertical mode. Common values ??include mixed (default, Latin characters remain horizontal), upright (all characters are displayed vertically), sideways (characters rotate 90 degrees clockwise); when processing RTL languages ??such as Arabic, direction: rtl and unicode-bidi: bidi-override To unify text orientation and ensure layout consistency; when using these attributes, you need to pay attention to their impact on element size, layout logic and overall style to improve multilingual compatibility and professionalism of web pages.

CSS writing modes and text orientation control are often overlooked but very critical parts of web page layout. Especially when dealing with multilingual websites or scenarios where vertical text is required, mastering these features makes your page more flexible and professional.

What is writing-mode?

writing-mode property determines how the text block flows on the page. By default, most browsers use left-to-right, top-to-botb (i.e. horizontal-tb ), which is suitable for English, Chinese and other languages.

But if you need to deal with languages ??like Japanese, Korean, or Mongolian that have traditionally written vertically, you can use:

 writing-mode: vertical-rl; /* Row vertically from right to left*/

or

 writing-mode: vertical-lr; /* vertically from left to right*/

After this setting, the text in the entire element will automatically become vertical, and the layout will be adjusted accordingly. For example, the width and height of a div will be recalculated based on the new writing direction.

Common uses:

• Vertical texts in Japanese, Korean, and traditional Chinese websites
• Change the horizontal navigation bar to vertical arrangement, eliminating the flex or grid settings
• Adapt content in different languages ??when creating PDF reader interfaces

text-orientation controls the orientation of a single character

When using vertical-rl or vertical-lr , some characters remain horizontally displayed by default, such as Latin letters and numbers. At this time, you can use text-orientation to control their orientation.

Common values ??include:

• mixed : default value, Latin characters are kept horizontal, Chinese characters and other ideograms rotate to vertical
• upright : All characters are displayed vertically (suitable for full-width symbols and Japanese Kanna)
• sideways : The overall character rotates 90 degrees clockwise, suitable for title display

For example, if you want a text that is mixed with English and Chinese to look more neat when vertically arranged, you can write it like this:

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

In this way, whether it is English letters or Chinese characters, they will be presented in a unified vertical direction.

Use direction and unicode-bidi together

Although it does not fall into the direct category of writing modes, it is often necessary to use direction and unicode-bidi in conjunction with RTL (right to left) languages ??(such as Arabic and Hebrew).

• direction: rtl; allows text within the entire element to be displayed from right to left
• unicode-bidi: bidi-override; Force overwrite the browser's default bidirectional algorithm to ensure the consistent direction

For example:

 .rtl-content {
  direction: rtl;
  unicode-bidi: bidi-override;
}

This combination is especially useful in international websites, especially when users dynamically change the direction of text when switching languages.

It should be noted that RTL layout is not only a change in text direction, but also affects style logic such as padding, margin, flex arrangement, etc. It is recommended to manage it in combination with CSS tool classes or BEM naming specifications.

Basically that's it. Writing mode and text orientation may seem simple, but it is easy to encounter compatibility or misalignment problems in practical applications. Using these attributes reasonably can make your web page more adaptable and international.

The above is the detailed content of Understanding CSS Writing Modes and text orientation. For more information, please follow other related articles on the PHP Chinese website!