Have you ever considered delivering your
content for multiple regions and in multiple languages? More and more websites
are going
international (being made available
in multiple languages) these days, and you can easily see why. The broader the
audience, the better. And unless you have a region specific website, there's no
reason why you should not go international. However, there's a lot more to it
than just translation, as emphasised by these quick tips from Google for
internationalization.
1. Change your markup instead of your style sheets
Learn where to use markup and where to use CSS
for internationalization (shortened to i18nafter the starting
character i, and the 18 character spaces
between the first and the last n). Things like language are inherent to the
content present on page. So in this case, markup should be used for i18n. You
can't always rely on CSS. So use attributes like lang and dir (for direction) with
the html tag as shown below.
<html lang="en" dir="ltr">
Note: In some cases, i18n markup might not be supported by the
markup language, as is the case with XML. In such cases, CSS may be used.
2. Use a single CSS file
When using different languages and directions
(LTR or RTL), do not use a separate style sheet for each locale. Use a single
CSS file, and bundle together existing CSS rules with their international
counterparts. A single file makes it easier to maintain things, and only a
single file needs to be loaded. Consider a scenario where the default CSS file
loaded, but the international file failed to load. A single file approach would
be better in that case.
3. Use [dir='rtl'] attribute selector
A language can either have an RTL (Right to
Let) or LTR (Left to Right) directionality. RTL directionality requires
different markup than LTR. So you can use the [dir='rtl'] attribute
selector in this case. For example;
aside { float: right;}[dir='rtl']
aside { float: left;}
4. Look carefully at position properties
As in the example above, you often need to
reverse or mirror the position properties for RTL and LTR languages. For
example, what's aligned left in LTR should be aligned right in RTL. So you
should look at all the position-related properties for LTR, and mirror them for
RTL. These include margins, padding, text-align, float, clear, and so on. There
are tools out there as well that do the job for you, such as CSSJanos .
5. Look closely at the details
Just like with CSS positioning properties, you
might want to mirror some other details as well, such as box-shadow for images,
text-shadow for text, arrows, background, markers, and so on. Same goes for
JavaScript positioning and animations.
Another very important aspect is the fonts and
font sizes. A font size for one language might seem adequate, but it may be too
small for other languages. For example, Arabic texts usually need to be bigger
than English texts because they're difficult to see in a smaller font.
So keep an eye out for details, and feel free
to contact us if there's a problem. We'd love to help. Cheers :)
0 comments:
Post a Comment