Comment ajuster la disposition et les polices pour différentes langues et prendre en charge les dispositions RTL (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Pour la prise en charge des mises en page et des polices localisées dans vos applications du Windows Store, suivez ces quelques recommandations simples.
Technologies
Instructions
Recommandations en matière de disposition
Certaines langues, comme l’allemand et le finnois, nécessitent plus d’espace que l’anglais pour leur texte.
Dans la mesure du possible, utilisez des mécanismes de disposition flexibles à la place d’un positionnement absolu, de largeurs fixes ou de hauteurs fixes. Pour les applications du Windows Store en JavaScript, utilisez les mécanismes de mise en page CSS, tels que -ms-grid et –ms-box. Utilisez un remplissage et des marges symétriques pour permettre la localisation quel que soit le sens de la disposition.
Votre application peut également utiliser le sélecteur de pseudo-classe :-ms-lang() pour ajuster des propriétés CSS comme la largeur sur des éléments particuliers selon la langue de l’interface. Pour cela, l’hôte de l’application définit l’attribut lang de l’élément racine sur la langue de l’application.
.item:-ms-lang(de, fi) { width: 350px; }
Pour certaines langues, telles que l’arabe et l’hébreu, la disposition du texte et de l’application doit être dans le sens de lecture de droite à gauche.
Le sens de mise en page du corps des applications du Windows Store en JavaScript qui utilisent les feuilles de style ui-light.css ou ui-dark.css est défini automatiquement en fonction de la langue de l’interface. La feuille de style CSS suivante se trouve dans ui-light et ui-dark.css, et vous n’avez pas besoin de l’écrire vous-même.
body:-ms-lang(ar,he…) { direction: rtl;}
Cela signifie que la plupart des dispositions d’application sont définies correctement lorsque le système utilise une langue qui s’écrit et se lit de droite à gauche.
Comme les contrôles WinJS.UI, votre application peut utiliser le sélecteur de pseudo-classe :-ms-lang() pour ajuster les propriétés CSS physiques, telles que margin et padding. Vous n’avez pas besoin d’ajuster les propriétés CSS logiques qui utilisent des mots-clés tels que after et before.
N’utilisez pas l’attribut ni la propriété align en HTML. À la place, utilisez la propriété direction pour contrôler l’alignement de composants particuliers.
Utilisez la propriété writing-mode pour prendre en charge les dispositions de texte verticales dans la feuille de style CSS.
Mise en miroir des images
Si votre application comporte des images qui doivent être mises en miroir pour la disposition de droite à gauche, vous pouvez utiliser des transformations CSS pour mettre en miroir vos images au moment du rendu en ajoutant une classe .mirrorable à vos éléments et en ajoutant la classe CSS suivante :
.mirrorable { transform: scaleX(-1); }
Si votre application requiert une autre image qui pivotera correctement, utilisez le système de gestion des ressources avec le qualificateur layoutdir. Le système choisit une image nommée file.layoutdir-rtl.png lorsque la langue de l’application est définie sur une langue qui s’écrit et se lit de droite à gauche. Cette approche peut s’avérer nécessaire lorsqu’une certaine partie de l’image est pivotée, alors qu’une autre partie ne l’est pas.
Polices
Les applications du Windows Store en JavaScript qui utilisent les feuilles de style ui-light.css ou ui-dark.css ont leur police définie automatiquement sur la police la plus appropriée en fonction de la langue de l’application. L’hôte d’application définit l’attribut lang de l’élément racine sur la langue de l’application.
Les applications qui affichent plusieurs langues sur une même page doivent définir l’attribut lang pour chaque section dans une langue différente. Le sélecteur de pseudo-classe :-ms-lang() sélectionne la police appropriée pour chaque section de la page.
Utilisez les API de mappage de police LanguageFont pour l’accès par programme à la gamme de polices, à la taille, au poids et au style recommandés pour une langue particulière. L’objet LanguageFont assure l’accès aux informations de police appropriées pour diverses catégories de contenu, notamment les en-têtes d’interface utilisateur, les notifications, le texte de corps et les polices de corps de document modifiables par l’utilisateur.