Tim Mackey's Weblog

| |

Search

Blogroll

Friday, January 13, 2006

Localization: Setting text direction for a web page

Friday, January 13, 2006 4:28:16 PM (GMT Standard Time, UTC+00:00) ( Asp.Net )

This is the first time i have been asked to add localization support for a content management system. One of the supported languages is Arabic, which is usually written right-to-left. to achieve this, you could obviously change your CSS or markup with something like <p align="right"> but this is not the way to do it.

there is an attribute in the HTML tag that controls the direction of text (and controls) on the page, called 'dir', which can take values 'ltr' or 'rtl', corresponding to "left-to-right" and "right-to-left" respectively. The advantage of setting this property is that it instructs the browser to render all direction-related elements of the page accordingly. for example, in RTL mode, when you type in a text box, the cursor stays flush to the right and the characters spread across to the left as you type. similarly drop-down-menu's are rendered differently, as are bullet points, and the browser scrollbar. these changes are shown in the screenshot below:

In this content management system, i set the direction based on the user's language setting, stored in a cookie. to set the DIR attribute programatically, i suggest the following HTML tag in your Master/Template aspx page:

<html xmlns="http://www.w3.org/1999/xhtml" runat="server" id="htmlTag">

Then you can access it in the code behind, like so:

protected void Page_Load(object sender, EventArgs e)
{
    this.htmlTag.Attributes.Add("dir", Util.HtmlDir);
    ...

and then the method to determine the direction, based on the cookie. note that 'Language' in my code is an enumeration.

/// <summary>
/// Returns rtl or ltr, depending on the current language setting
/// </summary>
public static string HtmlDir
{
    get
    {
        Language lang;
        try
        {
            lang = (Language)Enum.Parse(typeof(Language), HttpContext.Current.Request.Cookies["Language"].Value.ToString());
        }
        catch
        {
            // cookie not present, default to english.
            lang = Language.English;
        }
        switch(lang)
        {
            case Language.Arabic:
                return "RTL";    // right to left
            default:
                return "LTR";    // left to right
        }
    }
}

public enum Language
{
    English,
    Arabic,
    ...
}

for more information on languages and their directions, and related browser issues, see this excellent article from W3C

Comments [2] | |

Wednesday, April 30, 2008 5:16:39 AM (GMT Daylight Time, UTC+01:00)

Hello,
Is it possible to change input language per textbox? I'm not asking about just direction, as you have done here.
thanks

awni

Wednesday, April 30, 2008 8:51:21 AM (GMT Daylight Time, UTC+01:00)

hi awni. i should clarify that it isn't anything to do with input language, it is simply the reading order (left-right) of the page. you can apply this css setting to any html element.
tim

tim

Name
E-mail
Home page

	Remember Me
Comment (HTML not allowed)
Enter the code shown (prevents robots):
Live Comment Preview

mostly.Net

Search

Categories

Archive

Blogroll