Concevoir votre application pour le texte bidirectionnelDesign your app for bidirectional text

Concevez votre application pour fournir une prise en charge du texte bidirectionnel afin de pouvoir combiner les scripts de droite à gauche (RTL) et les systèmes d’écriture de gauche à droite (LTR), qui contiennent généralement différents types d’alphabets.Design your app to provide bidirectional text support (BiDi) so that you can combine script from right to left (RTL) and left to right (LTR) writing systems, which generally contain different types of alphabets.

Les systèmes d’écriture de droite à gauche, tels que ceux utilisés au Moyen-Orient, au centre et à l’Asie du Sud et en Afrique, ont des exigences de conception uniques.Right-to-left writing systems, such as those used in the Middle East, Central and South Asia, and in Africa, have unique design requirements. Ces systèmes d’écriture nécessitent une prise en charge du texte bidirectionnel (bidirectionnel).These writing systems require bidirectional text support (BiDi). La prise en charge BiDi est la possibilité d’entrer et d’afficher la disposition du texte dans l’ordre de droite à gauche (RTL) ou de gauche à droite (LTR).BiDi support is the ability to input and display text layout in either right to left (RTL) or left to right (LTR) order.

Au total, neuf langues BiDi sont incluses avec Windows.A total of nine BiDi languages are included with Windows.

  • Deux langues entièrement localisées.Two fully localized languages. Arabe et hébreu.Arabic, and Hebrew.
  • Sept packs d’interface linguistique pour les marchés émergents.Seven Language Interface Packs for emerging markets. Persan, ourdou, dari, kurde central, Sindhi, pendjabi (Pakistan) et ouïgour.Persian, Urdu, Dari, Central Kurdish, Sindhi, Punjabi (Pakistan), and Uyghur.

Cette rubrique contient la philosophie de conception de Windows BiDi et des études de cas qui présentent des considérations relatives à la conception BiDi.This topic contains the Windows BiDi design philosophy, and case studies that show BiDi design considerations.

Éléments de conception bidiBidi design elements

Quatre éléments influencent les décisions de conception BiDi dans Windows.Four elements influence BiDi design decisions in Windows.

  • Mise en miroir de l’interface utilisateur (IU).User interface (UI) mirroring. Le workflow de l’interface utilisateur permet de présenter le contenu de droite à gauche dans sa disposition native.User interface (UI) flow allows right-to-left content to be presented in its native layout. La conception de l’interface utilisateur semble être locale sur des marchés BiDi.UI design feels local to BiDi markets.
  • Cohérence dans l’expérience utilisateur.Consistency in user experience. La conception semble naturelle dans l’orientation de droite à gauche.The design feels natural in right-to-left orientation. Les éléments d’interface utilisateur partagent un sens de disposition cohérent et s’affichent lorsque l’utilisateur les attend.UI elements share a consistent layout direction and appear as the user expects them.
  • Optimisation tactile.Touch optimization. Semblable à l’interface utilisateur tactile dans une interface utilisateur non mise en miroir, les éléments sont faciles à atteindre et ils sont naturels à toucher l’interaction.Similar to touch UI in non-mirrored UI, elements are easy to reach, and they natural to touch interaction.
  • Prise en charge du texte mixte.Mixed text support. La prise en charge de l’orientation du texte permet une bonne présentation du texte mixte (texte en anglais sur les builds BiDi, et vice versa).Text directionality support enables great mixed text presentation (English text on BiDi builds, and vice versa).

Vue d’ensemble de la conception de fonctionnalitésFeature design overview

Windows prend en charge les quatre éléments de conception BiDi.Windows supports the four BiDi design elements. Examinons quelques-unes des principales fonctionnalités importantes de Windows et fournissons un contexte sur la manière dont elles affectent votre application.Let's look at some of the major relevant features in Windows, and provide some context around how they affect your app.

Windows ajuste la direction de la grille typographique de sorte qu’elle se passe de droite à gauche, ce qui signifie que la première vignette sur la grille est placée dans le coin supérieur droit et la dernière vignette en bas à gauche.Windows adjusts the direction of the typographic grid so that it flows from right to left, meaning that the first tile on the grid is placed at the top right corner, and the last tile at the bottom left. Cela correspond au modèle RTL de publications imprimées, telles que les livres et les magazines, où le modèle de lecture commence toujours dans l’angle supérieur droit et progresse vers la gauche.This matches the RTL pattern of printed publications such as books and magazines, where the reading pattern always starts at the top right corner and progresses to the left.

Menu Démarrer bidi menu Démarrer bidi  avec les icônesBiDi start menu BiDi start menu with charms

