Langage: HTML | XAML

Comment prendre en charge l’interface utilisateur bidirectionnelle (HTML)

Applies to Windows and Windows Phone

Concevez vos applications pour fournir la prise en charge de texte bidirectionnel (BiDi) pour les systèmes d’écriture de la droite vers la gauche.

Introduction

Microsoft a une longue expérience dans la production de logiciels pour le Moyen-Orient et d’autres régions qui utilisent un système d’écriture de la droite vers la gauche. Les exigences de la conception pour cette partie du monde sont uniques parce que les systèmes d’écriture couramment utilisés dans cette région nécessitent la prise en charge de texte bidirectionnel (BiDi). Il s’agit de la capacité d’entrer et d’afficher des dispositions de texte soit de droite à gauche (RTL) soit de gauche à droite (LTR). Windows 3.1 a été la première version de Windows à intégrer la prise en charge des langues BiDi. Dans Windows 98, l’orientation de l’interface utilisateur a été mise en miroir afin que l’expérience utilisateur paraisse plus naturelle aux locuteurs de l’arabe ou de l’hébreu.

Windows 8 offre une expérience BiDi sans compromis. Chaque élément dans la nouvelle interface utilisateur Windows est conçu pour une expérience utilisateur riche et immersive de droite à gauche, qui présente ces langues dans leur état le plus naturel.

Au total, neuf langues BiDi sont incluses à partir de Windows 8 :

  • Deux langues entièrement localisées (arabe, hébreu).
  • Sept packs linguistiques pour les marchés émergents (persan, ourdou, dari, kurde central, sindhi, pendjabi (Pakistan) et ouïghour). Deux de ces langues sont nouvelles et exclusives à Windows 8.

Conception d’applications du Windows Store pour les marchés BiDi

Voici la philosophie de conception BiDi de Windows ainsi que des études de cas illustrant les considérations liées à la conception BiDi.

Éléments de conception BiDi

Quatre éléments influencent les décisions de conception BiDi dans Windows :

  • Mise en miroir de l’interface utilisateur. Le flux de l’interface utilisateur permet de présenter du contenu de droite à gauche dans sa mise en page native. L’apparence de l’interface utilisateur doit être adaptée aux marchés BiDi.
  • Cohérence de l’expérience utilisateur. L’apparence semble naturelle dans l’orientation de droite à gauche. Les éléments de l’interface utilisateur partagent une orientation cohérente et apparaissent comme attendu par l’utilisateur.
  • Optimisation tactile. Similaire à l’expérience tactile dans une interface utilisateur non mise en miroir, les éléments sont faciles à atteindre et semblent naturels pour l’interaction tactile.
  • Prise en charge de texte mixte. La prise en charge de la directionnalité du texte permet une très bonne présentation de texte mixte (texte anglais dans des builds BiDi et vice versa).

Vue d’ensemble de la conception des fonctionnalités

La plateforme Windows prend en charge les quatre éléments de la conception BiDi énumérés ci-dessus. Nous allons examiner quelques-unes des principales fonctions pertinentes de Windows et fournir un contexte à leur impact sur votre application.

Naviguer dans la direction qui semble naturelle.

Nous avons modifié l’orientation de la grille pour un flux de droite à gauche, ce qui signifie que la première vignette de la grille est placée dans le coin supérieur droit, et la dernière en bas à gauche. Cela présente les informations dans un modèle déjà familier aux utilisateurs de publications imprimées, telles que les livres et magazines, où le mode de lecture commence toujours par le coin supérieur droit et progresse vers la gauche.

Menu Démarrer BiDi Menu Démarrer BiDi avec des icônes

Afin de préserver un flux constant de l’interface utilisateur, les vignettes placées sur la grille conservent toujours une disposition de droite à gauche, ce qui signifie que le nom et le logo de l’application sont positionnés dans le coin inférieur droit de la vignette, quelle que soit la langue de l’interface utilisateur de l’application.

Vignette BiDi :

Vignette BiDi

Vignette anglais :

Vignette anglais

Recevoir des notifications par vignette qui se lisent correctement.

Les vignettes prennent en charge le texte mixte. La région de notification comporte la flexibilité intégrée d’adapter l’alignement du texte selon la langue de la notification. Lorsqu’une application envoie des notifications en arabe, hébreu ou toute autre langue BiDi, le texte est aligné à droite et quand une notification en anglais (ou autre langue LTR) arrive, celle-ci est alignée à gauche.

Notifications par vignette

Une expérience utilisateur DàG conviviale et cohérente.

