You must have noticed that in most of the languages, text flows from left to right, but in some languages like Arabic, Hebrew and Persian, it is written from right to left. This post tells you how to write text in different directions i.e. right-to-left or left-to-right.
For controlling the direction of text, CSS provides you with two properties direction and unicode-bidi which are used in combination with each other. Before looking at how these properties change the text direction, have a quick look at both the properties.
direction
This propery controls the direction of text flow within block-level elements. Block-level elements are the ones which always start from a new line and covers the full width available to them. div, p and form are some of its examples.
The direction property is normally used when you wish to change the text direction of an entire document. It also sets the direction of flow of table cells within table rows. It takes the following values.
ltr : This is the default value. Sets text flow from left to right.
rtl : Sets text flow from right to left.
initial : Sets the initial value.
inherit : Inherits the value from the parent element.
To change the direction of text of an element from right to left, simply give the following value to the element.
CSS
.element {
direction: rtl;
}
Look at the following example to see a change in the text direction.
See the Pen Changing text direction by Aakhya Singh (@aakhya) on CodePen.
As you can see, the text of the second div starts from the right margin towards the left margin. Also notice that the property did not affect the text direction of the span because it is an inline element.
To be able to change the direction of text of inline elements, direction property is used with unicode-bidi property.
unicode-bidi
This property is used to generate bidirectional text within a line, paragraph or text document. When a text document or a line of text contains both right-to-left as well as left-to-right text, then the user agent applies a complex algorithm which is defined by the Unicode standard that decides the direction of text. The unicode-bidi property overrides this Unicode algorithm and allows you to control the text embedding.
In simple words, it when used together with the direction property, decides the text direction in a document which contains bidirectional text (both right-to-left and left-to-right text). It can take the following values.
normal : This is the default value. Does not apply any additional level of embedding of text.
embed : This allows for the direction change of text for inline elements. The direction is decided by the direction property.
bidi-override : This is the same as embed for inline elements. It reorders the entire text within either block-level elements or inline elements according to the direction set by the direction property.
initial : Sets the initial value.
inherit : Inherits the value from parent element.
For the direction property to have any effect on the inline elements, the value of the unicode-bidi property must be embed or bidi-override. If it's getting you confused, then look at the following examples.
See the Pen unicode-bidi: embed by Aakhya Singh (@aakhya) on CodePen.
In the above example, unicode-bidi: embed is given to the inline element (span) in the third div along with the direction property. This changed the direction of the text from its right margin to its left margin (notice the position of ' . ').
Now let's see the effect of unicode-bidi: bidi-override on inline and block-level elements.
See the Pen unicode-bidi: bidi-override by Aakhya Singh (@aakhya) on CodePen.
The unicode-bidi property is intended to be used by DTD designers. Therefore, web designers and similar authors should only use it if they really need to do so.
Using HTML
It is better and hence advisable to use HTML and prevent using CSS for changing text direction. The reason being that it will work even if CSS fails to load.
dir attribute
It is used to change the direction of the flow of text by giving its value ltr or rtl.
HTML
<p dir="rtl">This is reverse text.</p>
Giving this attribute is equivalent to giving the following CSS values.
CSS
.element{
direction: rtl;
unicode-bidi: embed;
}
Look at the following example to see its effect on block-level and inline elements.
See the Pen dir attribute by Aakhya Singh (@aakhya) on CodePen.
bdo tag
The bdo tag when used with the dir attribute is used to override the current text direction. It can be used in place of the unicode-bidi property.
HTML
<bdo dir="rtl">This is reverse text.</bdo>
See the Pen PjwbZG by Aakhya Singh (@aakhya) on CodePen.
Browser Support
These properties are supported in all the major browsers, except IE. The direction property is supported by IE 5.5+ and the unicode-bidi property is supported by IE 8+.
