HowTo – Resolving Page Formatting Problems Due To Viewers Language Settings

Filed under: CSS,HTML,Web Design

alinkWhen you are designing sites that you know will be viewed by persons who have different language settings it is important to decide whether you will force a language or design different versions of your site to provide optimal viewing.

To set the language options you may place the following HTML in your Header Element.

<html dir="ltr" lang="en-US">

The Options available for the English Language include

English – lang=”en”
English US – lang=”en-US”
English Great Britain – lang=”en-GB”
English Cockney – lang- “en-cockney”
English Scouse – lang=”en-scouse”
English Australia – lang=”en-AU”
English Canada – lang=”en-CA”

You can also Override bidirectionality in your CSS File

html, body {direction:ltr}
/* begin bidirectionality */
bdo[dir=ltr] {direction:ltr; unicode-bidi:bidi-override}
bdo[dir=rtl] {direction:rtl; unicode-bidi:bidi-override}
*[dir=ltr] {direction:ltr; unicode-bidi:embed}
*[dir=rtl] {direction:rtl; unicode-bidi:embed}

If you are going to set bidirectionality in your CSS you must include the HTML tag

CSS Bidirectionality can be set based on individual elements based on their parent where the absence of the HTML Tag setting will not allow this

The more you work with foreign language preferences the better you will become at designing pages that viewers around the world can read easily.

This is not to say that you should limit your designs in ways that would compromise your content. Just that there are decisions to be made if you know your content is being viewed by people with different settings.