Writing Mode in CSS Language

Cascading Style Sheets (CSS) is a versatile language that allows web developers to control the presentation and layout of their web pag

es. One of the fundamental aspects of CSS is defining the writing mode, which determines the direction in which text and other elements flow on a web page. Understanding and using writing modes is crucial for creating websites that cater to different languages and cultures. In this post, we will delve into the concept of writing modes in CSS and provide practical examples to illustrate their usage.

What is Writing Mode?

Writing mode is a CSS property that defines the direction in which content flows within a web page. It is particularly important for languages that are written from right to left, such as Arabic or Hebrew, as well as for vertical scripts like traditional Chinese or Japanese. CSS provides several writing modes to handle different content orientations:

1. Horizontal-tb (Horizontal Text, Top to Bottom): This is the default writing mode for most languages and scripts. Text flows from left to right, top to bottom, as in English.
2. Vertical-rl (Vertical Text, Right to Left): In this mode, text flows vertically from right to left, commonly used for scripts like traditional Chinese and Japanese.
3. Vertical-lr (Vertical Text, Left to Right): Similar to Vertical-rl, this mode flows text vertically but from left to right.
4. Sideways-rl (Sideways Text, Right to Left): This mode rotates text 90 degrees clockwise, making it appear as if it flows from right to left.
5. Sideways-lr (Sideways Text, Left to Right): Similar to Sideways-rl, text is rotated 90 degrees counterclockwise, creating a left-to-right flow.

Practical Examples

Let’s explore some practical examples to illustrate how writing modes work in CSS.

• Horizontal Text

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

In this example, the text will flow horizontally from left to right, which is the default writing mode for most languages.

• Vertical Text (Right to Left)

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

This CSS rule will cause the text to flow vertically from right to left, suitable for languages like traditional Chinese.

• Vertical Text (Left to Right)

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

In this case, the text will flow vertically from left to right, which is commonly used in some Japanese scripts.

• Sideways Text (Right to Left)

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

With this writing mode, text is rotated 90 degrees clockwise, giving it a right-to-left flow, ideal for special design considerations.

• Sideways Text (Left to Right)

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

Similar to the previous example, this mode rotates text 90 degrees counterclockwise, creating a left-to-right flow for unique design requirements.