html布局语言,如何为各种语言调整布局和字体并支持 RTL 布局 (HTML)

如何为各种语言调整布局和字体并支持 RTL 布局 (HTML)

01/28/2016

本文内容

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

通过遵循一些简单的指南在 Windows 应用商店应用中支持本地化的布局和字体。

技术

说明

布局指南

一些语言(如德语和芬兰语)的文本所需的空间比其对应的英语文本所需的空间更多。

请尽可能使用灵活的布局机制，而不要使用绝对定位、固定宽度或固定高度。对于使用 JavaScript 的 Windows 应用商店应用，请使用 CSS 布局机制，例如 -ms-grid 和 –ms-box。使用对称间距和边距，以便针对各种布局方向进行本地化。

你的应用还可以使用 :-ms-lang() 伪类选择器来根据应用的语言调整 CSS 属性，例如特定元素的宽度。为了实现这一点，应用托管进程将根元素的 lang 属性设置为应用语言。

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

一些语言(如阿拉伯语和希伯来语)要求文本布局和应用布局必须采用从右到左 (RTL) 的读取顺序。

采用 JavaScript 编写的、使用 ui-light.css 或 ui-dark.css 样式表的 Windows 应用商店应用可以根据应用语言自动设置其正文布局方向。以下 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 属性或特性。而应使用 direction 属性控制特定组件的对齐方式。

使用 writing-mode 属性在 CSS 中支持垂直文本布局。

镜像图形

如果应用具有必须针对 RTL 进行镜像的图像，则可以使用 CSS 变换在呈现时对图像进行镜像，方法是通过将 .mirrorable 类添加到元素并添加以下 CSS 类：

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

如果应用需要其他图像来正确翻转图像，则可以通过 layoutdir 限定符使用资源管理系统。当应用程序语言设置为 RTL 语言时，系统会选择名为 file.layoutdir-rtl.png 的图像。当图像的某一部分翻转而其他部分不翻转时，可能必须使用此方法。

字体

采用 JavaScript 编写的、使用 ui-light.css 或 ui-dark.css 样式表的 Windows 应用商店应用根据应用语言自动将其字体设置为最合适的字体。应用托管进程将根元素的 lang 特性设置为应用语言。

在单页上显示多种语言的应用应分别针对各语言部分设置 lang 特性。:-ms-lang() 伪类选择器会为页面的每个部分选择正确的字体。

使用 LanguageFont 字体映射 API 以编程方式访问为特定语言建议的字体系列、大小、粗细和样式。LanguageFont 对象提供了对各种类别内容的正确字体信息的访问，这些信息包括 UI 标头、通知、正文文本和用户可编辑的文档正文字体。

备注

相关主题