Pour conserver un workflow cohérent de l’interface utilisateur, le contenu sur les mosaïques conserve 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.To preserve a consistent UI flow, content on tiles retain a right-to-left layout, meaning that the app name and logo are positioned at the bottom right corner of the tile regardless of the app UI language.

Vignette BiDiBiDi tile

Vignette BiDi

Vignette anglaisEnglish tile

Vignette anglais

Recevoir des notifications de vignette qui se lisent correctementGet tile notifications that read correctly

Les vignettes prennent en charge le texte mixte.Tiles have mixed text support. La zone de notification offre une flexibilité intégrée pour ajuster l’alignement du texte en fonction du langage de notification.The notification region has built-in flexibility to adjust the text alignment based on the notification language. Lorsqu’une application envoie des notifications en arabe, en Hébreu ou en autres langues BiDi, le texte est aligné à droite.When an app sends Arabic, Hebrew, or other BiDi language notifications, the text is aligned to the right. Et lorsqu’une notification anglais (ou une autre LTR) arrive, elle s’aligne sur la gauche.And when an English (or other LTR) notification arrives, it will align to the left.

Notifications de vignette

Une expérience utilisateur de droite cohérente et facile à toucherA consistent, easy-to-touch RTL user experience

Chaque élément de l’interface utilisateur de Windows s’ajuste à l’orientation de droite à gauche.Every element in the Windows UI fits into the RTL orientation. Les icônes et les lanceurs ont été positionnés sur le bord gauche de l’écran de sorte qu’ils ne chevauchent pas les résultats de recherche ou ne dégradent pas l’optimisation tactile.Charms and flyouts have been positioned on the left edge of the screen so that they don't overlap search results or degrade touch optimization. Ils peuvent être facilement atteints avec les curseurs.They can be easily reached with the thumbs.

Capture d’écran de la bidirectionnel montrant la capture d’écran de recherche redimensionnée dans le menu volant  de bidi montrant le menu volant d’impression redimensionnéScreenshot of BiDi showing the search flyout resized Screenshot of BiDi showing the print flyout resized

Capture d’écran de la barre bidimensionnelle montrant la  capture d’écran des paramètres du menu décrivant le menu bidirectionnel montrant les barres de l’application redimensionnéesScreenshot of BiDi showing the settings flyout resized Screenshot of BiDi showing the app bars resized

Entrée de texte dans n’importe quelle directionText input in any direction

Windows offre un clavier tactile à l’écran, propre et sans encombrement.Windows offers an on-screen touch keyboard that is clean and clutter-free. Pour les langues BiDi, il existe une clé de contrôle d’orientation du texte qui permet de basculer la direction d’entrée de texte en fonction des besoins.For BiDi languages, there is a text direction control key so that the text input direction can be switched as needed.

Clavier tactile pour la langue BiDi

Utiliser n’importe quelle application dans n’importe quel langageUse any app in any language

Installez et utilisez vos applications favorites dans n’importe quel langage.Install and use your favorite apps in any language. Les applications apparaissent et fonctionnent comme elles le feraient sur des versions non-BiDi de Windows.The apps appear and function as they would on non-BiDi versions of Windows. Les éléments dans les applications sont toujours placés dans une position cohérente et prévisible.Elements within apps are always placed in a consistent and predictable position.

Application en anglais avec contenu BiDi

Afficher les parenthèses correctementDisplay parentheses correctly

Avec l’introduction de l’algorithme de parenthèses bibidis (BPA), les parenthèses jumelées apparaissent toujours correctement, quelles que soient les propriétés d’alignement du texte ou de la langue.With the introduction of the BiDi Parenthesis Algorithm (BPA), paired parentheses always display properly regardless of language or text alignment properties.

Parenthèses incorrectesIncorrect parentheses

Application BiDi avec parenthèses incorrectes

Parenthèses correctesCorrect parentheses

Application BiDi avec parenthèses correctes

TypographieTypography

Windows utilise la police de Segoe UI pour toutes les langues BiDi.Windows uses the Segoe UI font for all BiDi languages. Cette police est mise en forme et mise à l’échelle pour l’interface utilisateur de Windows.This font is shaped and scaled for the Windows UI.

Capture d’écran montrant la police Segoe UI dans la capture d’écran de démarrage  montrant la police arabe Segoe dans l’écran d’accueilScreenshot showing the Segoe UI font on the start screen Screenshot showing the Segoe Arabic font on the start screen

Étude de cas #1 : application de musique BiDiCase study #1: A BiDi music app

Vue d’ensembleOverview

