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.
1. 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:
<html lang="ar" dir="rtl">
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.)
2. 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
<link href="default.rtl.css" rel="stylesheet">
just use your existing
<link href="default.css" rel="stylesheet">
When taking this approach you’ll need to complement existing CSS rules by their international counterparts:
3. 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:
aside {
float: right;
margin: 0 0 1em 1em;
}
r='rtl'] aside {
f
[d
iloat: left;
m 1em 0;
}
margin: 0 1
e
4. 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:
:lang(zh) strong,
:lang(zh) b {
normal;
color: #900;
font-weight:
}
5. 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.
6. 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.
