全球資訊網供所有人使用,就在名稱中! 也就是說,凡是能存取網路的使用者 都能看見你的網站,無論使用者身在何處、使用哪種裝置,或使用哪種語言
回應式設計的目標是讓所有使用者都能存取你的內容。 將同樣的理念運用在人類語言中,是推動國際化的動力來源,讓全球讀者能做好優質的內容和設計。
邏輯屬性
英文的書寫順序是由左至右、由上而下,但並非所有語言都是以這種方式寫成。有些語言 (例如阿拉伯文和希伯來文) 從右到左朗讀,部分日文字體則改為垂直閱讀,而非水平顯示。為了滿足這些書寫模式 CSS 推出了邏輯屬性
撰寫 CSS 時,可能會使用方向關鍵字,例如「left」、「right」、「top」和「bottom」。 這些關鍵字指的是使用者裝置的實際配置。
而「邏輯屬性」則是指與內容流相關的方塊邊緣。如果書寫模式有所變更,使用邏輯屬性編寫的 CSS 也會隨之更新。 但答案與方向屬性不符。
方向屬性 margin-left
一律是指內容方塊左側的邊界,邏輯屬性 margin-inline-start
是指以由左至右的語言顯示內容方塊左側的邊界,而內容方塊右側的邊界 (以右至左語言表示)。
為了配合不同的書寫模式進行調整,請避免使用方向屬性。請改用邏輯屬性。
.byline { text-align: right; }
.byline { text-align: end; }
當 CSS 有特定方向值 (例如 left
或 right
) 時,會有對應的邏輯屬性。先前我們取得 margin-left
後,現在也能使用 margin-inline-start
。
在英文這類語言中,文字從左到右排列,inline-start
對應「left」,inline-end
則對應「right」。
同樣地,在英文這類語言中,文字由上而下,則 block-start
對應「top」,而 block-end
則對應「下」。
如果您在 CSS 中使用邏輯屬性,可以使用相同的樣式表來翻譯網頁。即使網頁將網頁內容由右至左或由下翻譯成上文,設計也會配合調整。 您不需要為每種語言分別設計。使用邏輯屬性時,您的設計會回應所有的書寫模式。也就是說,您不必花時間針對每種語言個別設計網站,因此能觸及更多使用者。
根據預設,grid 和 flexbox 等現代 CSS 版面配置技巧會使用邏輯屬性。
如果您從 inline-start
和 block-start
的角度思考,而非 left
和 top
,您會發現這些現代技巧更容易理解。
採用常見模式,例如某些文字旁邊的圖示,或表單欄位旁的標籤。 與其思考「標籤應在右側設有邊界」,請改為思考「標籤的內嵌軸末端應有邊界」。
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>
如果是以德文提供德文版本的連結,請同時使用 hreflang
和 lang
。
這裡的「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
只能套用至 a
和 link
元素。
在設計過程中考慮國際化
設計要翻譯成其他語言和撰寫模式的網站時,請考量下列因素:
- 有些語言 (例如德文) 的常見用法很多,您的介面必須適應這些文字,因此請避免設計狹窄的欄。您也可以使用 CSS 來加入連字號。
- 請確認
line-height
值可以包含重音符號和其他變音符號等字元。即使在英文中看起來沒有問題,這行文字可能會以其他語言重疊。 - 如果您使用網頁字型,請確認字型的字元範圍夠寬,足以涵蓋您要翻譯成哪種語言。
- 不要建立包含文字的圖片。如果搜尋成功,則須為每種語言分別建立圖片。而是應該分隔文字和圖片,並運用 CSS 將文字疊加在圖片上。
從國際角度思考
lang
和 hreflang
等屬性可讓 HTML 的國際化更有意義。同樣地,邏輯屬性可讓 CSS 更靈活調整。
如果你經常考慮 top
、bottom
、left
和 right
這兩個字詞,考慮改用 block start
、block end
、inline start
和 inline end
可能並不容易。但它值得。邏輯屬性是建立真正回應式版面配置的關鍵。
隨堂測驗
測驗您對國際化的相關知識。
英文中,盒子的 right
面是邏輯上的哪邊?
block-start
top
block-end
bottom
inline-start
left
inline-end
您該在 HTML 中加入哪一項屬性,讓國際化更有意義?
english
lang
language
i18n
接下來,請瞭解如何調整網頁層級版面配置 (也稱為巨集版面配置)。