diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


Tips To Localized Web Sites Into Over 40 Languages And Regions By Google Webmaster Central

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.
Share This Story, Choose Your Platform!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...