你不知道的CSS國際化
我遇到過一些人，他們根本不認為css與國際化有關，但如果你仔細想想，國際化不僅僅是把你網站上的內容翻譯成多種語言，然後就收工了。該內容的呈現方式有各種細微的差別，這些細微的差別會影響到母語人士使用您的網站的體驗。
對於國際化，沒有統一的規範定義，但是W3C提供以下指導：
國際化是指在設計和開發產品、應用或文件時，為不同文化、地區或語言的目標受眾提供方便的本地化服務。
這涉及的內容很多，從Unicode和字元編碼的使用，到服務於翻譯內容的技術實現，以及上述內容的呈現方式，都有很多內容要涉及。今天，我只討論與多語言支援有關的css相關方面。
CSS通過告訴瀏覽器應該如何設定樣式和佈局來描述網頁的表示。我們可以使用多種方法在具有CSS的多語言頁面上將不同的樣式應用於不同的語言。
此外，還有一些CSS屬性為文字和書寫系統提供了佈局和排版功能，這些功能超出了目前在web上常見的基於拉丁語的水平自頂向下的功能。
因此，請繫好安全帶，因為這可能最終是一篇冗長的文章。
語言相關樣式
你有沒有想過，Chrome瀏覽器是怎麼知道問你要不要翻譯網頁內容的？這是因為<html>元素上的lang屬性。
lang屬性是一個非常重要的屬性，因為它標識web上文字內容的語言，而且這種資訊在許多地方都被使用。上面提到的Chrome的內建翻譯，針對特定語言的內容的搜尋引擎以及螢幕閱讀器。
也許你沒有想到螢幕閱讀器，但如果你不是螢幕閱讀器的使用者，或者你不認識螢幕閱讀器的使用者，你可能不會想到螢幕閱讀器。螢幕閱讀器使用語言資訊，因此可以以適當的口音和正確的發音讀出內容。
語言相關的風格設計的關鍵在於在頁面標記中正確使用lang屬性,lang屬性可以識別ISO 639 language codes作為值。
在大多數情況下，你會使用像zh這樣的兩個字母程式碼來表示中文，但中文（在其他語言中，如阿拉伯語）被認為是由許多語言組成的大語言，其中有更多的主語子標記。
有關如何構造語言標籤的詳細說明，請參考html和XML中的語言標籤。
一般指導原則是html元素必須始終具有lang屬性集，然後該屬性將被所有其他元素繼承。
<html lang="zh">
在同一頁面上看到不同語言的內容並不罕見。在這種情況下，您可以使用<span>或<div>包裝該內容，並將正確的lang屬性應用於該包裝元素。
<p>The fourth animal in the Chinese Zodiac is Rabbit (<span lang="zh">兔子</span>).</p>
現在我們已經弄清楚了這一點，下面的技術將假定lang屬性已經被負責任地實現。
:lang() 偽類選擇器
結果發現:lang()偽類選擇器並不那麼出名。但是，此偽類選擇器非常酷，因為即使在元素外部聲明瞭語言，它也可以識別內容的語言。
例如，一行標記有兩種語言：
<p>
We use <em>italics</em>
to emphasise words in English,
<span lang="zh">但是中文則是用<em>著重號</em></span>.
</p>
可以使用以下樣式：
em:lang(zh) {
font-style: normal;
text-emphasis: dot;
}
如果你的瀏覽器支援text-emphasisCSS屬性，你應該可以看到在<em>中的每一箇中文字元上新增強調符號（傳統上用於強調東亞文字的排版符號），Chrome瀏覽器需要-webkit-字首。
但問題是，lang屬性不是應用在<em>元素上，而是應用在它的父類上。偽類仍然可以使用，如果我們使用更常見的屬性選擇器，例如[lang="zh]，那麼這個屬性必須在<em>元素上才能生效。
使用屬性選擇器
這就引出了我們的下一個技術，使用屬性選擇器。這讓我們可以選擇具有特定屬性的元素或具有特定值的屬性。
匹配屬性選擇器的方法有七種，但是我只討論那些我認為與lang屬性更相關的方法。我所有的示例都使用中文作為目標語言，因此使用zh及其變體。
首先，我們可以使用以下語法完全匹配lang屬性值：
[lang="zh"]
/* 只匹配zh */
我在前面提到過，中文被認為是一種巨集語言，這意味著它的語言標籤可以用額外的特殊性來組成，比如說文字子標籤Hans或Hant（W3C說只有在必要時才用文字子標籤來區分你所需要的，否則不要用），地區子標籤HK或TW等等。
重點是，語言標籤可以不只是兩個字母，而是可以長一些。但最廣義的類別永遠是第一位的，因此，要以特定字串開頭的屬性值為目標，我們使用這個^語法開頭。
[lang^="zh"]
/* 將匹配 zh, zh-HK, zh-Hans, zhong, zh123… 前兩個字 */
還有另一種涉及到|的語法，它將與選擇器中的確切值匹配，或者與緊跟在-後面的值開始匹配。好像是為了語言子程式碼匹配而設計的，不是嗎？
[lang|="zh"]
/* 將匹配 zh, zh-HK, zh-Hans, zh-amazing, zh-123 */
請記住，對於屬性選擇器，該屬性必須位於要設定樣式的元素上，如果該屬性在父項或祖先項上將不起作用。
普通的類或ID呢？
是的，你可以使用普通的類或id，雖然你將不再利用已經在你的元素上的便利。但是，可以肯定的是，如果確實願意，為你的元素提供用於應用特定語言相關樣式的類名，沒有人會阻止你。
CSS屬性
好了，選擇器已經涵蓋了。讓我們來談談我們希望應用到與這些選擇器相匹配的元素的樣式。
Writing mode
writing-mode的預設值為horizontal-tb，完全合乎邏輯，因為網路誕生於CERN，官方語言為英語和法語。而且，無論如何，大多數網路技術都是在英語國家開創的。
但是人類的奇妙給了我們3000多種書寫語言，它們的文字和書寫方向超越了從上到下的水平方向。
傳統的蒙古文字是從左至右垂直執行的，而東亞語言（如日語，中文和韓語）在垂直書寫時，則是從右至左執行的。允許你這樣做的writing-mode屬性分別是vertical-lr和vertical-rl。
還有sideways-lr和sideways-rl的值，它們使字形向側面旋轉。每個Unicode字元都有一個垂直方向屬性，該屬性會通知渲染引擎預設情況下字形的方向。
我們可以使用text-orientation屬性更改字元的方向。當您在垂直排版的東亞文字中插入基於拉丁語的字詞或字元時，通常會起作用。對於縮略語，您可以選擇使用text-combine-upright的方式將字母壓縮到一個字元空間。
有些人可能想知道從右到左的語言，如阿拉伯語、希伯來語或波斯語(僅舉幾例)，以及CSS是否也適用於這些文字。
簡而言之，CSS不應該用於雙向風格設計。W3C的指南如下:
由於方向性是文件結構的一個組成部分，因此應使用標記來設定文件或資訊塊的方向性，或確定文字中僅靠Unicode雙向演算法不足以實現所需方向性的地方。
通過CSS應用此樣式可能會被關閉，被覆蓋，無法識別或在不同的上下文中被更改/替換。相反，建議使用dir屬性來設定文字的基本顯示方向。
邏輯屬性
網頁上的所有內容都是一個盒子，CSS始終使用top、bottom、left和right的物理方向來指示我們要定位盒子的哪一側。但是，當writing-mode的方向不是預設的從上到下的水平方向時，這些值會引起混淆。
盒子的物理側和定位用的邏輯側的書寫方向矩陣及其對應值如下（從撰寫本文時起，表格已從規格中刪除）：
容器的邏輯頂部使用inset-before，而容器的邏輯底部使用inset-after。容器的邏輯左使用inset-start，而容器的邏輯右使用inset-end。
也有相應的border、margin和padding的對映，分別是:
- toptoblock-start
- righttoinline-end
- bottomtoblock-end
- lefttoinline-start
而在尺寸上的對映如下：width與 inline-size和height與block-size的對映。
列表和計數器
數字系統是用來表達數字的書寫系統，即使最常用的數字系統是印度教阿拉伯數字系統(0、1、2、3等等)，CSS也允許我們用其他數字系統來顯示有序列表。
預定義的計數器樣式可以使用list-style-type屬性，它涵蓋了從afar到urdu的174個數字系統。你可以在MDN中檢視完整的列表。
如果您對CSS計數器感興趣，我在去年的某個時候寫了關於它們的文章，其中探討了在繁體中文上下文中使用的“ Heavenly-stem”和“ Earthly-branch”數字系統（以及CSS中的Fizzbuzz實現，因為為什麼不）。
文字裝飾
如前所述，東亞語言沒有斜體的概念。相反，我們有著重點，可以將它們放置在字元上方或下方以強調文字，增強語氣或避免歧義。
在以水平書寫模式書寫中文時，這些點位於字元上方，而在以垂直書寫模式書寫時，這些點位於字元左側。
為了使CSS屬性更具通用性，在[CSS文字裝飾模組 Level 3](CSS Text Decoration Module Level 3)中引入了文字強調樣式，文字強調位置和文字強調顏色。
您可以使用除點以外的其他符號，例如circle,triangle或單個字元作為字串，位置和顏色也可以根據其各自的屬性進行調整。
同一規範中還涵蓋了行裝飾，併為開發人員提供了對下劃線和上劃線的更精細控制（在規範的 level 4 中）。但是這對於那些有上升線或下行線的文字來說特別有用，因為它們經常會溢位基線。
CSS文字修飾模組第4級介紹了text-decoration-skip，該控制元件控制跨過字形的上劃線和下劃線的繪製方式。再有，某些事情在英語等語言中發生的頻率較低，但是在很大程度上影響了諸如緬甸語這樣的文字的美觀性。
廣州vi設計公司 http://www.maiqicn.com 我的007辦公資源網 https://www.wode007.com
字型變化
有兩類用於訪問OpenType功能的CSS屬性，即高階屬性和低階屬性。規範建議儘可能使用高階屬性。這主要取決於瀏覽器的支援。
例如，font-variant-east-asian允許控制具有變體的字元的字形形式，例如簡體中文字形與繁體中文字形。它是同一字元，但寫法可能不同。
還有一種font-variant-ligatures（變體連字），它提供了許多預設的字型和上下文形式的選項，如自由discretionary-ligatures或historical-ligatures或contextual。
可通過font-feature-settings訪問低階屬性，你可以在其中使用4個字母的OpenType標記來切換所需的功能（這取決於你的字型是否具有這些功能開頭，但我們假設它具有這些功能） 。
有141個特徵標籤，從可選的分數到對齊，從可選的Ruby表示法到割零。這些CSS屬性與字型檔案本身的功能密切相關，因此，外部依賴性取決於你選擇的字型。