CSS' writing-mode is an attribute used to control the orientation of text arrangement and is crucial in multilingual website typesetting. writing-mode has three main values: horizontal-tb (default, horizontal row from left to right), vertical-rl (vertical row from right to left, often used in traditional Chinese, Japanese, etc.), vertical-lr (vertical row from left to right, sometimes used in modern Chinese). It not only affects the direction of the text, but also affects the overall layout structure. The direction of block-level element can be set with the direction attribute, such as rtl is used in Arabic or Hebrew; text-orientation is used to control the character orientation in vertical mode, such as upright to display the characters in forward direction. In practical applications, for example, the Arabic interface uses direction: rtl and writing-mode: horizontal-tb, while the Chinese vertical row uses writing-mode: vertical-rl and text-orientation: upright. Common problems include mistyped tables and buttons. It is recommended to set vertical mode only for text containers; if the icons are not aligned with text, you can use flex or inline-block to adjust; the input box may have compatibility issues on the mobile side, so you need to test in advance. Overall, the rational use of writing-mode and related attributes can effectively support RTL and vertical languages, but it also needs to be paid attention to its impact on layout flow.

When dealing with multilingual websites, you may encounter problems with inconsistent layout orientation. Arabic and Hebrew are written from right to left, Chinese and Japanese are sometimes vertically arranged, while most languages ??such as English are arranged horizontally from left to right. At this time, the writing-mode of CSS comes in handy.

It is not only an attribute that controls the direction of the text, but also an important tool to affect the overall layout. Especially when doing localization adaptation, it is very important to understand its use.

What is writing-mode?

writing-mode controls the arrangement direction of text lines. You can understand it as "whether a line of characters is arranged horizontally or vertically."

• horizontal-tb : Default, arranged horizontally from left to right (top to bottom line order), suitable for most languages.
• vertical-rl : vertical row, written from top to bottom, each column is arranged from right to left, often used in traditional Chinese, Japanese, and Korean typesettings.
• vertical-lr : It is also a vertical row, but each column is lined from left to right. This is sometimes used in modern Chinese.

To give a simple example:
If you set a div writing-mode: vertical-rl , the text inside will become vertically written, and the first column is on the right.

How to use it with direction and text-orientation?

writing-mode is just the first step, and some languages ??also need to adjust the direction of the content and the orientation of the characters.

• direction : controls the direction of block-level elements, such as rtl (right-to-left) for Arabic or Hebrew.
• text-orientation : Controls the direction of characters in vertical mode, such as whether to rotate punctuation marks or Latin letters.

In practice, for example, you want to create an interface that supports Arabic:

 body {
  direction: rtl;
  writing-mode: horizontal-tb;
}

This allows the entire page to be displayed from right to left, while keeping the text horizontally arranged.

If it is a vertical document in Chinese:

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

This allows Chinese characters to be arranged vertically and each character is displayed directly (rather than reversed).

Frequently Asked Questions in Practical Applications

1. Tables and buttons are inconsistent in typography
   When you enable vertical mode, the columns of the table will change behavior and the rows will become columns, which may make the originally designed layout look weird. The solution is:

   • Avoid using vertical mode directly on complex structures;
   • Or set writing-mode for text containers separately, which will not affect the overall layout.

2. Icons are not aligned with text
   The icons inserted in vertical text may be abnormal in position, and it is recommended to use flex or inline-block to explicitly control the alignment.

3. Input box and editor compatibility issues
   Some browsers do not support vertical inputs very well, especially on mobile devices. If the user needs to enter vertical text, it is best to test the performance of mainstream browsers.

Written at the end

CSS' writing-mode is useful when working on international projects, especially when facing RTL and vertical languages. Although it is simple in itself, it can meet a variety of typesetting needs after combining direction, text-orientation, and even transform.

However, it should also be noted that these features will affect the layout flow and sometimes make the originally simple structure complicated. So before using it, first clarify your target language layout habits, and then decide whether to enable these properties.

Basically that's it.

The above is the detailed content of Understanding CSS writing modes for localization. For more information, please follow other related articles on the PHP Chinese website!