In certain languages, the characters are written from right to left, and in others they are written from left to right. Then, in some languages, such as Arabic or Hebrew, text may appear with mixed directionality. This is also true if a Web page has multiple languages on them.
How Web Browsers Handle Language
Most Web browsers (or the operating system they run on) have a default language already set. So, for example, if you live in the United States, most likely your computer and Web browser are set to U.S. English. If you live in France, they are set to French.
Most Web pages are written without any language information. So, the user-agent or Web browser reading the page has to make an interpretation. And they make that interpretation based on the language they are pre-set to. So, a browser on a U.S. English computer assumes that all unlabeled pages are written in U.S. English. Directionality is determined by the browser.
If you have written a Web page with the language specified, the directionality of the text is pre-determined by that language. Even if the browser is set to a different language.
Set the Language Direction of Blocks with CSS
If you're writing a Web page in a language other than English, you should indicate the language in your HTML.
But once you've set the language, if it's in Hebrew or Arabic, there might be sections that should display right-to-left and others left-to-right. To change the direction on these sections, you need to use two CSS properties:
The direction property makes sense - you tell the user-agent:
direction: rtl;
For languages written right-to-left. And:
direction: ltr;
For languages written left-to-right.
But what you'll find is that even when you set the direction, user-agents don't always change the direction of your text. This is because Unicode has very strict rules for changing the direction of text. If the browser knows that the text is in English that means it should be written left-to-right. Changing the direction would make the text unreadable, so Unicode forbids it.
That's where the unicode-bidi property come in handy. There are three options for unicode-bidi:
- normal - the default. Act as the browser normally would with direction changes.
unicode-bidi: normal;
- embed - allow changes to direction at a block level. In other words, entire paragraphs can have a different direction than the entire page, but not single words in the paragraph.
unicode-bidi: embed;
- bidi-override - overrides the default bi-directional algorithm to allow you to change the direction at an in-line level. In other words, a paragraph could start out written left-to-right, change to right-to-left, and then change back to left-to-right.
unicode-bidi: bidi-override;
For best results, you should use both style properties if you need to change the direction of text on your Web page. For example, to change the direction of a paragraph you would write:
<p style="direction: rtl; unicode-bidi: embed;">
This is a paragraph written right-to-left.
</p>
And to change the direction of words within a paragraph you would write:
<p>
This paragraph is written left-to-right except for <span style="direction: rtl; unicode-bidi: bidi-override;">these words</span> which were written right-to-left.
</p>
Be sure to test the "embed" option, as you might get strange results. If it doesn't work as you expect, switch to "bidi-override".
