全球使用者都能存取網路，這也是「全球資訊網」名稱的由來！ 也就是說，只要能連上網際網路，無論身在何處、使用哪種裝置或說哪種語言，都能存取您的網站。
回應式設計的目標是讓所有人都能存取內容。 將同樣的哲學套用至人類語言，就是國際化背後的驅動力，也就是為全球觀眾準備內容和設計。
邏輯屬性
英文的書寫方向是由左至右、由上而下，但並非所有語言都是如此。 有些語言 (例如阿拉伯文和希伯來文) 的閱讀方向是從右到左，而且部分日文字體是直向而非橫向閱讀。為配合這些書寫模式，CSS 中導入了邏輯屬性。
如果您編寫 CSS，可能使用過「左」、「右」、「上」和「下」等方向關鍵字。 這些關鍵字是指使用者裝置的實體配置。
另一方面，邏輯屬性是指與內容流程相關的方塊邊緣。如果書寫模式變更，以邏輯屬性編寫的 CSS 會隨之更新。 但方向性屬性並非如此。
方向性屬性 margin-left 一律是指內容方塊左側的邊界，而邏輯屬性 margin-inline-start 則是指從左到右語言中內容方塊左側的邊界，以及從右到左語言中內容方塊右側的邊界。
為確保設計能配合不同書寫模式調整，請避免使用方向性屬性。請改用邏輯屬性。
.byline { text-align: right; }
.byline { text-align: end; }
如果 CSS 具有特定方向值 (例如 left 或 right)，就會有對應的邏輯屬性。我們過去只有 margin-left，現在則有 margin-inline-start。
在英文等文字由左至右流動的語言中，inline-start 對應「左」，inline-end 對應「右」。
同樣地，在英文等文字由上而下書寫的語言中，block-start 對應「頂端」，block-end 則對應「底部」。
如果您在 CSS 中使用邏輯屬性，就能為網頁翻譯使用相同的樣式表。即使網頁翻譯成從右至左或從下至上書寫的語言，設計也會相應調整。 不必為每種語言分別設計。 使用邏輯屬性，設計就能因應各種書寫模式。也就是說，您不必為每種語言分別製作設計，就能觸及更多人。
格線和 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-starttopblock-endbottominline-startleftinline-end您應該在 HTML 中新增哪個屬性，讓國際化更具意義？
englishlanglanguagei18n接下來，您將瞭解如何處理頁面層級的版面配置，也就是巨集版面配置。