CSS3 Examples

CSS WRITING-MODE

Written by jon on 12:26 AM 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; } <div style=”writing-mode: tb-rl”>Content rendered vertically</div>

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.