Geekly Articles each Day
📜 ⬆️ ⬇️

Six tips for building websites for a multilingual audience from Google Web Studio

Level of training webmaster: any

There are many websites on the Internet, the content of which is available in several languages, and such resources are increasing. However, creating a multilingual website is not just translation or localization (L10N). Here it is necessary to take into account many other aspects, each of which relates to internationalization (I18N). In Google Help, you can find information on how to optimize multiregional and multilingual websites for Google Search , and in this article we’d like to share a few tips on creating resources for a multilingual audience.

1. Create multilingual pages using markup, not style sheets


The language and orientation of the text are closely related to the content of the page. In this regard, try to always use markup, rather than style sheets. Set the language and direction of the text (at least for materials in html) using the pseudo-classes lang and dir :

 <html lang="ar" dir="rtl">

We do not recommend the use of original solutions, such as special classes or identifiers.
Relying on style sheets is not worth it: user agents can ignore properties such as Unicode direction or bidirectional text . For XML, the situation is exactly the opposite: since XML does not support special markup for internationalization, in this case it is recommended to use style sheets.

2. Use one style sheet for all languages.


Do not create separate style sheets for text from right to left and from left to right or for each language - use one. This will help to unify and correctly implement the rules of internationalization.
Do not experiment with alternative style sheets, such as:
') 
 <link href="default.rtl.css" rel="stylesheet">

Use those already on the site:

 <link href="default.css" rel="stylesheet">

With this approach, you will need to supplement the existing CSS rules with the internationalization components listed below.

3. Use the attribute selector [dir = 'rtl']


Since we recommend using existing style sheets (tip # 2), you need to select elements whose orientation will be changed in a different way. Since the text read from right to left requires special markup (tip # 1), there should be no special difficulties: most modern browsers support [dir='rtl'] .

Consider an example:

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

4. Use pseudo-class: lang ()


To define languages ​​in various documents, use the pseudo-class :lang() . Please note that we are talking about documents, and not fragments of text, since their formatting is more difficult.
If you find that the Chinese characters in bold type look bad (and this is true), add the following code:

 :lang(zh) strong, :lang(zh) b { font-weight: normal; color: #900; }

5. Change the direction for all values.


When working with bidirectional content, it is important that the values ​​change directionality uniformly. Particular attention should be paid to the properties of internal and external indents, frames, as well as the parameters of attributes such as float and t ext-align .
For example, in some sections the text goes from left to right, and in others - from right to left. Wherever the alignment of t ext-align: left was applied, now we need to use text-align: right .
There are tools that make it easy to change direction. One of them is CSSJanus , however it is intended for sites using separate style sheets, and not one common.

6. Pay attention to details.


Consider the following:
  1. Images oriented left or right (arrows, backgrounds, shadows, specified using the attributes box-shadow and text-shadow , JavaScript elements and animated objects) should also change their direction.
  2. Depending on the font and script, the size of the text on the page may be insufficient (this is especially true for Latin fonts). If necessary, adjust its size or even use a different font.
  3. Remember the specificity of CSS selectors: selectors [dir='rtl'] or [dir='ltr'] (see tip # 2) take precedence. This can lead to problems. Consider this factor and make changes if necessary.

If you have any questions or comments, visit the web development reference forum for multilingual sites . You can also leave your comments here.

Source: https://habr.com/ru/post/183206/

More articles:


All Articles