沐鳴測速註冊_你不知道的CSS國際化

來源:https://www.chenhuijing.com

作者:Chen Hui Jing

我遇到過一些人,他們根本不認為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-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、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 ,該控件控制跨過字形的上劃線和下劃線的繪製方式。再有,某些事情在英語等語言中發生的頻率較低,但是在很大程度上影響了諸如緬甸語這樣的文字的美觀性。

字體變化

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

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

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

可通過 font-feature-settings 訪問低級屬性,你可以在其中使用4個字母的OpenType標記來切換所需的功能(這取決於你的字體是否具有這些功能開頭,但我們假設它具有這些功能) 。

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

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8820