Understanding CSS3 Writing Modes

The CSS3 Writing Modes specification discusses support for international writing modes in CSS. The writing modes covered in this module include:

1.  Left-to-right : e.g. Latin and Indic

2.  Right-to-left: Hebrew and Arabic

3.  Bidirectional : mixed Latin and Arabic

4.  Vertical : Asian

The specification outlines a few properties to enable the support for writing modes.

direction

The property  determines the inline base direction or directionality. It also determines the ordering of table column layout, the direction of horizontal overflow and default alignment of text within a line.

The valid values include:

• ltr – left to right directionality
• rtl – right to left directionality

 

unicode-bidi

This property determined overriding the intrinsic directionality of text. The values are: Normal, embed, isolate, bidi-override, isolate-override, and plaintext .

 

writing-mode

This property specifies whether lines are laid horizontally or vertically. It also determines the direction in which the block progresses.

Valid values are:

• horizontal-tb :  Top-to-bottom block flow direction. (Writing mode will be horizontal)
• vertical-rl : Right-to-left block flow direction, (Writing mode will be vertical)
• vertical-lr : left-to-right block flow direction, (Writing mode will be vertical)

 

Microsoft has implemented this method as “ms-writing-mode” which supports the following values:

• lr-tb : content flows horizontally from left to right, top to bottom.
• rl-tb : content flows horizontally from right to left, top to bottom.
• Tb-rl: content flows vertically from top to boom, right to left.
• bt-rl: content flows vertically from bottom to top , right to left.
• tb-lr: content flows vertically from bottom to top , left to right
• bt-lr: content flows vertically from bottom to top , left to right.
• lr-bt : content flows horizontally from left to right , bottom to top,
• rl-bt:  content flows horizontally from right to left, bottom to top,

 

text-orientation

This property specifies the orientation of text within a line.

Valid values are: mixed, upright, sideways-right, sideways-left, sideways, and use-glyph-orientation.

 

Summary

In this article, we learned about the CSS3 specification on writing modes.  I hope you have found this information useful.

 

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508

 

References

http://www.w3.org/TR/css-writing-modes-3/

http://msdn.microsoft.com/en-us/library/ie/ms531187(v=vs.85).aspx