Checklist for Multilingual website development

I sometimes wish if i could have a checklist or to do list to follow before actually starting developing something new. Checklists are great as they, in certain situations, prove to be more helpful than full length articles due to their short and precise nature. The checklist I am going to propose in this post is solely for those who want to have some idea about multilingual websites and the core steps involved in developing them. By just skimming through the steps below, one can calculate the amount of time required to translate a website into a another language. This checklist is nothing but merely a set of suggestions and recommendations based upon my very recent experience that I had while translating a website from English to Arabic.
  • First and foremost, a seperate style sheet can be created for each language. I have created two in my project en-US-main.css and ar-SA-main.css. Using a separate style sheet while doing the translation guarantees that the existing design and layout will remain intact.

  • We should never embed any content or label text/values directly into html page like this:
    <p>embedded text.</p>
    <input id="lblFirstName" type="label">First Name</input>
    <input id="lblLastName" type="label">Last Name</input>

    By using the above approach, we take away the privilege that we get through resource files to switch culture specific content at runtime. It is a best practice to create language specific resource files like *.RESOURCE or *.RESX which help setting labels and messages on the fly. In the below code i am calling GetLabelTring() function which pulls labels values either from en-US.resouces file or ar-SA.resources based upon the selected culture.
    <p>GetLabelString("L1000") </p> {html side}
    lblFirstName.Text = GetLabelString("L1001") {ASP side}
    lblLastName.Text = GetLabelString("L1002") {ASP side}

  • The current culture can be saved into session variables which will help maintain the same language across all of the pages for a specific session.

  • The labels and messages can be cached if the frequency of their modification is low which will result in better performance and speed.

  • We can use HTML DIR attribute if the language we are targeting is written right to left such as Arabic and Hebrew. This attribute specifies the base direction (RTL, LTR) of text, or sections of text.

    HTML Markup

    Resulting Display

    We can also specify a single base direction for all of the content available on the website by using the DIR attribute with HTML tag.

  • For everything else on the page other than content can be controlled through style sheets. If our website is blessed with DIV-based layout, we can be rest assured that the style sheet attributes such as float, background-position and margin/padding etc. will take care of the direction (right-to-left / left-to-right) for most of the HTML elements.

  • That’s all from the HTML side. I would like to add a couple of bits here in regards insertion of multilingual text in the database table. The idea is to insert a separate row for every culture and do it for all of the content pages of the website. Of course, we need to enable the Unicode support on the table.








    My Website Home Page

    Welcome to my page



    Home Page


    الصفحة الرئيسية الموقع الخاص بي

    مرحباً بك في الصفحة الخاصة بي



    الصفحة الرئيسية (Home Page)

  • Last but not least, there are many free translation tools available on the internet that can be of great help for cross-checking the content between the languages. Two such great tools that I have extensively used are Bing Translator and Google Translate.


Post a Comment