Les applications multimédias font l’essentiel d’un défi de conception intéressant, car les contrôles multimédias sont généralement censés avoir une mise en page de gauche à droite similaire à celle des langues non BiDi.Multimedia apps make for a very interesting design challenge, because media controls are generally expected to have a left-to-right layout similar to that of non-BiDi languages.

Contrôles multimédias de gauche à droite

Contrôles multimédias de droite à gauche

Définition de la direction de l’interface utilisateurEstablishing UI directionality

La conservation du workflow de l’interface utilisateur de droite à gauche est importante pour une conception cohérente des marchés BiDi.Retaining the right-to-left UI flow is important for consistent design for BiDi markets. Il est difficile d’ajouter des éléments qui ont un flux de gauche à droite dans ce contexte, 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 contrôles audio.Adding elements that have left-to-right flow within this context is difficult, because some navigational elements such as the back button may contradict the directional orientation of the back button in the audio controls.

Page de suivi de l’application musicale

Cette application musicale conserve une grille orientée de droite à gauche.This music app retains a right-to-left-oriented grid. Cela donne à l’application une apparence très naturelle pour les utilisateurs qui parcourent déjà cette direction à travers l’interface utilisateur de Windows.This gives the app a very natural feel for users who already navigate in this direction across the Windows UI. Le Flow est conservé en garantissant que les éléments principaux ne sont pas simplement triés de droite à gauche, mais également correctement alignés dans les en-têtes de section pour aider à maintenir le workflow de l’interface utilisateur.The flow is retained by ensuring that the main elements are not just ordered from right to left, but also aligned properly in the section headers to help maintain the UI flow.

Page de l’album de l’application musicale

Gestion du texteText handling

La bio-artiste de la capture d’écran ci-dessus est alignée à gauche, tandis que les autres éléments textuels liés à l’artiste tels que les noms d’albums et de pistes conservent l’alignement à droite.The artist bio in the screenshot above is left-aligned, while other artist-related text pieces such as album and track names preserve right alignment. Le champ bio est un élément de texte assez grand, qui se lit mal lorsqu’il est aligné sur la droite, simplement parce qu’il est difficile d’effectuer le suivi entre les lignes tout en lisant un bloc de texte plus large.The bio field is a fairly large text element, which reads poorly when aligned to the right simply because it's hard to track between the lines while reading a wider text block. En général, tout élément de texte comportant plus de deux ou trois lignes contenant cinq mots ou plus doit être pris en compte pour les exceptions d’alignement similaires, où l’alignement du bloc de texte est opposé à celui de la disposition générale de l’application.In general, any text element with more than two or three lines containing five or more words should be considered for similar alignment exceptions, where the text block alignment is opposite to that of the overall app directional layout.

La manipulation de l’alignement au sein de l’application peut sembler simple, mais elle expose souvent certaines des limites et limitations des moteurs de rendu en termes de positionnement des caractères neutres entre les chaînes BiDi.Manipulating the alignment across the app can look simple, but it often exposes some of the boundaries and limitations of the rendering engines in terms of neutral character placement across BiDi strings. Par exemple, la chaîne suivante peut être affichée différemment en fonction de l’alignement.For example, the following string can display differently based on alignment.

Chaîne anglaise (LTR)English String (LTR) Chaîne hébraïque (RTL)Hebrew String (RTL)
Alignement à gaucheLeft-alignment Hello, World!Hello, World! בוקר טוב!בוקר טוב!
Alignement à droiteRight-alignment ! Hello World!Hello, World !בוקר טוב!בוקר טוב

Pour vous assurer que les informations de l’artiste sont correctement affichées dans l’application musicale, l’équipe de développement a séparé les propriétés de disposition du texte de l’alignement.To ensure that artist information is properly displayed across the music app, the development team separated text layout properties from alignment. En d’autres termes, les informations sur l’artiste peuvent être affichées comme alignées à droite dans la plupart des cas, mais la modification de la disposition des chaînes est définie en fonction du traitement personnalisé en arrière-plan.In other words, the artist info might be displayed as right-aligned in many of the cases, but the string layout adjustment is set based on customized background processing. Le traitement en arrière-plan détermine le meilleur paramètre de disposition directionnelle en fonction du contenu de la chaîne.The background processing determines the best directional layout setting based on the content of the string.

Page de l’artiste de l’application musicale

Par exemple, sans traitement de la disposition des chaînes personnalisées, le nom de l’artiste « The contoso Band ».For example, without custom string layout processing, the artist name "The Contoso Band." s’affiche sous la forme «. La bande de contoso».would appear as ".The Contoso Band".

Prétraitement spécialisé de la direction des chaînesSpecialized string direction preprocessing

