Как настроить макет и шрифты для различных языков и обеспечить поддержку макетов с написанием справа налево (HTML)
[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]
Для поддержки локализованных макетов и шрифтов в вашем приложении Магазина Windows следуйте нескольким простым инструкциям.
Технологии
Инструкции
Инструкции по макету
В некоторых языках (например, немецком и финском) для размещения текста требуется больше места, чем в английском языке.
По возможности используйте гибкие механизмы макета вместо абсолютного позиционирования и фиксированной ширины или высоты. Для приложений Магазина Windows на JavaScript применяйте такие механизмы макета CSS, как –ms-grid и –ms-box. Используйте симметричные поля и отбивку для локализации различных направлений макета.
В приложении также можно использовать селектор псевдокласса :-ms-lang(), чтобы настраивать свойства CSS, например ширину, для конкретных элементов в зависимости от языка приложения. Для включения этой возможности хост приложений присваивает атрибуту lang корневого элемента значение языка приложения.
.item:-ms-lang(de, fi) { width: 350px; }
В случае некоторых языков (например, арабского и иврита) необходимо, чтобы макет текста и приложения читались справа налево.
Приложения Магазина Windows на JavaScript, в которых применяются таблицы стилей ui-light.css или ui-dark.css, имеют автоматически установленное направление текста макета, соответствующее языку приложения. Следующая таблица CSS находится в файлах ui-light.css и ui-dark.css, и вам не нужно создавать ее самостоятельно.
body:-ms-lang(ar,he…) { direction: rtl;}
Это означает, что большая часть макетов приложений установлена правильно, когда в системе используется язык с написанием справа налево.
Подобно элементам управления WinJS.UI, ваше приложение может использовать селектор псевдокласса :-ms-lang() для настройки физических свойств CSS, таких как margin и padding. Не требуют настройки логические свойства CSS, в которых используются ключевые слова, например after и before.
Не используйте свойство align или атрибут в HTML. Вместо этого для управления выравниванием специфических компонентов применяйте свойство direction.
Для поддержки вертикальных текстовых макетов в CSS используйте свойство writing-mode.
Зеркальное отображение изображений
Если ваше приложение содержит изображения, которые должны быть отражены справа налево, можно воспользоваться преобразованиями CSS, чтобы зеркально отразить их во время отрисовки с помощью добавления класса .mirrorable к вашим элементам, а также следующего класса CSS:
.mirrorable { transform: scaleX(-1); }
Если вашему приложению требуется другое изображение для правильного отражения, можно использовать систему управления ресурсами с квалификатором layoutdir. Система выбирает изображение с именем file.layoutdir-rtl.png, когда в качестве языка приложения задан язык с написанием справа налево. Этот подход может применяться, если одна часть изображения отражается, а другая нет.
Шрифты
Приложения Магазина Windows на JavaScript, в которых применяются таблицы стилей ui-light.css или ui-dark.css, имеют автоматически установленный наиболее подходящий шрифт, соответствующий языку приложения. Хост приложений устанавливает для атрибута lang корневого элемента значение языка приложения.
Приложения, которые на одной странице отображают текст на нескольких языках, должны устанавливать атрибут lang для каждой части текста, написанной на одном языке. Селектор псевдокласса :-ms-lang() выбирает правильный шрифт для каждой части страницы.
Используйте API сопоставления шрифтов LanguageFont для программного доступа к рекомендуемому семейству, размеру, насыщенности и стилю шрифта определенного языка. Объект LanguageFont предоставляет доступ к нужной информации о шрифте для различных категорий содержимого, включая заголовки, уведомления, текст пользовательского интерфейса и шрифты доступных для редактирования текстов.