Understanding CSS3 Writing Modes

By Vipul Patel


Building the Right Environment to Support AI, Machine Learning and Deep Learning

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 vipul.patel@hotmail.com . You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508






Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

Thanks for your registration, follow us on our social networks to keep up-to-date