Sourcefabric Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Template library

Text direction

If you are creating a website that caters to an audience who don't have a left to right (ltr) direction written language such as Hebrew or Arabic you will need to specify the text direction in your markup.

Ever since HTML4 there has been support for non-latin languages in the form of the dir attribute.

A well formed use of the attribute is as follows:

<body dir="ltr">

for Arabic and Hebrew you would use the following instead:

<body dir="rtl">

Things get a little more complicated if you're building a site with support for both. There are a number of ways to approach this problem, one way is with the CSS text-direction property but this can prove to be more complicated than simply setting the direction in the template. This approach is also more accessible as a screen reader will know the language direction if you have already set the lang attribute.

You can set the direction automatically on detection of the non-latin languages as follows:

<body dir="{{ strip }}
{{ if $gimme->language->code == "ar" || $gimme->language->code == "he" }}
rtl
{{ else }}
ltr
{{ /if }}
{{ /strip }}" lang="{{ $gimme->language->code }}">

Bear in mind that you may well have to mirror your design to accomodate the reading habits of your right to left audience.

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.