你不知道的CSS國際化

時間 2020-05-07

標籤不知道 css 國際化欄目 CSS 简体版

原文原文鏈接

我遇到過一些人，他們根本不認爲CSS與國際化有關，但若是你仔細想一想，國際化不只僅是把你網站上的內容翻譯成多種語言，而後就收工了。該內容的呈現方式有各類細微的差異，這些細微的差異會影響到母語人士使用您的網站的體驗。css

對於國際化，沒有統一的規範定義，可是W3C提供如下指導：html

國際化是指在設計和開發產品、應用或文檔時，爲不一樣文化、地區或語言的目標受衆提供方便的本地化服務。

這涉及的內容不少，從Unicode和字符編碼的使用，到服務於翻譯內容的技術實現，以及上述內容的呈現方式，都有不少內容要涉及。今天，我只討論與多語言支持有關的CSS相關方面。前端

CSS經過告訴瀏覽器應該如何設置樣式和佈局來描述網頁的表示。咱們可使用多種方法在具備CSS的多語言頁面上將不一樣的樣式應用於不一樣的語言。web

此外，還有一些CSS屬性爲文字和書寫系統提供了佈局和排版功能，這些功能超出了目前在web上常見的基於拉丁語的水平自頂向下的功能。面試

所以，請繫好安全帶，由於這可能最終是一篇冗長的文章。算法

語言相關樣式

你有沒有想過，Chrome瀏覽器是怎麼知道問你要不要翻譯網頁內容的？這是由於 <html> 元素上的 lang 屬性。segmentfault

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-emphasis CSS屬性，你應該能夠看到在 <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的映射，分別是:

top to block-start
right to inline-end
bottom to block-end
left to inline-start

而在尺寸上的映射以下：width 與 inline-size 和 height 與 block-size 的映射。

列表和計數器

數字系統是用來表達數字的書寫系統，即便最經常使用的數字系統是印度教阿拉伯數字系統(0、一、二、3等等)，CSS也容許咱們用其餘數字系統來顯示有序列表。

預約義的計數器樣式可使用 list-style-type 屬性，它涵蓋了從 afar 到 urdu 的174個數字系統。你能夠在MDN中查看完整的列表。

若是您對CSS計數器感興趣，我在去年的某個時候寫了關於它們的文章，其中探討了在繁體中文上下文中使用的「 Heavenly-stem」和「 Earthly-branch」數字系統（以及CSS中的Fizzbuzz實現，由於爲何不）。

文本裝飾

如前所述，東亞語言沒有斜體的概念。相反，咱們有着重點，能夠將它們放置在字符上方或下方以強調文字，加強語氣或避免歧義。

在以水平書寫模式書寫中文時，這些點位於字符上方，而在以垂直書寫模式書寫時，這些點位於字符左側。

爲了使CSS屬性更具通用性，在CSS文本裝飾模塊 Level 3)中引入了文本強調樣式，文本強調位置和文本強調顏色。

您可使用除點之外的其餘符號，例如 circle, triangle或單個字符做爲字符串，位置和顏色也能夠根據其各自的屬性進行調整。

同一規範中還涵蓋了行裝飾，併爲開發人員提供了對下劃線和上劃線的更精細控制（在規範的 level 4 中）。可是這對於那些有上升線或下行線的文字來講特別有用，由於它們常常會溢出基線。

CSS文本修飾模塊第4級介紹了 text-decoration-skip，該控件控制跨過字形的上劃線和下劃線的繪製方式。再有，某些事情在英語等語言中發生的頻率較低，可是在很大程度上影響了諸如緬甸語這樣的文字的美觀性。

字體變化

有兩類用於訪問OpenType功能的CSS屬性，即高級屬性和低級屬性。規範建議儘量使用高級屬性。這主要取決於瀏覽器的支持。

例如，font-variant-east-asian 容許控制具備變體的字符的字形形式，例如簡體中文字形與繁體中文字形。它是同一字符，但寫法可能不一樣。

還有一種 font-variant-ligatures（變體連字），它提供了許多預設的字型和上下文形式的選項，如自由 discretionary-ligatures 或 historical-ligatures 或 contextual。

可經過 font-feature-settings 訪問低級屬性，你能夠在其中使用4個字母的OpenType標記來切換所需的功能（這取決於你的字體是否具備這些功能開頭，但咱們假設它具備這些功能）。

有141個特徵標籤，從可選的分數到對齊，從可選的Ruby表示法到割零。這些CSS屬性與字體文件自己的功能密切相關，所以，外部依賴性取決於你選擇的字體。

結束

這文章子真的很長，因此我將有第二部分來詳細介紹咱們如何使用咱們所涉及的選擇器來創建一個佈局，以確保咱們的佈局即便在語言變化的狀況下也能保持穩健。像Flexbox和Grid這樣的現代佈局屬性很適合這樣的用例。

關於CSS，我以爲最有趣的一點是，咱們能夠經過不一樣的方式將它們結合起來，以達到無數種結果，而目前有500多種CSS屬性，這就有了不少的可能性。我並非說什麼均可以，由於不少時候，有無數種方法能夠達到一樣的結果，並且有些方法比其餘方法更合適。

然而，經過了解每種技術背後的機制、它的優勢和缺點，並瞭解咱們爲何選擇某種方式來作事情，咱們須要作出明智的決定，以肯定哪一種方法最適合咱們的環境。

我仍然相信，在30多年後，網絡仍然是信息媒介，內容是關鍵。所以，不管使用何種語言或文字，內容的表現形式都應該獲得優化。我很高興的是，CSS正在不斷髮展，爲開發者提供了實現這一目標的方法。

不管如何，請繼續關注第2部分。

原文信息：

原文：https://www.chenhuijing.com/b...👾
做者：Chen Hui Jing

文章首發《前端外文精選》微信公衆號

若是對你有所啓發和幫助，能夠點個關注、收藏、轉發，也能夠留言討論，這是對做者的最大鼓勵。

做者簡介：Web前端工程師，全棧開發工程師、持續學習者。

繼續閱讀其餘高贊文章

更多...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。