Chaque élément dans la nouvelle interface utilisateur Windows s’inscrit dans l’orientation RTL. Les icônes et les menus volants ont été placés sur le bord gauche de l’écran afin qu’ils ne chevauchent pas les résultats de la recherche ni ne dégradent l’optimisation tactile. Ils sont facilement accessibles avec les pouces.

Capture d’écran BiDi Capture d’écran BiDi

Capture d’écran BiDi Capture d’écran BiDi

Saisie de texte dans n’importe quelle direction.

Windows offre un clavier tactile visuel clair et sans encombrement. Pour les langues BiDi, il y a une touche de commande de direction du texte afin que l’orientation de saisie du texte puisse être commutée au besoin.

Clavier tactile pour langue BiDi

Utilisez n’importe quelle application dans n’importe quelle langue.

Installez et utilisez vos applications préférées dans n’importe quelle langue. Les applications apparaissent et fonctionnent comme elles le feraient sur les versions de Windows non-BIDi. Les éléments dans les applications sont toujours placés dans une position cohérente et prévisible.

Application en langue anglaise affichant un contenu BiDi

Afficher les parenthèses correctement.

Avec l’introduction de l’algorithme de parenthèse BiDi (BPA), les parenthèses appariées s’affichent toujours correctement indépendamment des propriétés d’alignement du texte ou de la langue.

Parenthèses incorrectes :

Application BiDi avec des parenthèses incorrectes

Parenthèses correctes :

Application BiDi avec des parenthèses correctes

Nouvelle police.

Windows utilise la nouvelle police d’interface utilisateur Segoe pour toutes les langues BiDi. Cette nouvelle police est mise en forme et à l’échelle pour la nouvelle interface utilisateur Windows.

Police d’interface utilisateur Segoe pour langue BiDi Police d’interface utilisateur Segoe pour langue BiDi

Étude de cas n°1 : application de musique BiDi A

Vue d’ensemble

Les applications multimédias introduisent un défi de conception très intéressant, car les commandes multimédias ont généralement une disposition de gauche à droite semblable à celle des langues non-BiDi.

Contrôles multimédias de gauche à droite Contrôles multimédias de droite à gauche

Établissement de la directionnalité de l’interface utilisateur

Le maintien du flux de l’interface utilisateur de droite à gauche est essentiel pour la cohérence de la conception pour les marchés BiDi. L’ajout d’éléments qui ont un flux de gauche à droite dans ce contexte est délicat, car certains éléments de navigation tels que le bouton Précédent peuvent contredire l’orientation directionnelle du bouton Précédent dans les commandes audio.

Page de suivi de l’application de musique

L’application Microsoft Music conserve une grille orientée de droite à gauche. Elle donne à l’application une sensation très naturelle pour les utilisateurs qui naviguent déjà dans cette direction sur la nouvelle interface utilisateur Windows. Le flux est maintenu de sorte que les principaux éléments soient non seulement ordonnés de droite à gauche, mais aussi alignés correctement dans les en-têtes de section afin de conserver le flux de l’interface utilisateur.

Page de l’album de l’application de musique

Traitement du texte

La biographie de l’artiste dans l’écran ci-dessus est alignée à gauche, tandis que d’autres morceaux de texte liés à l’artiste, tels que les noms d’album et de piste conservent l’alignement à droite. Le champ biographie est un élément de texte assez grand qui se lit mal s’il est aligné à droite tout simplement parce que le passage d’une ligne à la suivante n’est pas aisé lors de la lecture d’un bloc de texte plus important. En règle générale, tout élément de texte ayant plus de deux ou trois lignes de cinq mots au moins chacune doit être pris en considération pour des exceptions d’alignement similaires, où l’alignement du bloc de texte est opposé à celui de la disposition directionnelle générale de l’application.

La manipulation de l’alignement dans l’application peut paraître simple, mais révèle souvent des limites et contraintes de rendu des différents moteurs en ce qui concerne le placement des caractères neutres dans les chaînes BiDi. Par exemple, la chaîne suivante peut s’afficher différemment selon l’alignement :

Chaîne en anglais (GàD)Chaîne en hébreu (DàG)
Alignement à gaucheHello World!בוקר טוב!
Alignement à droite!Hello World!בוקר טוב

 

Afin d’assurer que les informations sur l’artiste s’affichent correctement dans l’ensemble de l’application de musique, l’équipe de développement a séparé les propriétés de disposition du texte et l’alignement. En d’autres termes, les informations sur l’artiste peuvent être affichées comme alignées à droite dans bien des cas, mais le réglage de la disposition de la chaîne est défini selon un traitement de fond personnalisé. Le traitement de fond détermine le paramétrage de la disposition directionnelle le plus adapté en fonction du contenu de la chaîne.

Page de l’artiste de l’application de musique

