About Internationalization

When a project grows into a certain environment or is initially built for many countries, it needs to consider internationalization. Simply put, it’s one set of pages, multiple languages.

Not long ago, I made an internationalization project based on React and ANTD. Internationalization was used in the project and the way of use was very simple

import zhCN from 'antd/lib/locale-provider/zh_CN';

return (
  <LocaleProvider locale={zhCN}>
    <App />
  </LocaleProvider>
);
Copy the code

Then, all the official components of the page become Chinese (English by default).

If you use other projects, there are corresponding solutions, such as

  • vue + vue-i18n
  • angular + angular-translate
  • react + react-intl
  • jquery + jquery.i18n.property

You can do your own search by looking at the various apis and configuration files.

Pretty mature, so how do you do that yourself?

How internationalization works

In fact, the principle is very simple, here only the most basic principle, do not talk about the characteristics of the framework.

The above list here so many JS frameworks, there is a common feature, is a similar language package thing.

zh.json
en.json
jp.json
...
Copy the code

This is also very easy to understand, separate the various languages, easy to manage and maintain.

For testing purposes, we removed the request process and wrote it directly in a JSON object, as follows

intl.js

var intl = 
{
    "zh": {
        "title": "Test"."content": "This is a test."
    },
    "cn": {
        "title": "test"."content": "this is a test"}}Copy the code

You would probably write a configuration language like this, and then somehow set the corresponding fields to the corresponding locations.

Here is the pseudocode

<h2 id="title">test</h2>
<p id="content">This is a test</p>
Copy the code
var lang = getGlobalVar('LOCALE') | |'zh';// Get the language
var local = intl['lang'];

$title.innerHTML = local['title'];
$content.innerHTML = local['content'];
Copy the code

The above is a simple implementation idea, if it is a simple static page, can use this way, also don’t need to introduce some third party library, and then gnawing his API.

Of course, internationalization involves more than simple translations of static text on a page, but also localization services (time, currency, etc.), and it’s faster to use off-the-shelf libraries when it comes to these.

Try something different

In addition to the above JS train of thought, there are no other methods?

How to implement internationalization without js?

Solution points for internationalization

There are two basic elements to achieving internationalization

  • Language configuration
  • The front to present

Language configuration refers to how to set up multiple languages, that is, how to record multiple languages, like the previous JS configuration file.

Front-end configuration refers to how to display the required language on the page according to the requirements. For example, Chinese is displayed in the Chinese environment and English is displayed in the English environment.

At first glance, it seems impossible to do this without js. There is no solution to configuration files and rendering page content.

Content generation technique

CSS has a content generation property, which is usually used with pseudo-classes :before or :after.

When it comes to content, a lot of people probably understand that, yes, content is content generation.

So, give it a try?


      
<html lang="en">
<body>
  <h2 class="title"></h2>
  <h3 class="paragraph"></h3>
  <h4 class="summary"></h4>
</body>
</html>
Copy the code
/**ch**/
html:lang(ch) .title:after{
  content: 'title';
}
html:lang(ch) .paragraph:after{
  content: 'section';
}
html:lang(ch) .summary:after{
  content: 'description';
}
/**en**/
html:lang(en) .title:after{
  content: 'title';
}
html:lang(en) .paragraph:after{
  content: 'paragraph';
}
html:lang(en) .summary:after{
  content: 'summary';
}
Copy the code

How’s that？ Was it a flash or… ?

Okay, I think it’s a little bit cumbersome to write, but it’s a way of thinking.

content+attr

The above method is not good, but the thinking also needs a gradual process, right

Here is a simple example of using property values as content

<style>
  span:after{content:attr(a)}
</style>
<span a="I am A"></span>
Copy the code

This allows content to be generated from property values.

Why use attribute values?

The other reason why the previous approach was so bad was because the semantics were so bad that you couldn’t see what was in the HTML file alone, right

<h2 class="title"></h2>
<h3 class="paragraph"></h3>
<h4 class="summary"></h4>
Copy the code

So let me add some properties

<h2 data-lang-ch="Title" data-lang-en="title"></h2>
<h3 data-lang-ch="Paragraph" data-lang-en="paragraph"></h3>
<h4 data-lang-ch="Description" data-lang-en="summary"></h4>
Copy the code

So there should be no problem with semantics, knowing exactly what each tag is, right

You get the idea what I’m going to do, right

/**ch**/
html:lang(ch) [data-lang-ch]:after{
  content: attr(data-lang-ch);
}
/**en**/
html:lang(en) [data-lang-en]:after{
    content: attr(data-lang-en);
}
Copy the code

Very simple, each take their respective corresponding attributes can, need what language directly add attributes in HTML, also do not need what JS

Combined with the CSS address picker mentioned earlier, it is easy to adapt to various languages based on the address bar

[data-lang-ch]:after.#ch:target~[data-lang-ch]:after{
    content: attr(data-lang-ch);
}
#en:target~[data-lang-en]:after{
    content: attr(data-lang-en);
}
Copy the code

Add a little element to the page

<body>
    <div id="ch"></div>
    <div id="en"></div>
    <h2 data-lang-ch="Title" data-lang-en="title"></h2>
    <h3 data-lang-ch="Paragraph" data-lang-en="paragraph"></h3>
    <h4 data-lang-ch="Description" data-lang-en="summary"></h4>

    <a href="#ch">Chinese</a>
    <a href="#en">English</a>
</body>
Copy the code

Here is a demo

section

The above focuses on two completely different approaches to internationalization, the former mainstream, the latter completely alternative, but still useful. If your page isn’t too complex, this is fine.

Although the above skip JS to achieve the internationalization requirements, but if it is said that some dynamic content, such as time, can not be placed in the property, this part, can only be processed through JS, it is helpless.

Another is that if the page is complex or needs to be adapted to too many languages, that means a lot of properties

<h2 
  data-lang-ch="Title" 
  data-lang-en="title"
  data-lang-fr="XXX"
  data-lang-jp="XXX"
  data-lang-de="XXX"
  data-lang-fi="XXX"
  data-lang-it="XXX"
  >
</h2>
Copy the code

This is not very friendly, in this case the mainstream JS solution is recommended