How to adjust layout and fonts for various languages, and support RTL layouts (HTML)
Support localized layouts and fonts in your Windows Store apps by following a few simple guidelines.
Some languages, such as German and Finnish, require more space than English for their text.
Your app can also use the :-ms-lang() pseudo-class selector to adjust CSS properties such as width on particular elements based on the language of the app. To enable this, the App Host sets the root element's lang attribute to the app language.
Some languages, such as Arabic and Hebrew, require that text layout and app layout must be in right-to-left (RTL) reading order.
This means that most app layouts are set correctly when the system uses a right-to-left language.
Like WinJS.UI controls, your app can use the :-ms-lang() pseudo-class selector to adjust physical CSS properties, such as margin and padding. You don't need to adjust logical CSS properties that use keywords such as after and before.
Don't use the align property or attribute in HTML. Instead, use the direction property to control alignment of particular components.
Use the writing-mode property to support vertical text layouts in CSS.
If your app has images that must be mirrored for RTL, you can use CSS transforms to mirror your images at rendering time by adding a .mirrorable class to your elements and adding the following CSS class:
If your app requires a different image to flip the image correctly, you can use the resource management system with the layoutdir qualifier. The system chooses an image named file.layoutdir-rtl.png when the application language is set to an RTL language. This approach may be necessary when one part of the image is flipped, but another part isn't.
Apps that display multiple languages on a single page should set the lang attribute for the section in each language. The :-ms-lang() pseudo-class selector picks up the correct font for each section of the page.
Use the LanguageFont font-mapping APIs for programmatic access to the recommended font family, size, weight, and style for a particular language. The LanguageFont object provides access to the correct font info for various categories of content, including UI headers, notifications, body text, and user-editable document body fonts.