Multilingual and compiled on websites

Tram Ho

This article will introduce how multi-language web pages handle.

What language is the website?

The first thing that can be thought of is the language that the HTML document uses. The lang attribute helps the browser determine the language that the website is displaying.

Usually, this attribute is added to the root element of HTML documents

Adding this property to the root element is really important, especially for users whose primary language is different from that of the browser. For example French speakers when using this website.

When the lang attribute is missing, the browser treats the web page written in the user’s default language, resulting in some unwanted results. Below is an example where a screen reader processes an English web page in a French accent, which is caused by the lack of the lang attribute.

The lang attribute is one of the global HTML attributes that can be applied on any HTML tag. This means that we can specify different parts of the web page in different languages. Particularly useful if an article uses a text in another language, comme ça, par exemple.

Specify a language for external linked sites

The lang attribute is used for the current content of the web page. So what about external resources / links?

We can specify the language of the external link resource using the hreflang property. As the name implies, this attribute specifies the language via the href attribute, and can only be applied to HTML tags that use the href attribute. For example, the <a> , <link> and <area> .

Compile control

In some cases, we want a part of the web page to always be visible in a certain language and never be compiled. This is the reason why the translate attribute in HTML5.1 was born.

The translate attribute can accept two values:

  • yes : the content of the tag can be compiled.
  • no : the content of the body cannot be compiled.

Unfortunately, this property is not supported by all browsers. However, this functionality can be .notranslate using the .notranslate class – determined by Google’s website translation engine. For example in the following two paragraphs:

If the web page is translated into another language, only the first text is translated into the new language.

The direction of the text

In many languages, the direction of the text is not from left to right like English. In languages ​​such as Arabic, text is written from right to left.

To change the direction of the text, we can use the dir property with the following three values:

  • ltr : Left to right
  • rtl : Right to left
  • auto : allows the device / browser to decide the text direction based on the text content.

Based on the original direction above, the browser will apply the corresponding CSS to change the direction of the text using the direction property.

The direction property of the CSS accepts the ltr and rtl values

This property works in the same way as the text-align . It does not change the order of words but only adjusts the direction of letters in the text.

Other attributes related to the control of text direction include:

  • writing-mode : Defines writing in vertical or horizontal direction.
  • text-orientation : Defines the text-orientation when in vertical orientation.

Alternate values

For most websites translated into different languages, there will be separate display pages for each language. For example, there can be multiple versions of the homepage:

In order for the user’s device to know all the individual pages and classify them like the homepage above, simply translate the text into different languages ​​and use the <link> tag with the relational type alternate . In our text’s <head> tag, we define all alternate versions for the web page.

Notice how the hreflang attribute combines with the alternate type to specify the language of each alternate page.

Alternative values ​​for social networking sites

When a web page’s path is shared, its language can be determined from the og:locale meta tag.

If there are multiple language regions that support it, the og:locale:alternate meta tag can be used

Left, Right, Start, End

Since most webpages are officially written in English, CSS properties are written with the mindset of starting one line from the left and ending the line on the right. But the web is getting more internationalization. Therefore, the situation is changing.

With Flexbox, for example, the default left side of a box is called the starting point, because for a box the starting point can go from four sides. Many CSS properties are just starting out to use this rendering, for example the margin-inline-start .

The margin-inline-start corresponds to the margin inline at the starting point and can be equal to any of the four directions of the tag in the direction of the text. For example, if the direction of the tag is from right to left then the starting point margin will be the same as the right margin.

Similarly, if the writing-mode of the can be set to vertical and left to right, then the starting point will be equivalent to the upper margin.

There are other properties that work similarly. For example margin-inline-end works similarly to margin-inline-start but the other applies to the end of the tag. Take the initial example above, if the text direction from right to left, the endpoint margin will be equivalent to the left margin.

Refer

Ire Aderinokun , Localization and Translation on the Web

Share the news now

Source : Viblo