其他
CSS 国际化
The following article is from 奇舞精选 Author Marthers
遇到过一些人，他们根本不认为CSS与国际化有关，但如果你仔细想想，国际化不仅仅是将你网站上的内容翻译成多种语言，然后一劳永逸。这些内容的呈现方式存在各种细微差别，影响母语人士使用您网站的体验。
与语言相关的样式
:lang()伪类选择器
We use <em>italics</em> to emphasise words in English, <span lang="zh">但是中文则是用<em>着重号</em></span>.
</p>
font-style: normal;
text-emphasis: dot;
}
使用属性选择器
/* will match only zh */
/*将匹配zh，zh HK，zh Hans，zhong，zh123…
*基本上是以zh作为前两个字符的任何内容*/
/* 将匹配 zh, zh-HK, zh-Hans, zh-amazing, zh-123 */
普通类或ID如何？
CSS属性
Writing mode
逻辑属性
top to block-start right to inline-end bottom to block-end left to inline-start
<p>
Given the requirement is to have a box with a run of text within it with the
following characteristics:
</p>
<ol>
<li>
The border colour at the top edge <strong>of the run of text</strong> should
be red.
</li>
<li>
The border colour at the right edge
<strong>of the run of text</strong> should be green.
</li>
<li>
The border colour at the bottom edge
<strong>of the run of text</strong> should be blue.
</li>
<li>
The border colour at the left edge
<strong>of the run of text</strong> should be yellow.
</li>
</ol>
<p>
Using physical directions requires a modification every time the writing
direction changes, whereas using logical properties allows the same properties
and values for all six use cases.
</p>
<hr />
<section>
<h1>Physical directions</h1>
<div class="phy-boxes">
<article>
<div class="phy-box1">
<p>This is a sentence.</p>
</div>
<pre><code>border-top-color: tomato;
border-right-color: limegreen;
border-bottom-color: dodgerblue;
border-left-color: gold;</code></pre>
</article>
<article>
<div class="phy-box2" dir="rtl">
<p>This is a sentence.</p>
</div>
<pre><code>border-top-color: tomato;
border-left-color: limegreen;
border-bottom-color: dodgerblue;
border-right-color: gold;</code></pre>
</article>
<article>
<div class="vlr phy-box3">
<p>This is a sentence.</p>
</div>
<pre><code>border-left-color: tomato;
border-bottom-color: limegreen;
border-right-color: dodgerblue;
border-top-color: gold;</code></pre>
</article>
<article>
<div class="vlr phy-box4" dir="rtl">
<p>This is a sentence.</p>
</div>
<pre><code>border-left-color: tomato;
border-top-color: limegreen;
border-right-color: dodgerblue;
border-bottom-color: gold;</code></pre>
</article>
<article>
<div class="vrl phy-box5">
<p>This is a sentence.</p>
</div>
<pre><code>border-right-color: tomato;
border-bottom-color: limegreen;
border-left-color: dodgerblue;
border-top-color: gold;</code></pre>
</article>
<article>
<div class="vrl phy-box6" dir="rtl">
<p>This is a sentence.</p>
</div>
<pre><code>border-right-color: tomato;
border-top-color: limegreen;
border-left-color: dodgerblue;
border-bottom-color: gold;</code></pre>
</article>
</div>
</section>
<hr />
<section>
<h1>Logical directions</h1>
<div class="log-boxes">
<div class="log-box">
<p>This is a sentence.</p>
</div>
<div class="log-box" dir="rtl">
<p>This is a sentence.</p>
</div>
<div class="vlr log-box">
<p>This is a sentence.</p>
</div>
<div class="vlr log-box" dir="rtl">
<p>This is a sentence.</p>
</div>
<div class="vrl log-box">
<p>This is a sentence.</p>
</div>
<div class="vrl log-box" dir="rtl">
<p>This is a sentence.</p>
</div>
</div>
<pre><code>border-block-start-color: tomato;
border-inline-end-color: limegreen;
border-block-end-color: dodgerblue;
border-inline-start-color: gold;</code></pre>
</section>
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 1em;
}
article {
margin-bottom: 1em;
}
article > div,
[class$="box"] {
width: 200px;
height: 200px;
border: 1em solid;
position: relative;
margin: 1em;
}
.phy-box1 {
border-top-color: tomato;
border-right-color: limegreen;
border-bottom-color: dodgerblue;
border-left-color: gold;
}
.phy-box2 {
border-top-color: tomato;
border-left-color: limegreen;
border-bottom-color: dodgerblue;
border-right-color: gold;
}
.phy-box3 {
border-left-color: tomato;
border-bottom-color: limegreen;
border-right-color: dodgerblue;
border-top-color: gold;
}
.phy-box4 {
border-left-color: tomato;
border-top-color: limegreen;
border-right-color: dodgerblue;
border-bottom-color: gold;
}
.phy-box5 {
border-right-color: tomato;
border-bottom-color: limegreen;
border-left-color: dodgerblue;
border-top-color: gold;
}
.phy-box6 {
border-right-color: tomato;
border-top-color: limegreen;
border-left-color: dodgerblue;
border-bottom-color: gold;
}
.log-box {
border-block-start-color: tomato;
border-inline-end-color: limegreen;
border-block-end-color: dodgerblue;
border-inline-start-color: gold;
}
.vlr {
writing-mode: vertical-lr;
}
.vrl {
writing-mode: vertical-rl;
}
pre {
background: #2d2d2d;
padding: 1em;
margin: .5em 0;
overflow: auto;
color: #ccc;
border-radius: 4px;
width: max-content;
margin: auto;
}
边框的物理和逻辑方向的比较
文本运行的顶部边缘的边框颜色应为红色。 文本右边缘的边框颜色应为绿色。 文本运行的底部边缘的边框颜色应为蓝色。 文本的左边缘的边框颜色应为黄色。 使用物理方向需要在每次写入方向改变时进行修改，而使用逻辑属性则允许所有六个用例具有相同的属性和值。
物理方向
逻辑方向
列表和计数器
text-decoration
字体变化
结束
参考资料
ISO 639-1 codes: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
[2]Tobias Bengfort : http://tobib.spline.de/xi/
[3]BCP 47: https://www.w3.org/International/questions/qa-html-language-declarations
[4]Language tags in HTML and XML: https://www.w3.org/International/articles/language-tags/
[5]Codrops CSS reference entry: https://tympanus.net/codrops/css_reference/attribute-selectors/
[6]Amelia Bellamy Royds: https://twitter.com/AmeliasBrain/status/1253053272585146368
[7]HTML中的结构化标记和从右到左的文本: https://www.w3.org/International/questions/qa-html-dir
[8]CSS vs.标记的bidi支持: https://www.w3.org/International/questions/qa-bidi-css-markup
[9]Inline markup and bidirectional text in HTML: https://www.w3.org/International/articles/inline-bidi-markup/
[10]MDN: CSS Logical Properties and Values: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
[11]list-style-type: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
[12]CSS计数器的奇妙世界: https://chenhuijing.com/blog/the-wondrous-world-of-css-counters
[13]CSS Text Decoration Module Level 3: https://drafts.csswg.org/css-text-decor-3/#emphasis-marks
[14]- EOF -
觉得本文对你有帮助？请分享给更多人
关注「大前端技术之路」加星标，提升前端技能
点赞和在看就是最大的支持❤️