Basics 2 : Setting Text direction

  Back   Home NEXT | Meta Tags 


How to create HTML pages containing text written in the Arabic (or other right-to-left) scripts.

The dir attribute definitions
dir = LTR | RTL
LTR: Left-to-right text.
RTL: Right-to-left text.

Setting document direction

How to mark up the document as a whole.

  1. Don't forget to declare the language of the document.
  2. Add dir="rtl" to the html tag any time the overall document direction is right-to-left.
  3. To avoid adding the dir attribute inside every block element in the document, you could add the attribute inside the body element.
  4. You must ensure that you add a dir attribute to the head element also, to cover its title element.
Specifying the language of content:

Changing block direction

How to mark up content

Use the dir attribute on a block element to change the directionality of content in that block, ie.
<p dir="ltr"> Text Text </p>
<table dir="ltr"> </table>

NOTE :

The effect of using the dir attribute on a table. The alignment of the table itself hasn't changed. It is still aligned right. To have the table aligned left, you need to use a div element. The markup looks like this:
<div dir="ltr">
<table>
Text
</table>
</div>

Very Important

Having established the directionality at the html element, you should not use the dir attribute on other elements unless you want to change the directionality for that element. For example:
<html dir="RTL">
...right-to-left text...
<P dir="ltr">...left-to-right text...</P>
<P>...right-to-left text again...</P>
</html>

Mixing text direction inline

The title is "<span dir="rtl" lang="ar" xml:lang="ar"> ... </span>" in Arabic.

Note carefully how the span tag falls inside the quote marks " " - these are part of the surrounding English text.

An example :

The title is " " in Arabic.