Exemple : sans traitement personnalisé de la disposition de la chaîne, le nom de l’artiste "The Contoso Band." s’afficherait sous la forme ".The Contoso Band".

Prétraitement spécialisé de direction de chaîne

Lorsque l’application interroge nos serveurs pour les métadonnées multimédias, elle prétraite chaque chaîne avant de l’afficher à l’utilisateur. Au cours de ce prétraitement, l’application modifie aussi l’orientation du texte pour la rendre cohérente. Pour ce faire, elle vérifie s’il existe des caractères neutres aux extrémités de la chaîne. Par ailleurs, si l’orientation du texte de la chaîne est opposée à celle de l’application définie par les paramètres linguistiques de Windows, elle ajoute en fin (et parfois en début) de chaîne des marqueurs de direction Unicode. La fonction de transformation ressemble à ceci en JavaScript :


function normalizeTextDirection(data) {
    if (data) {
        var lastCharacterDirection = DetectCharacterDirection(data[data.length - 1]);

        // If the last character has strong directionality (direction is not null), then the text direction for the string is already consistent.
        if (!lastCharacterDirection) {
            // If the last character has no directionality (neutral character, direction is null), then we may need to add a direction marker to
            // ensure that the last character doesn't inherit directionality from the outside context.
            var appTextDirection = GetAppTextDirection(); // checks the <html> element's "dir" attribute.
            var dataTextDirection = DetectStringDirection(data); // Run through the string until a non-neutral character is encountered,
                                                                 // which determines the text direction.

            if (appTextDirection !== dataTextDirection) {
                // Add a direction marker only if the data text runs opposite to the directionality of the app as a whole,
                // which would cause the neutral characters at the ends to flip.
                var directionMarkerCharacter =
                    dataTextDirection === TextDirections.RightToLeft ?
                        UnicodeDirectionMarkers.RightToLeftDirectionMarker : // "\u200F"
                        UnicodeDirectionMarkers.LeftToRightDirectionMarker; // "\u200E"

                data += directionMarkerCharacter;

                // Prepend the direction marker if the data text begins with a neutral character.
                var firstCharacterDirection = DetectCharacterDirection(data[0]);
                if (!firstCharacterDirection) {
                    data = directionMarkerCharacter + data;
                }
            }
        }
    }

    return data;
}

Les caractères Unicode ajoutés sont des caractères de largeur nulle et, par conséquent, n’ont aucune incidence sur l’espacement des chaînes. Ce code pénalise potentiellement les performances étant donné que détecter la direction d’une chaîne exige de parcourir la chaîne jusqu’à ce qu’un caractère non neutre soit rencontré. Chaque caractère qui est contrôlé pour la neutralité est tout d’abord comparé à plusieurs plages Unicode ; la vérification n’est donc pas triviale.

Étude de cas n°2 : app de messagerie BiDi A

Vue d’ensemble

En ce qui concerne les exigences de disposition de l’interface utilisateur, un client de messagerie est relativement simple à concevoir. L’application Microsoft Mail fournie avec Windows est mise en miroir par défaut. Du point de vue de la gestion du texte, l’application de messagerie doit disposer de capacités de composition et d’affichage du texte plus robustes afin de prendre en charge les scénarios de texte mixte.

Établissement de la directionnalité de l’interface utilisateur

La disposition de l’interface utilisateur pour l’application Microsoft Mail est mise en miroir. Les trois volets ont été réorientés afin que le volet des dossiers soit positionné sur le bord droit de l’écran, suivi par le volet de liste des éléments de courrier à gauche, puis par le volet de composition du courrier.

Application de messagerie en miroir

Des éléments supplémentaires ont été réorientés de manière à correspondre au flux global de l’interface utilisateur et à l’optimisation tactile. Ces éléments sont notamment la barre de l’application ainsi que les icônes Message, Répondre et Supprimer.

Application de messagerie en miroir avec barre de l’application

Traitement du texte

Interface utilisateur

L’alignement du texte dans l’interface utilisateur est généralement à droite. Cela inclut le volet des dossiers et le volet des éléments. Le volet des éléments est limité à deux lignes de texte (adresse et titre). Cela est essentiel pour conserver l’alignement de droite à gauche sans introduire un bloc de texte qui serait difficile à lire quand la direction du contenu est opposée au flux directionnel de l’interface utilisateur

Édition du texte

L’édition du texte nécessite la capacité à composer aussi bien de droite à gauche que de gauche à droite. En outre, la mise en page de la composition doit être préservée en utilisant un format, tel que le texte enrichi, qui a la capacité d’enregistrer les informations directionnelles.

Application de messagerie de gauche à droite

Application de messagerie de droite à gauche

 

 

Afficher:
© 2015 Microsoft