In the CSS, as well as in the HTML, the text direction may be switched from left-to-right to right-to-left. That is achieved with the properties direction and unicode-bidi (bidi is shorter version for bidirectionality). These properties are often used to address text or part of text that is composed in languages written in right-to-left direction, such as Arabic or Hebrew.

The properties direction and unicode-bidi allow the specification how the elements and their attributes will be mapped to the Unicode algorithm.

As direction of the text depends more on the document's structure then styling, these properties are mostly used by designers of DTDs (Document Type Descriptions); the direction itself gets defined within the HTML code instead.

Direction property

The direction property contains following information:

  1. value: ltr, rtl or inherit;
  2. initial: ltr;
  3. applies to: all elements;
  4. inherited: yes;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

The property specifies the base direction of blocks. It also specifies the direction of the table column layout, the direction of horizontal overflow, and the position of an incomplete last line in a block when text-align is set to justify. To use this property in inline elements, the unicode-bidi must be set to embed or override.

The values ltr and rtl refer to "left-to-right" and "right-to-left" direction respectively.

Unicode-bidi property

The unicode-bidi property contains following information:

  1. value: normal, embed, bidi-override or inherit;
  2. initial: normal;
  3. applies to: all elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

The value normal doesn't open an additional level of embedding with the respect to the bidirectional algorithm. The value embed opens an additional level of embedding, if the element is inline. The direction of embedding level is defined with the direction property. The value bidi-override creates an override for inline elements while for the block elements it creates an override for inline-level descendants with the meaning that inside the element, reordering is strictly in sequence according to the direction property.

Considering that the Unicode algorithm has a limit of 61 levels of embedding, the best way is to set it normal unless needed otherwise. For elements that are intended to be displayed as blocks, however, the value embed may be a better choice as it will keep the element together if the display gets changed to inline.

Example

CSS text directions properties examples:

 

›› go to examples ››