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.
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
This property determined overriding the intrinsic directionality of text. The values are: Normal, embed, isolate, bidi-override, isolate-override, and plaintext .
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,
This property specifies the orientation of text within a line.
Valid values are: mixed, upright, sideways-right, sideways-left, sideways, and use-glyph-orientation.
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 firstname.lastname@example.org . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508