Sep 13, 2011 114 reads by Navneet Kaushal

Giving your web site a globalized look, by making it accessible (or readable) to a multilingual readership, is always a thrilling idea.

Fine. But how to do it successfully? How can you be so sure that all the technical issues will be taken care of appropriately, so that the appeal of the text and other content does not get marred by any technical problem, which is very much likely to take place?

Well, there is nothing to be worried about it. A good way to learn the trick is to study the steps followed by the Google Webmaster Team while building a site localized into various languages. The steps have been proved to be effective and successful, and will be worth following when you are contemplating such a site.

So what are the steps? Well, they are as follows –

Having a simple HTML code

While working on any such site, Google always emphasizes on having the same HTML code for all languages. Why? Because then it is easily manageable, as you do not need to fiddle with the HTML code separately to address the issues related to different languages. And yes, there is another key benefit. Having a clean page code facilitates the parsing out of the translatable content strings from the HTML document.

Designing forms that support easy readability

Another approach that you will always find Google Webmaster Team to be adhering to – while working on a multilingual site – is designing of forms with labels above fields. If you are curious that why it is so, then this is the answer. Actually the idea behind it is to ensure easy readability and styling, eventually resulting into a successful translation across concerned languages.

Google also believes that it is not a smart practice to stick to fixed height columns. You may not appreciate this view, as you might feel that it will give a neat and clean look to your layout with box backgrounds of same height. Fine. But there will be chances that when your text gets translated, it will overrun only those areas that were tall enough to contain the English content. A key thing that can be kept in mind in this context is whether the UI elements being planned to be used in the design will work on the occasion of more-or-less texts (e.g. vertical or horizontal tabs).

Please remember that the success of source editing for bidirectional HTML will depend highly on the editor concerned. Many editors are not compatible with the Unicode bidirectional algorithm, and that may affect the way the mark up is displayed. Google has identified some editors to be effective in bidirectional editing, which include Coda, Dreamweaver, IntelliJ IDEA and JeditX.

On the occasion of designing for RTL languages, the most of the support that you need can be built into the core CSS, while utilizing the directional quality of the html element for backwards compatibility, along with a class on the body element. As usual, it is a better idea to maintain a single core stylesheet for all styles, as it offers a simpler maintainability.

There are certain styling issues to to be addressed –

  • Elements floating right need to be floated left and vice versa
  • In case there is extra padding or margin widths on one side of the element, then it should be overridden and switched
  • All text align attributes are to be reversed

Google Web Services team adheres to the following approach, which entails using of a class on the body tag as that is in sync with older browsers –


<body class="rtl">
<h1><a href=""><img alt="Google" src="" /></a> Heading</h1>

Left-to-right (default) styling:

h1 {
  height: 55px;
  line-height: 2.05;
  margin: 0 0 25px;
  overflow: hidden;

h1 img {
  float: left;
  margin: 0 43px 0 0;
  position: relative;

Right-to-left styling:

body.rtl {
  direction: rtl;

body.rtl h1 img {
  float: right;
  margin: 0 0 0 43px;

It may be remembered that the content meant for right-to-left language pages is usually bidirectional and not perfectly RTL. It is explained by the fact that some strings may require to retain their LTR direction. This issue needs to be addressed by wrapping the embedded text strings with an inline element. And while doing this, it is necessary to use an attribute to set the direction. The example below might help to understand the issue better –

<h2>‫עוד ב- <span dir="ltr">Google</span>‬</h2>

On occasions of not having an HTML container to set the directional attribute right, then this issue can be solved by setting direction where &#x202B; and &#x202C;‬ are Unicode control characters for right-to-left embedding:

<title>&#x202B;‫הפוך את Google לדף הבית שלך‬&#x202B;</title>

How to overcome your unfamiliarity with non-Latin character sets

In case you are not familiar with non-Latin character sets, then you find your editor and browser not to be displaying content in a satisfactory manner.

In this case you have to make sure about it that your editor and browser encodings are set to UTF-8 (recommended). You will also have to equip your HTML template with an element and the html element's lang attribute. This will ensure that browsers will be ready for expected results while rendering your page. Moreover, this will also ensure the correct display of all Unicode characters. So now there will be no need to use HTML entities, and that in turn will save bytes.

The correct naming

It is better to use a conventional standard. On one hand users will be comfortable and at ease with your site's structure. On the other hand, it will be more maintainable for webmasters involved in developing the site. Besides, it will be easier to use language codes for logo images, PDF documents and other site assets.

Navneet Kaushal

Navneet Kaushal

Navneet Kaushal is the founder and CEO of PageTraffic, an SEO Agency in India with offices in Chicago, Mumbai and London. A leading search strategist, Navneet helps clients maintain an edge in search engines and the online media. Navneet's expertise has established PageTraffic as one of the most awarded and successful search marketing agencies.
Navneet Kaushal
Navneet Kaushal
Most popular Posts
Upcoming Events
Events are coming soon, stay tuned!More