The writing-mode CSS property units whether or not traces of textual content are laid out horizontally or vertically, and the course during which blocks and features progress.
.ingredient {
writing-mode: vertical-rl;
}That is most helpful in languages corresponding to Chinese language, Japanese or Korean the place the textual content is commonly set vertically. Within the English language, it’s extra probably that you simply’ll need to use this property for aesthetics causes, corresponding 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 components 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 traces, whereas the second describes the course during which these traces 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 traces, with traces and blocks progressing from high to backside.vertical-rl: Textual content is specified by vertical traces, with traces 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 traces, with traces and blocks progressing from left to proper. Every new line is positioned to the appropriate of the earlier one.sideways-rl: Textual content is specified by vertical traces that progress from proper to left, however makes use of the typographic conventions of horizontal writing. In consequence, the glyphs are rotated sideways, dealing with towards the appropriate.sideways-lr: Textual content is specified by vertical traces that progress from left to proper, however makes use of the typographic conventions of horizontal writing. In consequence, the glyphs are rotated sideways, dealing with 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 corresponding 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 by way of block, inline, begin, and finish, moderately than being completely tied to bodily instructions corresponding to high, proper, backside, and left.
This is the reason logical properties corresponding to inline-size and block-size are helpful. Slightly than referring to a hard and fast bodily dimension like width and peak, they describe the scale of a component alongside its inline or block axis:
.ingredient {
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 corresponding to margin-inline-start and padding-block-end, which consult with logical instructions moderately than fastened bodily sides of the display 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. In consequence, a row will be horizontal or vertical relying on the writing mode.
Grid additionally respects the writing mode when putting and sizing gadgets. Its rows and columns aren’t completely tied to the bodily horizontal and vertical instructions.
Alignment properties corresponding to align-items and justify-items , amongst others, observe the identical precept.
Understanding this mannequin is helpful even should you by no means create a vertical format. When you begin pondering by way of block and inline axes, many trendy CSS format options turn into simpler to grasp, plus your layouts turn into much less depending on a selected writing course or bodily display orientation.
Demo
Use the dropdowns to strive totally 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 standard 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 all the container and its contents circulate.
Browser Help
The writing-mode property is outlined within the CSS Writing Modes Degree 4 specification and is broadly out there throughout trendy browsers.
