6 Quick Tips for International Websites

Friday, May 31, 2013

Note from the editors: After previously looking into various ways to handle
internationalization for Google’s web-search,
here’s a post from Google Web Studio team members with tips for web developers.

Many websites exist in more than one language, and more and more websites are made available for
more than one language. Yet, building a website for more than one language doesn’t simply mean
translation, or localization (L10N), and that’s it. It requires a few more things, all of which
are related to internationalization (I18N). In this post we share a few tips for international
websites.

Make pages I18N-ready in the markup, not the style sheets

Language and directionality are inherent to the contents of the document. If possible you should
hence always use markup, not style sheets, for internationalization purposes. Use
@lang and @dir, at least on the html element:

Avoid coming up with your own solutions like special classes or IDs.

As for I18N in style sheets, you can’t always rely on CSS: The CSS spec defines that conforming
user agents
may ignore properties like direction or unicode-bidi.
(For XML, the situation changes again. XML doesn’t offer special internationalization markup, so
here it’s advisable to use CSS.)

Use one style sheet for all locales

Instead of creating separate style sheets for LTR and RTL directionality, or even each language,
bundle everything in one style sheet. That makes your internationalization rules much easier to
understand and maintain.

So instead of embedding an alternative style sheet like

just use your existing

When taking this approach you’ll need to complement existing CSS rules by their international
counterparts:

Use the [dir='rtl'] attribute selector

Since we recommend to stick with the style sheet you have (tip #2), you need a different way of
selecting elements you need to style differently for the other directionality. As RTL contents
require specific markup (tip #1), this should be easy: For most modern browsers, we can simply use
[dir='rtl'].

Here’s an example:

Use the :lang() pseudo class

To target documents of a particular language, use the :lang() pseudo class. (Note
that we’re talking documents here, not text snippets, as targeting snippets of a particular
language makes things a little more complex.)

For example, if you discover that bold formatting doesn’t work very well for Chinese documents
(which indeed it does not), use the following:

Mirror left- and right-related values

When working with both LTR and RTL contents it’s important to mirror all the values that change
directionality. Among the properties to watch out for is everything related to borders, margins,
and paddings, but also position-related properties, float, or
text-align.

For example, what’s text-align: left in LTR needs to be
text-align: right in RTL.

There are tools to make it easy to “flip” directionality. One of them is
CSSJanus, though it has been written
for the “separate style sheet” realm, not the “same style sheet” one.

Keep an eye on the details

Watch out for the following items:

• Images designed for left or right, like arrows or backgrounds, light sources in
  box-shadow and text-shadow values, and JavaScript positioning and
  animations: These may require being swapped and accommodated for in the opposite directionality.
• Font sizes and fonts, especially for non-Latin alphabets: Depending on the script and font, the
  default font size may be too small. Consider tweaking the size and, if necessary, the font.
• CSS
  specificity:
  When using the [dir='rtl'] (or [dir='ltr']) hook (tip #2), you’re
  using a selector of higher specificity. This can lead to issues. Just have an eye out, and
  adjust accordingly.

If you have any questions or feedback, check the
Internationalization Webmaster Help Forum,
or leave your comments here.

Written by
Jens O. Meiert
and
Tony Ruscoe,
Tech Leads, Google Web Studio