CSS WRITING-MODE
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. |
any browser support yet?
Internet Explorer, since version 7.0.
It supports other values, too:
http://blogs.msdn.com/ie/archive/2009/05/29/the-css-corner-writing-mode.aspx
I think Microsoft’s support to writing-mode should be adopted, and extended too.
Both Webkit and Opera browsers support this too, firefox is the only one that doesn’t – it would be very nice to use in combination with @lang selector
Would you provide information about the 2 browser support writing-mode? Can’t find it.