全球資訊網供所有人使用，就在名稱中！ 也就是說，凡是能存取網路的使用者 都能看見你的網站，無論使用者身在何處、使用哪種裝置，或使用哪種語言
回應式設計的目標是讓所有使用者都能存取你的內容。 將同樣的理念運用在人類語言中，是推動國際化的動力來源，讓全球讀者能做好優質的內容和設計。
邏輯屬性
英文的書寫順序是由左至右、由上而下，但並非所有語言都是以這種方式寫成。有些語言 (例如阿拉伯文和希伯來文) 從右到左朗讀，部分日文字體則改為垂直閱讀，而非水平顯示。為了滿足這些書寫模式 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-starttopblock-endbottominline-startleftinline-end您該在 HTML 中加入哪一項屬性，讓國際化更有意義？
englishlanglanguagei18n接下來，請瞭解如何調整網頁層級版面配置 (也稱為巨集版面配置)。