Website Internationalization tips for Web developers
Many websites appear in more than one language. It should be noted that building a website that supports several languages is not just about translating or locating. This site design requires additional internationalization activities. Let’s take a look at some of the website internationalization tips for Web developers.
In our work, we often meet multilingual websites that can cause headaches for SEO specialists and web developers. That is why it is worth developing guidelines for designing and optimizing international websites.
The guidelines in this article highlight all the guidelines for the optimization of multiregional and multilingual websites for search engines.
Internationalization and the location of the website
The difference between internationalization and location is as follows. Internationalization (I18N) consists in designing an internet website so that it can be adapted for different languages and regions without the need for technical changes. Localization (L10N) is the process of adapting an internationalized website to a specific region or language.
Website Internationalization Tips:
Provide the location of pages in tags, not in style sheets
The language and direction of text display are inseparably connected with the content of the document. Therefore, whenever possible, instead of style sheets, you should use HTML tags for internationalization of the website. Attributes lang and dir should be used at least in the html element: <html lang=”ar” dir=”rtl”>
Avoid your own solutions to create special classes or identifiers. The CSS specification specifies that specifies that properties such as direction and unicode-bidi can be ignored as required.
The situation is different for XML. XML does not provide special internationalization tags, so in this case it is recommended to use CSS for this purpose.
Use one style sheet for all locations
Instead of creating separate style sheets for LTR text directions (from left to right) and RTL (right to left) or even for each language separately, you must collect everything in one style sheet. Thanks to this, internationalization rules are easier to understand and configure.
Use the attribute selector dir = ‘rtl’
In order to be able to collect all rules in one style sheet, the appropriate way to specify elements whose formatting depends on the direction of text display should be used. In most modern web browsers, just use [dir = ‘rtl’], as in the example:
#sidebar {
float: right;
margin: 0 0 1em 1em;
}
[dir=’rtl’] #sidebar {
float: left;
margin: 0 1em 1em 0;
}
Use the pseudo-class: lang ()
To determine the formatting of documents in a specific language, use the pseudo-class: lang (). For example, if bold font in Chinese documents does not look good, you can turn it off as follows:
: lang (zh) strong,
: lang (zh) b {
font-weight: normal;
}
Reflect all values related to the text direction
Make sure to mirror image of all values related to the direction of the text. These are properties related to borders (border), margins (margins), padding and positioning of elements (float, text-align). There are tools to help this task, such as CSSJanus.
Pay attention to details
- Depending on the text direction display, changes may require: pictures (eg arrows, background), box-shadow and text-shadow values, JavaScript animations.
- The default font set (and sometimes its font) should be adapted to the character set (alphabet).
- The use of specialized selectors [dir = ‘rtl’] and [dir = ‘ltr’] requires great care.
We hope you find all these website internationalization tips for Web developers helpful.
