About Internationalization
A project developed to a certain environment or multinational beginning to build, we need to consider international. Simply put, a page, multiple sets of language.
Recently made an international project, based on reactand antd, which used international, it is also very simple to use
import zhCN from 'antd/lib/locale-provider/zh_CN';
return (
<LocaleProvider locale={zhCN}>
<App />
</LocaleProvider>
);Then, all of the pages have become a Chinese official component (default is English).
If you use a different project, but also the corresponding solutions, such as
-
vue+vue-i18n -
angular+angular-translate -
react+react-intl -
jquery+jquery.i18n.property
Free to search for specific use, nothing more than to see a variety apiand configuration files.
It can be said quite mature, so, how they achieve?
The principle of international
In fact, the principle is very simple, they talk about the most basic principle here, talk about the characteristics of the frame.
Cited above so many here jsframework, a common feature is that there is a similar language pack something.
zh.json
en.json
jp.json
...This is also well understood, the various language-independent, providing easy management and maintenance.
For testing, we removed the process request, a write directly in jsonthe object inside, as follows
intl.js
var intl =
{
"zh": {
"title": "测试",
"content": "这是一个测试"
},
"cn": {
"title": "test",
"content": "this is a test"
}
}Probably write some of these configuration language, then the corresponding field is set by some means to the appropriate location on it.
The following is a pseudocode
<h2 id="title">测试</h2>
<p id="content">这是一个测试</p>var lang = getGlobalVar('LOCALE')||'zh';//获取语言
var local = intl['lang'];
$title.innerHTML = local['title'];
$content.innerHTML = local['content'];The above is a simple realization of the idea, if it is a simple static pages, they can in this way, no need to introduce a number of third-party libraries, and then eating him api.
Of course, the international far more than a simple translation of static pages of text, also including localized service (time, money, etc.), or faster if it comes to the use of these ready-made library of.
Alternative attempts
In addition to these jsideas, there is no other way to do that? This is not nonsense, and if not would not have to write the article.
Here the focus here, without the aid of how jsto achieve internationalization?
Points resolve international
Internationalization has two basic elements
- Language configuration
- Front-end presentation
Language configuration refers to how to set up multi-language, that is to say how many languages recorded just in front of jsthe inside of the profile.
Front-end configuration refers to how the page, such as displaying display Chinese, English English environment, the user can see what counts in the Chinese environment needed to show the required language.
At first glance, it seems without the aid jswill not work ah, but also the profile, but also to render the page content, almost no solution ah.
content generation technology
cssThere is a contentbuild properties, generally with the pseudo-class :beforeor :afteruse.
Might mention content, many people may understand, yes, contentyou can achieve generated content.
So, give it a try?
<!DOCTYPE html>
<html lang="en">
<body>
<h2 class="title"></h2>
<h3 class="paragraph"></h3>
<h4 class="summary"></h4>
</body>
</html>/**ch**/
html:lang(ch) .title:after{
content: '标题';
}
html:lang(ch) .paragraph:after{
content: '段落';
}
html:lang(ch) .summary:after{
content: '描述';
}
/**en**/
html:lang(en) .title:after{
content: 'title';
}
html:lang(en) .paragraph:after{
content: 'paragraph';
}
html:lang(en) .summary:after{
content: 'summary';
}how about it? It is still shines. . Very file?
Well, I feel very frustrated, write up more trouble, but also a kind of thinking.
content+attr
The above approach does not up to much, but thinking also requires a gradual process
The following uses property values to use as content content, before the realization hit the stars with pure css effect (three) also use this feature, we are interested can look back to the past, here briefly usage
<style>
span:after{content:attr(a)}
</style>
<span a="我是A"></span>This content may be generated by the attribute value.
Why use an attribute value it?
Before a way that is not good reason Another point is that semantic bad, look at the individual htmlfiles do not know what is
<h2 class="title"></h2>
<h3 class="paragraph"></h3>
<h4 class="summary"></h4>Let me add a little Properties
<h2 data-lang-ch="标题" data-lang-en="title"></h2>
<h3 data-lang-ch="段落" data-lang-en="paragraph"></h3>
<h4 data-lang-ch="描述" data-lang-en="summary"></h4>This time semantic should be no problem, right, very well aware of the contents of each tab
Everyone should know what I have to do it, as follows
/**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);
}Very simple, take their property to their corresponding needs in what language directly htmladd properties to, you do not need any js
Talked about before in conjunction with css address selector , can easily be adapted to achieve various languages from 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);
}Add a little element of page
<body>
<div id="ch"></div>
<div id="en"></div>
<h2 data-lang-ch="标题" data-lang-en="title"></h2>
<h3 data-lang-ch="段落" data-lang-en="paragraph"></h3>
<h4 data-lang-ch="描述" data-lang-en="summary"></h4>
<a href="#ch">中文</a>
<a href="#en">英文</a>
</body>Here is the demo
Section
Above focuses on two completely different ways of internationalization, the former mainstream, the latter entirely different, but still have its uses are. If your page is not complex, you can take this approach.
Without js, faster speed, but also broaden the horizons, not sour waist, legs do not hurt ...
Although the above skip jsto achieve the international demand, but if that is some dynamic content, such as time, you can not be on the inside of the property, this part, it can only jsbe dealt with, refused to concede defeat. .
Another is, if the page is complex, or require adaptation language too much, it means a lot to write property
<h2
data-lang-ch="标题"
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>This very friendly, and in this case it is recommended mainstream jssolution
If you like the article, you can praise and collection point, a lot of attention to my blog