國際化

全球資訊網開放全世界的所有人,就在那裡! 這表示凡是存取您網路的使用者 不論他們身在何處、使用什麼裝置,還是使用的語言。

回應式設計的目標是讓所有人都能瀏覽您的內容。 對人類語言抱持相同的哲學是推動國際化的推動力,為全球觀眾準備內容和設計。

英文從左到右分別從上到下寫 但並非所有語言都是如此 有些語言 (例如阿拉伯文和希伯來文) 會從右至左閱讀 部分日文字體則改為垂直而非水平閱讀。 為了適應這些書寫模式 CSS 導入邏輯屬性

如果您編寫 CSS,可能會使用定向關鍵字,例如「左」、「右」、「頂端」和「底部」。 這些關鍵字是指使用者裝置的實際版面配置。

另一方面,「邏輯屬性」 方塊的邊緣,因為它們與內容流感相關。 如果書寫模式有所變更,使用邏輯屬性撰寫的 CSS 也會隨之更新。 但這並非方向屬性的情況。

方向屬性 margin-left 則一律是指內容方塊左側的邊界 邏輯屬性 margin-inline-start 是指由左至右語言內容方塊左側的邊界。 從右到左的語言顯示內容方塊右側的邊界

如要讓您的設計因應不同的書寫模式,請避免使用方向屬性。請改用邏輯屬性。

錯誤做法
.byline {
 
text-align: right;
}
正確做法
.byline {
 
text-align: end;
}

CSS 有特定方向值 (例如 leftright) 時, 都有對應的邏輯屬性我們過去採用 margin-left 後,現在也包含 margin-inline-start

如果使用英文 (例如英文) 文字從左到右流 inline-start對應「左」而 inline-end 對應「右」。

同樣地,如果使用英文這類語言,文字也從上到下寫, block-start 對應「頂」而 block-end 則對應「底部」。

在裝置畫面中,拉丁文、希伯來文和日文會顯示預留位置文字。箭頭和顏色會跟著文字後面加上區塊和內嵌的 2 向方向關聯。

如果您在 CSS 中使用邏輯屬性,就可以使用相同的樣式表翻譯網頁。 即使系統將網頁翻譯成從右到左或由下往上的語言,但您的設計仍會隨之調整。 您不需要針對每種語言分別設計。 只要使用邏輯屬性,您的設計就能回應所有書寫模式。 這表示您不必花時間分別設計各種設計,即可觸及更多使用者。

根據預設,新型的 CSS 版面配置技術 (例如 Gridflexbox) 會使用邏輯屬性。 如果你想用 inline-startblock-start 取代 lefttop 您會發現這些現代技術很容易理解。

常見的模式,例如部分文字旁的圖示,或表單欄位旁的標籤。 與其想「標籤的右邊應該有利潤空間」,認為「標籤的內嵌軸應該有邊界。」

錯誤做法
label {
 
margin-right: 0.5em;
}
正確做法
label {
 
margin-inline-end: 0.5em;
}

如果將該網頁翻譯成由右到左的語言, 這些樣式不需要更新 您可以在 html 元素上使用 dir 屬性,模擬以由右至左的語言顯示網頁的效果。 如果值為 ltr,表示「從左到右」。「rtl」的值是指「從右到左」。

如果您想嘗試使用文件方向的所有排列方式 (區塊軸) 和寫作模式 (內嵌軸), 請參閱互動式示範

識別網頁語言

建議您在 html 元素上使用 lang 屬性來識別網頁的語言。

<html lang="en">

這個範例是針對英文網頁。還可以指定更精確的條件。以下說明如何宣告網頁使用英文 (美國) 版本:

<html lang="en-us">

因此,宣告文件語言對於搜尋引擎會很有幫助。 此外,螢幕閱讀器和語音助理等輔助技術也非常有用。 只要提供語言中繼資料,就能幫助這類語音合成器正確發音。

lang 屬性可位於任何 HTML 元素,而不只是 html。如果您切換網頁的語言,請註明這項變更。 在這個範例中,其中一個字詞是德文:

<p>I felt some <span lang="de">schadenfreude</span>.</p>

辨識連結文件的語言

還有另一個名為 hreflang 的屬性,可用於連結。 hreflang 採用與 lang 屬性相同的語言代碼標記法,並描述連結文件的語言。 如果網頁有德文的翻譯,連結如下:

<a href="/path/to/german/version" hreflang="de">German version</a>

如果您使用德文文字說明德文版本的連結,請同時使用 hreflanglang。 這裡的「Deutsche Version」文字已標示為德文,而目的地連結也標記為德文:

<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>

您也可以在 link 元素上使用 hreflang 屬性。這會顯示在文件的 head 中:

<link href="/path/to/german/version" rel="alternate" hreflang="de">

但與可位於任何元素的 lang 屬性不同,hreflang 只能套用至 alink 元素。

在設計中考量國際化

設計需要翻譯成其他語言和書寫模式的網站時,請考慮以下因素:

  • 某些語言 (例如德文) 有很長的用詞。介面必須根據這些字詞進行調整,因此請避免設計狹窄的欄。您也可以使用 CSS 加入連字號
  • 請確認 line-height 值可以包含重音等字元,以英文看起來沒問題的一行文字,可能以其他語言重複出現。
  • 使用網路字型時,請確認文字範圍足以涵蓋您要翻譯的語言。
  • 不要建立包含文字的圖片。如要加入這類內容,您必須針對每種語言分別建立圖片。相反地,您可以將文字和圖片分開,再透過 CSS 將文字重疊在圖片上。

從國際角度思考

使用 langhreflang 這類屬性,可讓 HTML 對國際化更具意義。 同樣地,邏輯屬性可讓 CSS 變得更容易調整。

如果您習慣使用 topbottomleftright 可能很難改為考慮 block startblock endinline startinline end 但絕對值得。邏輯屬性是建立真正回應式版面配置的關鍵。

隨堂測驗

測試你對國際化的相關知識。

英文說方框的 right 面,邏輯是哪一面?

inline-end
block-end
block-start
inline-start

你該在 HTML 中加入哪一項屬性,才能使這個世界更適合國際化?

language
english
lang
i18n

接下來,您將會學習如何使用網頁層級版面配置 (又稱為巨集版面配置)。