Monday, June 3, 2013

Here are 6 Quick Tips for International Websites by Google Team!

Google Web Studio team has been busy analyzing a number of ways to handle internationalization for Google's web search. And they are finally out with a few tips for web developers.

There are several websites in more than one language and website owners are making more sites for more than one language. However, building a website in multiple languages is more than translation or localization (L10N). There are other things related to internationalization (I18N), which Google Web Studio team has shared in their latest blog post for international websites.

Make Pages I18N-Ready in the Markup and Not the Style Sheets

Since language and directionality are inherent on the contents of the webpage document, it is always better that webmasters use markup instead of style sheets for internationalization. The Google team recommends you to use @lang and @dir, at least on the html element.

<html lang="ar" dir="rtl">
The team also advices webmasters to avoid using special classes or IDs.
You cannot rely on CSS for I18N in style sheets because compliant user agents might 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.)

One Style Sheet for All Locales

It is always better to add everything in one style sheet instead of creating separate sheets for RTL and LTR directionality or each language. It makes maintenance and understanding of internationalization rules easier.

Google Team says that instead of embedding alternative style sheet like
<link href="default.rtl.css" rel="stylesheet">
You should use existing
<link href="default.css" rel="stylesheet">

However, make sure that you follow the existing CSS rules by their counterparts, while taking this approach.

Using the [dir='rtl'] attribute selector

You will have to use a different way for selecting the elements, which you want to style differently for other directionalities. However, this will be easy for you as RTL content requires specific markup. For most of the today's browsers, use [dir='rtl']
For example:

aside {
 float: right;
 margin: 0 0 1em 1em;
 [dir='rtl'] aside {
 float: left;
 margin: 0 1em 1em 0; 

Using :lang() pseudo class
When you want to target documents of a particular language, use :lang() pseudo class . For example, if you think that bold format doesn't look good in Chinese documents, use:
:lang(zh) strong,
:lang(zh) b {
 font-weight: normal;
 color: #900;

Mirror Left and Right Related Values

When you are working with RTL and LTR contents, it is important that you mirror the values that change directionality. Check if everything is related to borders, paddings, and margin. Also check position related properties, text-align, or float.

Example: what’s text-align: left in LTR needs to be text-align: right in RTL.
There are tools like CSSJanus that will make it easier to flip directionality. Although, it is written for the "separate style sheet" and not the "same style sheet" realm.

Keeping an Eye on the Details

You need to look-out for these things:

You might have to swap the images for left or right, light sources in box-shadow & text-shadow values, animations, and JavaScript positioning & accommodating in the opposite directionality.

CSS specificity. When you are using [dir='rtl'] (or [dir='ltr']) hook, you are using a high specificity selection, which can invite an issue. So, make adjustments accordingly.
The default font size may be too small, depending on the script and front. So you have to consider the tweaking size and even the font. Take special care of font size and font for non-Latin alphabets.

In case of any doubt or feedback, the Google team wants you to check the Internalization Webmaster Help Forum.


1 comment:

CurationSoft said...

Good day! I simply would like to give you a huge thumbs up for the excellent info you have got here on this post. I will be coming back to your site for more soon.

FREE Content Curation Software, Download NOW!