Lorsque l’application contacte le serveur pour les métadonnées de média, elle prétraite chaque chaîne avant de l’afficher à l’utilisateur.When the app contacts the server for media metadata, it preprocesses each string prior to displaying it to the user. Au cours de ce prétraitement, l’application effectue également une transformation pour assurer la cohérence de la direction du texte.During this preprocessing, the app also does a transformation to make the text direction consistent. Pour ce faire, il vérifie s’il existe des caractères neutres aux extrémités de la chaîne.To do this, it checks whether there are neutral characters on the ends of the string. En outre, si la direction du texte de la chaîne est opposée à la direction de l’application définie par les paramètres de langue Windows, elle ajoute (et parfois insère) des marqueurs de direction Unicode.Also, if the text direction of the string is opposite to the app direction set by the Windows language settings, then it appends (and sometimes prepends) Unicode direction markers. La fonction de transformation ressemble à ceci.The transformation function looks like this.

string NormalizeTextDirection(string data) 
{
    if (data.Length > 0) {
        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 ont une largeur nulle, donc ils n’ont pas d’impact sur l’espacement des chaînes.The added Unicode characters are zero-width, so they don't impact the spacing of the strings. Ce code entraîne une baisse potentielle des performances, car la détection de la direction d’une chaîne requiert l’exécution de la chaîne jusqu’à ce qu’un caractère non neutre soit rencontré.This code carries a potential performance penalty, since detecting the direction of a string requires running through the string until a non-neutral character is encountered. Chaque caractère dont la neutralité est vérifiée est d’abord comparé à plusieurs plages Unicode. il ne s’agit donc pas d’un contrôle trivial.Each character that's checked for neutrality is first compared against several Unicode ranges as well, so it isn't a trivial check.

Étude de cas #2 : application de courrier bidirectionnelCase study #2: A BiDi mail app

Vue d’ensembleOverview

En termes de spécifications de disposition d’interface utilisateur, un client de messagerie est relativement simple à concevoir.In terms of UI layout requirements, a mail client is fairly simple to design. L’application de messagerie dans Windows est mise en miroir par défaut.The Mail app in Windows is mirrored by default. Du point de vue de la gestion de texte, l’application de messagerie doit disposer d’un affichage de texte et de fonctionnalités de composition plus robustes pour prendre en charge les scénarios de texte mixte.From a text-handling perspective the mail app is required to have more robust text display and composition capabilities in order to accommodate mixed text scenarios.

Définition de la direction de l’interface utilisateurEstablishing UI directionality

La disposition de l’interface utilisateur de l’application de messagerie est mise en miroir.The UI layout for the Mail app is mirrored. Les trois volets ont été reorienté afin que le volet des dossiers soit positionné sur le bord droit de l’écran, puis sur le volet de la liste des éléments de messagerie à gauche, puis dans le volet de composition du courrier électronique.The three panes have been reoriented so that the folder pane is positioned on the right edge of the screen, followed by the mail item list pane to the left, and then the email composition pane.

Application de messagerie en miroir

Des éléments supplémentaires ont été reciblés pour correspondre à l’ensemble du workflow de l’interface utilisateur et à l’optimisation tactile.Additional items have been reoriented to match the overall UI flow, and touch optimization. Celles-ci incluent la barre d’application et les icônes compose, répondre et supprimer.These include the app bar and the compose, reply, and delete icons.

Application de messagerie mise en miroir avec la barre d’application

Gestion du texteText Handling

UIUI

L’alignement du texte dans l’interface utilisateur est généralement aligné à droite.Text alignment across the UI is usually right-aligned. Cela comprend le volet dossier et le volet éléments.This includes the folder pane and items pane. Le volet élément est limité à deux lignes de texte (adresse et titre).The item pane is limited to two lines of text (Address, and Title). Cela est important pour conserver l’alignement de droite à gauche, sans introduire de bloc de texte difficile à lire lorsque la direction du contenu est opposée au déroulement de l’interface utilisateur.This is important for retaining the right-to-left alignment, without introducing a block of text that would be difficult to read when the content direction is opposite to the UI direction flow.

Modification de texteText Editing

La modification de texte nécessite la possibilité de composer le formulaire de droite à gauche et de gauche à droite.Text editing requires the ability to compose in both right-to-left and left-to-right form. En outre, la disposition de la composition doit être conservée à l’aide d’un format — tel que le texte enrichi — qui permet d’enregistrer les informations d’orientation.In addition, the composition layout must be preserved by using a format—such as rich text—that has the ability to save directional information.

Application de messagerie de gauche à droite

Application de messagerie de droite à gauche