The writing-mode CSS property units whether or not strains of textual content are laid out horizontally or vertically, and the course during which blocks and features progress.
.component {
writing-mode: vertical-rl;
}That is most helpful in languages equivalent to Chinese language, Japanese or Korean the place the textual content is usually set vertically. Within the English language, it’s extra probably that you simply’ll need to use this property for aesthetics causes, equivalent to aligning a heading in a block of textual content like this:
Syntax
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;- Preliminary: horizontal-tb
- Applies to: all parts besides desk row teams, desk column teams, desk rows, desk columns, ruby base containers, ruby annotation containers
- Inherited: sure
- Computed worth: as specified
- Animation kind: not animatable
Values
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
/* World values */
writing-mode: inherit;
writing-mode: preliminary;
writing-mode: revert;
writing-mode: revert-layer;
writing-mode: unset;Every worth combines two components. The primary describes whether or not textual content is specified by horizontal or vertical strains, whereas the second describes the course during which these strains and block-level content material progress. tb means top-to-bottom, rl means right-to-left, and lr means left-to-right.
horizontal-tb: That is the default worth. Textual content is specified by horizontal strains, with strains and blocks progressing from prime to backside.vertical-rl: Textual content is specified by vertical strains, with strains and blocks progressing from proper to left. Every new line is positioned to the left of the earlier one.vertical-lr: Textual content is specified by vertical strains, with strains and blocks progressing from left to proper. Every new line is positioned to the fitting of the earlier one.sideways-rl: Textual content is specified by vertical strains that progress from proper to left, however makes use of the typographic conventions of horizontal writing. Because of this, the glyphs are rotated sideways, going through towards the fitting.sideways-lr: Textual content is specified by vertical strains that progress from left to proper, however makes use of the typographic conventions of horizontal writing. Because of this, the glyphs are rotated sideways, going through towards the left.
Writing modes and CSS format
The writing-mode property doesn’t simply change the orientation of textual content. Extra basically, it establishes the block and inline instructions that CSS makes use of to put out content material.
The inline axis follows the course during which content material flows inside a line, whereas the block axis follows the course during which blocks and features stack. These axes will be horizontal or vertical relying on the writing mode.
Within the default horizontal-tb writing mode, the inline axis runs horizontally and the block axis runs vertically. In a vertical writing mode equivalent to vertical-rl, the inline axis runs vertically and the block axis runs horizontally.
Trendy CSS format is constructed round these logical axes. Flexbox, Grid, alignment, and logical properties describe relationships when it comes to block, inline, begin, and finish, quite than being completely tied to bodily instructions equivalent to prime, proper, backside, and left.
For this reason logical properties equivalent to inline-size and block-size are helpful. Reasonably than referring to a set bodily dimension like width and peak, they describe the scale of a component alongside its inline or block axis:
.component {
inline-size: 20rem;
block-size: 10rem;
}In a horizontal writing mode, inline-size corresponds to the horizontal dimension and block-size to the vertical dimension. In a vertical writing mode, these relationships are switched.
The identical precept applies to flow-relative properties equivalent to margin-inline-start and padding-block-end, which confer with logical instructions quite than fastened bodily sides of the display screen like left and backside.
In Flexbox, a container with flex-direction set to row lays out gadgets alongside the inline axis, whereas column lays them out alongside the block axis. Because of this, a row will be horizontal or vertical relying on the writing mode.
Grid additionally respects the writing mode when inserting and sizing gadgets. Its rows and columns should not completely tied to the bodily horizontal and vertical instructions.
Alignment properties equivalent to align-items and justify-items , amongst others, comply with the identical precept.
Understanding this mannequin is beneficial even when you by no means create a vertical format. When you begin pondering when it comes to block and inline axes, many fashionable CSS format options turn out to be simpler to grasp, plus your layouts turn out to be much less depending on a specific writing course or bodily display screen orientation.
Demo
Use the dropdowns to strive completely different languages, writing-mode values, and course. Watch how the textual content, the container, and the inline and block axis indicators change.
The language selector units the everyday values for every script, however you possibly can override them to experiment. Discover that writing-mode adjustments greater than the orientation of the textual content. It additionally adjustments how your complete container and its contents stream.
Browser Help
The writing-mode property is outlined within the CSS Writing Modes Stage 4 specification and is broadly obtainable throughout fashionable browsers.
