UsableTypeTypography for the World Wide Web

style guide

Text Direction

The direction property informs the browser which direction text will be read in a document. The chances are you are reading this text from left to right (ltr). If you were reading it in Arabic or Hebrew, you would be reading from right to left (rtl).

This distinction is important in a number of cases:

  • Text in a block-level element.
  • Horizontal overflow from an elements box.
  • Position of final line in justified text.
  • Table Column Layouts.

p {direction:rtl;}

This text has been set with a direction of rtl. Notice the distinct differences in the way the text is layed out. It looks strange here as we are reading English, but this property is used for many other languages.

Notice in the above paragraph that the browser places the full stop to the left of the final line despite its being placed at the end in the code.

direction
Values: ltr | rtl | inherit
Initial Value: ltr
Applies to: all elements
Inherited: yes

Text direction can also be controlled by Unicode and the property unicode-bidi.

To learn more about Unicode and the unicode-bidi property, read the CSS2.1 specification.

unicode-bidi
Values: normal | embed | bidi-override | inherit
Initial Value: normal
Applies to: all elements
Inherited: no

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close