This property controls the intrinsic writing direction rendering for a block of content. The default is left-to-right, top-to-bottom common in western languages, but the alternate rendering mode is top-to-bottom, right-to-left which is a common rendering mode used in Asian writing systems. The half-width character rotation effect is not cumulative - it is always rotated with respect to the canvas.
| Example |
| div { writing-mode: tb-rl; } Content rendered vertically |
|
| Possible Values |
Value Description | lr-tb | Character glyphs flow one after another from the source content from left to right, starting from the top of the element's rendering box. When a new line is started, it starts below the previous line at the left-hand side of the element's rendering box. | | tb-rl | Character glyphs flow one after another from the source content from top to bottom, starting from the right side of the element's rendering box. When a new line is started, it starts to the left of the previous line at the top side of the element's rendering box. Full-width characters are rendered with their top on the same side as top of the rendering box, and half-width characters (select kana glyphs and western characters) are rendered rotated 90 degrees clockwise to the original rendering box's orientation. |
|
|
