How to adjust layout and fonts for various languages, and support RTL layouts (HTML)
[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]
Support localized layouts and fonts in your Windows Store apps by following a few simple guidelines.
Technologies
Instructions
Layout guidelines
Some languages, such as German and Finnish, require more space than English for their text.
When possible, use flexible layout mechanisms instead of absolute positioning, fixed widths, or fixed heights. For Windows Store apps using JavaScript, use CSS layout mechanisms such as -ms-grid and –ms-box. Use symmetrical padding and margins to enable localization for various layout directions.
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.
.item:-ms-lang(de, fi) { width: 350px; }
Some languages, such as Arabic and Hebrew, require that text layout and app layout must be in right-to-left (RTL) reading order.
Windows Store apps using JavaScript that use the ui-light.css or ui-dark.css style sheets have their body layout direction set automatically, based on the app language. The following CSS is in ui-light and ui-dark.css, and you don't need to write it yourself.
body:-ms-lang(ar,he…) { direction: rtl;}
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.
Mirroring images
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:
.mirrorable { transform: scaleX(-1); }
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.
Fonts
Windows Store apps using JavaScript that use the ui-light.css or ui-dark.css style sheets have their font set automatically to the most appropriate font, based on the app language. The App Host sets the root element's lang attribute to the app language.
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.