Using a CSS File for site localization

Question

I'm creating a website with ASP.net MVC 2.0 which uses two different languages (English and Persian). I want to have two different layouts for these languages, English has a left to right and Persian has a right to left layout.

What came to my mind was, if I could have two different css files, like when you do it with string or image localization will do the work for the site, the problem is I need to know how to do this!

Any other suggestions on how to perform this would be helpful.

Answer 1

Not sure if this is what you ar elooking for, but I did this a few years back in VBScript. Not ideal, but it works for me:

Figure out the language:

<%
Dim sLanguage
sLanguage = Request.QueryString("lang")

Dim userLocale
userLocale=Request.ServerVariables("HTTP_ACCEPT_LANGUAGE")

Dim sDomain
sDomain = Request.ServerVariables("HTTP_HOST")

Dim languages
languages = Split(userLocale, ",", -1)


...

Set the style sheet...

<% select case MasterLanguage
    case "PORTUGUESE"%>
        <style media="screen" type="text/css">@import "/Includes/css/a_formatting.css";</style>
        <style media="screen" type="text/css">@import "/includes/langs/br/languageSpecific.css";</style>
        <link type="text/css" media="print" rel="stylesheet" href="/Includes/css/print.css" />
<%
case "SIMPCHINESE"
%>
        <style media="screen" type="text/css">@import "/Includes/css/a_formatting_zh-cn.css";</style>
        <style media="screen" type="text/css">@import "/includes/langs/zh-cn/languageSpecific.css";</style>
        <link type="text/css" media="print" rel="stylesheet" href="/Includes/css/print_zh-cn.css" />
<%

I can post more snippets if this is helpful.

Answer 2

You can read about:

• (W3C) Internationalization Best Practices: Specifying Language in XHTML & HTML Content,
• Creating HTML Pages in Arabic, Hebrew and Other Right-to-left Scripts,
• Internationalization and localization (Wikipedia).

In your pages:

• every image with text should be translated (image and alt); every image with directionality should be reversed (ex: an arrow)
• try to avoid class naming like class="left" if you don't want future headaches. Top, bottom, before or after are OK but not left/right (edit: start and end are now used in CSS3 to avoid this exact problem of ltr and rtl. May be better than *-before and *-after already used for pseudos with colons).
• you'll have to check each CSS instruction about text-align, background-position, float, clear and obviously left and right with position: absolute/relative;. New CSS3 instructions are to review too (Animations, etc).
• different fonts need different font sizes (though this problem concerns asiatic fonts mainly)
• as for any other supported language, many bits of text in templates should be translated.

As noted in the links above, the HTML attribute dir="rtl" is used. You'll also need a class (on body or some containing div to act like a giant switch for your design needs. Like

.en .yourclass { background: url(images/en/bg.jpg) } 
.ar .yourclass { background: url(images/ar/bg.jpg) }

The attribute selector does the same, since IE8 included.

:lang(ar) .yourclass { background: url(images/ar/bg.jpg) }
or
[lang|="ar"] .yourclass { background: url(images/ar/bg.jpg) }

Answer 3

This is the code you can use to get the Locale at the client side. Once you have the locale defined, you can dynamically include a stylesheet in the header.

if ( navigator ) {
    if ( navigator.language ) {
        return navigator.language;
    }
    else if ( navigator.browserLanguage ) {
        return navigator.browserLanguage;
    }
    else if ( navigator.systemLanguage ) {
        return navigator.systemLanguage;
    }
    else if ( navigator.userLanguage ) {
        return navigator.userLanguage;
    }
}