In September 7 Google Webmaster Central blog post, which was published on Sep 9, Google shared some tips for webmaster going global, to take into account when launching pages in both other languages and regions.
Here is what the Kathryn Cullen, Google Webmaster Team said on the subject:
- Reuse the same template for all language versions, and always try to keep the HTML of your template simple.
- If your design relies on text playing nicely with fixed-size elements, then translating your text might wreak havoc specially in right-to-left (RTL) languages. Be prepared for navigation titles that might wrap onto more than one line by figuring out your line height to accommodate this (also worth considering when you create your navigation text in English in the first place).
Variable word lengths cause particular issues in form labels and controls specially if your form layout displays labels on the left and fields on the right. Also consider the extra styling you’ll need for RTL layouts. For these reasons, design forms with labels above fields, for easy readability and styling that will translate well across languages.
Also avoid fixed-height columns-if you’re attempting to neaten up your layout with box backgrounds that match in height, chances are when your text is translated, the text will overrun areas that were only tall enough to contain your English content.
- Source editing for bidirectional HTML can be problematic because many editors haven’t been built to support the Unicode bidirectional algorithm. In short, the way your markup is displayed might get garbled:
The following editors currently provide decent solutions for bidirectional editing: Coda, and also Dreamweaver, IntelliJ IDEA and JEditX.
When designing for RTL languages you can build most of the support you need into the core CSS and use the directional attribute of the html element (for backwards compatibility) in combination with a class on the body element. As always, keeping all styles in one core stylesheet makes for better maintainability.
Some key styling issues to watch out for: any elements floated right will need to be floated left and vice versa; extra padding or margin widths applied to one side of an element will need to be overridden and switched, and any text-align attributes should be reversed.
Google says they include a class on the body tag rather than a
html[dir=rtl]CSS selector because this is compatible with older browsers:
- For non-Latin character sets (Cyrillic, Greek, and a myriad of Asian and Indic), check that your editor and browser encodings are set to UTF-8 (recommended) and consider adding a element and the lang attribute of the html element to your HTML template so browsers know what to expect when rendering your page-this has the added benefit of ensuring that all Unicode characters are displayed correctly.
- Finally, using a standard such as the ISO 639-1 language codes for naming helps when you start to deal with several language versions of the same document.