The writing-mode CSS property units whether or not strains of textual content are laid out horizontally or vertically, and the route by which blocks and contours progress.
.component {
writing-mode: vertical-rl;
}That is most helpful in languages comparable to Chinese language, Japanese or Korean the place the textual content is usually set vertically. Within the English language, it’s extra possible that you simply’ll need to use this property for aesthetics causes, comparable 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 sort: not animatable
Values
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: vertical-lr;
writing-mode: sideways-rl;
writing-mode: sideways-lr;
/* International 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 route by 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 proper 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 proper.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 route by which content material flows inside a line, whereas the block axis follows the route by which blocks and contours 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 comparable to vertical-rl, the inline axis runs vertically and the block axis runs horizontally.
Fashionable 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, relatively than being completely tied to bodily instructions comparable to prime, proper, backside, and left.
That is why logical properties comparable to inline-size and block-size are helpful. Fairly than referring to a hard and fast bodily dimension like width and top, they describe the dimensions 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 comparable to margin-inline-start and padding-block-end, which consult with logical instructions relatively than fastened bodily sides of the display like left and backside.
In Flexbox, a container with flex-direction set to row lays out objects 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 putting and sizing objects. Its rows and columns will not be completely tied to the bodily horizontal and vertical instructions.
Alignment properties comparable to align-items and justify-items , amongst others, comply with the identical precept.
Understanding this mannequin is beneficial even in the event you by no means create a vertical format. When you begin considering when it comes to block and inline axes, many fashionable CSS format options change into simpler to grasp, plus your layouts change into much less depending on a selected writing route or bodily display orientation.
Demo
Use the dropdowns to attempt completely different languages, writing-mode values, and route. Watch how the textual content, the container, and the inline and block axis indicators change.
The language selector units the standard values for every script, however you’ll be able to override them to experiment. Discover that writing-mode modifications greater than the orientation of the textual content. It additionally modifications how the complete container and its contents move.
Browser Assist
The writing-mode property is outlined within the CSS Writing Modes Stage 4 specification and is extensively accessible throughout fashionable browsers.
