i18n

i18n

Since v0.1.7, ZoaUI has been aiming at achieving the best typography possible for a multilingual environment.

Unlike most other CSS libraries, ZoaUI now supports plug-and-play i18n: if you want to optimize an element for a certain language, just include corresponding language packs and add the corresponding lang attribute and classnames to the element.

Supported languages

By v0.1.7, languages supported are listed below. Official support for other languages might or might not be added later.

Simplified Chinese
- lang: zh or zh-cn, or
- class: zolang--zh
Japanese
- lang: ja or ja-jp, or
- class: zolang--ja

File structure

If multilingual typography is needed, it is required that files for corresponding languages be linked to in the HTML.

<link rel="stylesheet" href="/css/zoaui/zoaui.css" />
<link rel="stylesheet" href="/css/zoaui/langs/ja-jp.css" />
<link rel="stylesheet" href="/css/zoaui/langs/zh-cn.css" />

Demos

而这种忘却，有时候会带来无法补救的结果。

我们希望有一天，对每个人而言，现代技术不再是一种无需思考的魔法…

着丝粒（染色体的主缢痕）为染色质的结构，将染色体分成二臂，在细胞分裂前期和中期，把两个姐妹染色单体连在一起，到后期两个染色单体的着丝粒分开。着丝粒两侧各有一个由蛋白质构成的 3 层盘状特化结构，为非染色体性质物质的附加物，称为着丝点。

这个 pre 里面有中文字符串。

好吧我说的并不准确。实际上并不完全是 computed value, line-height 的无单位数字是直接继承的, 百分百是计算后的, em 同。。。

萌萌的指针

<div lang="zh-cn" class="zolang--zh zolang--layoutCJK">
    <h1 class="zolang-h1--layoutCJK">
        ...
    </h1>
    <h2 class="zolang-h2--layoutCJK">
        ...
    </h2>
    <p>
        ...
    </p>
    <pre class="zo-pre zolang-pre--zh">这个 pre 里面有中文字符串。</pre>
    <blockquote class="zo-quote">
        ...
    </blockquote>
    <p class="zo-quoteSource"><a href="https://intptr.im/" class="zo-link">萌萌的指针</a></p>
</div>