如何調整不同語言的配置和字型，以及支援 RTL 配置 (HTML)

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

遵循一些簡單的指導方針，在 Windows 市集應用程式中支援當地語系化的配置和字型。

指示

有些語言 (例如德文和芬蘭文) 的文字所需的空間比英文更多。

盡可能使用彈性化配置機制，而非絕對定位、固定寬度或固定高度。針對使用 JavaScript 的 Windows 市集應用程式使用 CSS 配置機制，例如 -ms-grid 和 –ms-box。使用對稱式邊框間距和邊界，啟用不同配置方向的當地語系化。

您的應用程式也可以使用 :-ms-lang() 虛擬類別選取器，根據應用程式的語言來調整 CSS 屬性，例如特定元素的寬度。為了啟用，主控處理程序會將根元素的 lang 屬性設定為應用程式語言。

.item:-ms-lang(de, fi) { width: 350px; }

某些語言 (例如，阿拉伯文和希伯來文) 要求文字配置和應用程式配置必須是從右至左 (RTL) 的讀取順序。

使用 JavaScript 的 Windows 市集應用程式如果使用 ui-light.css 或 ui-dark.css 樣式表，會根據應用程式語言自動設定它們的主體配置方向。下列 CSS 位於 ui-light 和 ui-dark.css 中，您不需要自行撰寫這個 CSS。

body:-ms-lang(ar,he…) { direction: rtl;}

這表示大部分的應用程式配置在系統使用從右至左的語言時都能正確設定。

就像 WinJS.UI 控制項，您的應用程式可以使用 :-ms-lang() 虛擬類別選取器調整實體 CSS 屬性，例如 margin 和 padding。您不需要調整使用 after 和 before 關鍵字的邏輯 CSS 屬性。

不要在 HTML 中使用 align 屬性 (Property) 或屬性 (Attribute)。請改為使用 direction 屬性來控制特定元件的對齊。

使用 writing-mode 屬性支援 CSS 中的垂直文字配置。

如果應用程式含有必須針對 RTL 進行鏡像的影像，您可以使用 CSS 轉換，藉由將 .mirrorable 類別加入您的元素並加入下列 CSS 類別，在轉譯時鏡像影像：

.mirrorable { transform: scaleX(-1); }

如果應用程式需要不同的影像才能正確翻轉影像，可以將資源管理系統與 layoutdir 限定詞搭配使用。系統會在應用程式語言設定為 RTL 語言時，選擇名為 file.layoutdir-rtl.png 的影像。在已翻轉影像的某個部分，但其他部分尚未翻轉時，可能需要這個處理方式。

使用 JavaScript 的 Windows 市集應用程式如果使用 ui-light.css 或 ui-dark.css 樣式表，會根據應用程式語言將字型自動設定為最適當的字型。主控處理程序會將根元素的 lang 屬性設定為應用程式語言。

在單一頁面上顯示多個語言的應用程式應該在每個語言設定區段的 lang 屬性。:-ms-lang() 虛擬類別選取器會針對頁面的每個區段挑選正確的字型。

使用 LanguageFont 字型對應 API，以程式設計方式存取特定語言的建議字型系列、大小、粗細及樣式。LanguageFont 物件會針對各種內容類別 (包括 UI 標頭、通知、內文，以及使用者可以編輯的文件主體字型)，提供正確字型資訊的存取權。