Changing Text Direction with CSS writing-mode Property
Using CSS writing-mode for vertical and horizontal text layouts.
1What is CSS writing-mode?
The CSS writing-mode property sets whether text lines are laid out horizontally or vertically and the direction of block progression. It is particularly useful for languages like Chinese, Japanese, or Korean that often use vertical text. In horizontal languages like English, it is mostly used for aesthetic purposes.
2Syntax and Values
The writing-mode property can take values like horizontal-tb, vertical-rl, vertical-lr, sideways-rl, and sideways-lr. The default value is horizontal-tb. These values determine the text direction and block progression. For example, vertical-rl aligns text vertically from right to left.
3Block and Inline Axes
writing-mode not only changes text orientation but also defines the block and inline axes used by CSS for layout. In horizontal mode, the inline axis is horizontal, and the block axis is vertical. In vertical mode, these axes are reversed. This is fundamental to modern CSS layout.
4Compatibility with Flexbox and Grid
Modern CSS layout tools like Flexbox and Grid work according to the block and inline axes defined by writing-mode. For example, in Flexbox, the row direction follows the inline axis, while the column direction follows the block axis. This makes layouts independent of physical directions.
5Logical Properties
With writing-mode, logical properties like inline-size and block-size can be used. These properties specify dimensions along the inline and block axes instead of width and height. For example, in vertical mode, inline-size represents the vertical dimension, and block-size represents the horizontal dimension.
6Why It Matters
The writing-mode property is crucial for multilingual applications and those with different text directions. It enhances user experience by providing text direction flexibility. Understanding block and inline axes is also key to mastering modern CSS layout techniques.
Original article: CSS-Tricks — CSS writing-mode Özelliği ile Metin Yönünü Değiştirme