Search code examples
htmlcssasp.net-mvc-2localizationglobalization

Using a CSS File for site localization

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.

Solution

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