Skip to content Skip to sidebar Skip to footer
Home / Asp.net Mvc 2 / Css / Globalization / Html / Localization

Using A Css File For Site Localization

Post a Comment
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 t

Solution 1:

You can read about:

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) }

Solution 2:

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;
    }
    elseif ( navigator.browserLanguage ) {
        return navigator.browserLanguage;
    }
    elseif ( navigator.systemLanguage ) {
        return navigator.systemLanguage;
    }
    elseif ( navigator.userLanguage ) {
        return navigator.userLanguage;
    }
}

Solution 3:

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 caseMasterLanguagecase"PORTUGUESE"%>
        <stylemedia="screen"type="text/css">@import"/Includes/css/a_formatting.css";</style><stylemedia="screen"type="text/css">@import"/includes/langs/br/languageSpecific.css";</style><linktype="text/css"media="print"rel="stylesheet"href="/Includes/css/print.css" />
<%
case"SIMPCHINESE"
%>
        <stylemedia="screen"type="text/css">@import"/Includes/css/a_formatting_zh-cn.css";</style><stylemedia="screen"type="text/css">@import"/includes/langs/zh-cn/languageSpecific.css";</style><linktype="text/css"media="print"rel="stylesheet"href="/Includes/css/print_zh-cn.css" />
<%

I can post more snippets if this is helpful.

Post a Comment for "Using A Css File For Site Localization"