Direction - CSS Property

Syntax diagram of direction.

Description of the direction property.

Applied to an element of the bdo type, the direction property sets the writing direction for the text:

• From left to right: Latin languages.
• From right to left: Arabic or Hebrew languages.

Applied to a table tag, the direction property sets the display order of the cells in the row. In this case, the text direction inside the cells is not changed.

Note: it’s not recommended to use this property to manage text direction on an HTML document, because HTML already has a specific tag for that:
bdo dir="ltr", whose dir attribute allows you to change the text direction.
Indeed, CSS is meant for styling content. But here, it’s not just about formatting text—it’s about making it understandable or not. By using the direction property, if the style-sheet isn’t available, you don’t just lose the layout, but also the meaning of the content.

Values for direction.

• direction: ltr;

  Default value. Text is written from left to right (Latin languages).

  Text in English
  نص باللغة الفرنسية
• direction: rtl;

  The text is written from right to left (Arabic languages).

  Text in English
  نص باللغة الفرنسية
• direction: initial; (ltr) direction: inherit; direction: revert; direction: revert-layer; direction: revert-rule; direction: unset;

  These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, revert-rule, unset.

The bidirectional text - Tutorial.

The HTML bdo tag and the dir attribute.

Here is the syntax for the HTML bdo tag. It must include the dir attribute with one of the values rtl or ltr. These are the same values accepted by the direction property.

Which gives the following result: Text written from right to left

The bdo tag being an inline tag, it is possible to change the writing direction within the same line of text, as we see in our example above.

The dir attribute indicates the writing direction, and can take the following values:

• ltr: from left to right, like for Latin languages.
• rtl: from right to left, like in Arabic or Hebrew.

Note that the dir attribute or the direction property must still be applied to a bdo element because other HTML tags don’t trigger bidirectional text handling. On a paragraph, for example (p), the text is just right-aligned but isn’t actually written from right to left.

On a paragraph, it doesn't work
By inserting a bdo tag, it works

The CSS property unicode-bidi.

However, there is a way to use direction on any HTML element by associating it with the unicode-bidi property. The latter can indeed activate bidirectional text handling. We can see that it's actually simpler to manage this with the bdo tag.

On a paragraph p, by using both the direction and unicode-bidi properties, you can get it to work correctly.

Other CSS properties related to writing mode.

Being able to choose the writing direction quickly proved to be insufficient when it came to Asian, Mongolian, and a few other scripts.

Other CSS properties are needed: in particular the writing-mode property, which allows vertical writing, used in Asian languages (CJK). Also, there’s the text-orientation property, which sets the orientation of each character.

Refer to the page on the writing modes property for additional explanations about the meaning and writing direction depending on the language.

Mirror characters.

Some characters work in pairs. There are a lot of them: parentheses, braces, greater-than and less-than signs, many mathematical symbols, etc. Reversing the writing direction may require replacing some characters with their mirror character.

Example 1. The text: Departure >>> Arrival
Becomes lavirrA >>> erutpaD after changing the writing direction.
We can see that the carets, which initially pointed from the departure to the arrival, point the other way after the reversal, from the arrival back to the departure.

Example 2: parentheses, braces, or brackets.
The text CSS (Cascading Style Sheets)
Becomes )steehS elytS gnidacsaC( SSC
after changing the writing direction, the parentheses appear reversed.

Example 3. Mathematical expressions.
The problem is even more annoying in the case of a mathematical expression. Indeed, x > y becomes false if you reverse the writing direction because you get y > x.

To avoid this problem, the character set UTF includes the necessary information to allow certain characters to be replaced by their mirror character when the writing direction is changed. x > y then becomes y < x, which still matches the original expression (the greater-than sign was replaced by the less-than sign).
Following the same logic, parentheses, braces, or brackets are swapped so that the writing remains logical.

Animation of the direction property.

The property direction can't be animated.

Simulator.

The simulator applies the property direction to a bidirectional element (bdo tag) and to a table (table tag).

Browsers compatibility with direction.

The direction property is old: it's well supported by all browsers.

1

direction

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the direction property.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  This level 2 of the specification describes the mechanism of cascading styles in CSS. This language is used to format HTML or XML documents. It supports media-specific style sheets so that authors can adapt the presentation of their documents for visual browsers, auditory devices, printers, braille devices, portable devices, etc.

  Regarding direction Initial definition of the direction property in the CSS version 2 language specification.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Writing Modes Level 3

  This specification module takes up the definitions already present in the CSS 2.1 level, mainly about the direction and unicode-bidi properties, and adds many other properties like writing-mode, text-orientation, glyph-orientation-vertical, and so on.

  Regarding direction No change regarding the direction property.
  

  December 02, 2010

  Working Draft.

  

  March 20, 2014

  Candidate Recommendation.

  

  October 24, 2019

  Proposed for recommendation.

  

  December 10, 2019

  Recommendation .

• CSS Writing Modes Level 4

  This specification module doesn't bring any real new features. It reintroduces certain values like sideways-lr, sideways-rl, and others.

  Regarding direction No change regarding the direction property.
  

  December 07, 2017

  Working Draft.

  

  May 24, 2018

  Candidate Recommendation.

  

  

About non-Latin scripts.

Support for international writing modes, including vertical scripts (CJK), and right-to-left writing (Arabic, for example) is described in the specification CSS Writing Modes. The property direction is part of this module, along with the following:

Properties:

Direction

Sets the writing direction (left-to-right or right-to-left).

✗

glyph-orientation-vertical

Defines the orientation of the characters in the case of vertical writing.

text-combine-upright

Defines the orientation of groups of characters, in the case of vertical writing.

text-orientation

Defines the orientation of the characters when writing in the vertical direction.

unicode-bidi

Management of Unicode's bidirectional writing capabilities.

writing-mode

Defines the direction of writing (horizontal or vertical).