Entwerfen einer App für bidirektionalen TextDesign your app for bidirectional text

Entwerfen Sie Ihre APP für die Bereitstellung von bidirektionaler Textunterstützung, sodass Sie Skripts von rechts nach links (RTL) und von links nach rechts (LTR)-Schreibsystemen kombinieren können, die in der Regel unterschiedliche Arten von Alphabets enthalten.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.

Schreibsysteme von rechts nach links, z. b. solche, die in den Regionen Naher Osten, zentral und Asien und in Afrika verwendet werden, haben besondere Entwurfs Anforderungen.Right-to-left writing systems, such as those used in the Middle East, Central and South Asia, and in Africa, have unique design requirements. Diese Schreibsysteme erfordern bidirektionale Textunterstützung.These writing systems require bidirectional text support (BiDi). Die Bidi-Unterstützung ist die Möglichkeit, Text Layout in der Reihenfolge von rechts nach links (RTL) oder von links nach rechts (LTR) einzugeben und anzuzeigen.BiDi support is the ability to input and display text layout in either right to left (RTL) or left to right (LTR) order.

In Windows sind insgesamt neun Bidi-Sprachen enthalten.A total of nine BiDi languages are included with Windows.

  • Zwei vollständig lokalisierte Sprachen.Two fully localized languages. Arabisch und Hebräisch.Arabic, and Hebrew.
  • Sieben Sprachschnittstellen Pakete für neue Märkte.Seven Language Interface Packs for emerging markets. Persian, Urdu, Dari, zentral Kurdisch, Sindhi, Punjabi (Pakistan) und Uyghur.Persian, Urdu, Dari, Central Kurdish, Sindhi, Punjabi (Pakistan), and Uyghur.

Dieses Thema enthält die Windows-Bidi-Entwurfs Philosophie und Fallstudien, die Überlegungen zum Bidi-Entwurf zeigen.This topic contains the Windows BiDi design philosophy, and case studies that show BiDi design considerations.

Bidi-Entwurfs ElementeBidi design elements

Vier Elemente beeinflussen Bidi-Entwurfsentscheidungen in Windows.Four elements influence BiDi design decisions in Windows.

  • Benutzeroberflächen Spiegelung.User interface (UI) mirroring. Der Benutzeroberflächen Fluss ermöglicht das darstellen von Inhalten von rechts nach links im systemeigenen Layout.User interface (UI) flow allows right-to-left content to be presented in its native layout. Der Benutzeroberflächen Entwurf ist für einen lokalen Bidi-Markt konzipiert.UI design feels local to BiDi markets.
  • Konsistenz in der BenutzerLeistung.Consistency in user experience. Der Entwurf ist naturgemäß von rechts nach links.The design feels natural in right-to-left orientation. Benutzeroberflächen Elemente haben eine konsistente Layoutrichtung und werden angezeigt, wenn der Benutzer Sie erwartet.UI elements share a consistent layout direction and appear as the user expects them.
  • Berührungs Optimierung.Touch optimization. Ähnlich wie bei der Touchscreen-Benutzeroberfläche in einer nicht gespiegelten Benutzeroberfläche können Elemente problemlos erreicht werden, und Sie können die Interaktion natürlich berühren.Similar to touch UI in non-mirrored UI, elements are easy to reach, and they natural to touch interaction.
  • Unterstützung für gemischtes Text.Mixed text support. Die Unterstützung von Text directionalität ermöglicht eine hervorragend gemischte Textpräsentation (englischer Text in Bidi-Builds und umgekehrt).Text directionality support enables great mixed text presentation (English text on BiDi builds, and vice versa).

Übersicht über den Funktions EntwurfFeature design overview

Windows unterstützt die vier Bidi-Entwurfs Elemente.Windows supports the four BiDi design elements. Sehen wir uns einige der wichtigsten wichtigen Features von Windows an, und geben Sie einen Kontext für Ihre APP an.Let's look at some of the major relevant features in Windows, and provide some context around how they affect your app.

Windows passt die Richtung des typografischen Rasters so an, dass Sie von rechts nach links verläuft. das bedeutet, dass die erste Kachel im Raster in der oberen rechten Ecke und die letzte Kachel unten links platziert wird.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. Dies entspricht dem RTL-Muster von gedruckten Veröffentlichungen, wie z. b. Büchern und Zeitschriften, bei denen das Lese Muster immer in der oberen rechten Ecke beginnt und nach links verläuft.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.

Bidi-Startmenü  Bidi-Startmenü mit CharmsBiDi start menu BiDi start menu with charms

Um einen konsistenten Benutzeroberflächen Fluss beizubehalten, behalten Inhalte auf Kacheln ein Layout von rechts nach links. Dies bedeutet, dass der Name und das Logo der APP unabhängig von der Benutzeroberflächen Sprache der app in der unteren rechten Ecke der Kachel positioniert werden.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.

Bidi-KachelBiDi tile

Bidi-Kachel

Englische KachelEnglish tile

Englische Kachel

Erhalten von ordnungsgemäß gelesenen Kachel BenachrichtigungenGet tile notifications that read correctly

Kacheln verfügen über gemischte Textunterstützung.Tiles have mixed text support. Der Benachrichtigungsbereich verfügt über integrierte Flexibilität, um die Textausrichtung basierend auf der Benachrichtigungs Sprache anzupassen.The notification region has built-in flexibility to adjust the text alignment based on the notification language. Wenn eine APP Arabisch, Hebräisch oder andere Bidi-sprach Benachrichtigungen sendet, wird der Text rechtsbündig ausgerichtet.When an app sends Arabic, Hebrew, or other BiDi language notifications, the text is aligned to the right. Wenn eine englische (oder andere LTR-) Benachrichtigung eingeht, wird Sie linksbündig ausgerichtet.And when an English (or other LTR) notification arrives, it will align to the left.

Kachel Benachrichtigungen

Eine konsistente, benutzerfreundliche RTL-Benutzer DarstellungA consistent, easy-to-touch RTL user experience

Jedes Element in der Windows-Benutzeroberfläche ist in die RTL-Ausrichtung integriert.Every element in the Windows UI fits into the RTL orientation. Charms und Flyouts wurden auf der linken Seite des Bildschirms positioniert, sodass Sie sich nicht überlappen, um Suchergebnisse zu überlappen oder die Berührungs Optimierung zu beeinträchtigen.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. Sie können problemlos mit den Daumen erreicht werden.They can be easily reached with the thumbs.

Screenshot von Bidi mit dem Screenshot mit der Größe der suchflyout-Darstellung  von Bidi mit der Größenänderung des druckflyoutScreenshot of BiDi showing the search flyout resized Screenshot of BiDi showing the print flyout resized

Screenshot von Bidi mit dem Bildschirm Abbildung "Settings Flyout geändert"  von Bidi mit der Größenänderung der APP-leistenScreenshot of BiDi showing the settings flyout resized Screenshot of BiDi showing the app bars resized

Text Eingabe in beliebiger RichtungText input in any direction

Windows bietet eine auf dem Bildschirm eingelegte touchtastatur, die sauber und Cluster frei ist.Windows offers an on-screen touch keyboard that is clean and clutter-free. Für Bidi-Sprachen gibt es einen Textrichtung-Steuerelement Schlüssel, sodass die Texteingabe Richtung nach Bedarf gewechselt werden kann.For BiDi languages, there is a text direction control key so that the text input direction can be switched as needed.

Touchscreen-Tastatur für Bidi-Sprache

Beliebige app in beliebiger Sprache verwendenUse any app in any language

Installieren und verwenden Sie Ihre bevorzugten apps in einer beliebigen Sprache.Install and use your favorite apps in any language. Die apps werden angezeigt und funktionieren wie bei nicht-Bidi-Versionen von Windows.The apps appear and function as they would on non-BiDi versions of Windows. Elemente innerhalb von apps werden immer in einer konsistenten und vorhersagbaren Position platziert.Elements within apps are always placed in a consistent and predictable position.

Englische App mit Bidi-Inhalt

Klammern korrekt anzeigenDisplay parentheses correctly

Mit der Einführung des Bidi-Klammern Algorithmus (BPA) werden gekoppelte Klammern immer ordnungsgemäß angezeigt, unabhängig von den Eigenschaften der Sprache oder Textausrichtung.With the introduction of the BiDi Parenthesis Algorithm (BPA), paired parentheses always display properly regardless of language or text alignment properties.

Falsche KlammernIncorrect parentheses

Bidi-App mit falschen Klammern

Richtige KlammernCorrect parentheses

Bidi-App mit korrekten Klammern

TypografieTypography

Windows verwendet die Segoe UI Schriftart für alle Bidi-Sprachen.Windows uses the Segoe UI font for all BiDi languages. Diese Schriftart ist für die Windows-Benutzeroberfläche strukturiert und skaliert.This font is shaped and scaled for the Windows UI.

Ein Screenshot, der die Segoe UI Schriftart auf dem Bildschirm "Startbildschirm" anzeigt,  die die Schriftart "Bild Arabisch" auf der Startseite anzeigtScreenshot showing the Segoe UI font on the start screen Screenshot showing the Segoe Arabic font on the start screen

Fallstudie #1: eine Bidi-Musik-appCase study #1: A BiDi music app

ÜbersichtOverview

Multimedia-apps stellen eine sehr interessante Entwurfs Herausforderung dar, da in der Regel ein Layout von links nach rechts erwartet wird, das der nicht-Bidi-Sprache ähnelt.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.

Mediensteuer Elemente von links nach rechts

Mediensteuer Elemente von rechts nach links

Einrichten der BenutzeroberflächeEstablishing UI directionality

Die Beibehaltung des von rechts nach links verwendeten UI-Flusses ist wichtig für konsistentes entwerfen für Bidi-Märkte.Retaining the right-to-left UI flow is important for consistent design for BiDi markets. Das Hinzufügen von Elementen, die in diesem Kontext von links nach rechts fließen, ist schwierig, da einige Navigationselemente, wie z. b. die Schaltfläche zurück, der direktionalen Ausrichtung der Schaltfläche zurück in den audiosteuerelementen widersprechen können.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.

Musik-app-Titelseite

Diese Musik-app behält ein Raster, das von rechts nach linksorientiert ist.This music app retains a right-to-left-oriented grid. Dadurch wird die APP für Benutzer, die in dieser Richtung bereits auf der Windows-Benutzeroberfläche navigieren, ein sehr natürliches Gefühl.This gives the app a very natural feel for users who already navigate in this direction across the Windows UI. Der Flow wird beibehalten, indem sichergestellt wird, dass die Hauptelemente nicht nur von rechts nach links geordnet sind, sondern auch in den Abschnitts Headern ordnungsgemäß ausgerichtet werden, um den Benutzeroberflächen Fluss aufrechtzuerhalten.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.

Musik-app-Albumseite

Text VerarbeitungText handling

Die Künstlerin Bio im obigen Screenshot wird linksbündig ausgerichtet, während andere Textelemente, wie z. b. "Album" und "Track Names", die Rechte Ausrichtung beibehalten.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. Das Feld "Bio" ist ein recht großes Textelement, das beim Ausrichten an der rechten Seite schlecht liest, wenn es schwierig ist, zwischen den Zeilen zu verfolgen, während ein größerer TextBlock gelesen wird.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. Im Allgemeinen sollten alle Textelemente mit mehr als zwei oder drei Zeilen, die fünf oder mehr Wörter enthalten, für ähnliche Ausrichtungs Ausnahmen in Erwägung gezogen werden, bei denen die Text Block Ausrichtung dem gesamten App-direktionalen Layout entspricht.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.

Das Ändern der Ausrichtung in der APP kann einfach aussehen, aber häufig werden einige Grenzen und Einschränkungen der Rendering-Engines in Bezug auf die neutrale Zeichen Platzierung in Bidi-Zeichen folgen angezeigt.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. Beispielsweise kann die folgende Zeichenfolge je nach Ausrichtung unterschiedlich angezeigt werden.For example, the following string can display differently based on alignment.

Englische Zeichenfolge (LTR)English String (LTR) Hebräisch-Zeichenfolge (RTL)Hebrew String (RTL)
Linke AusrichtungLeft-alignment Hello, World!Hello, World! בוקר טוב!בוקר טוב!
Rechte AusrichtungRight-alignment ! Hallo Welt!Hello, World !בוקר טוב!בוקר טוב

Um sicherzustellen, dass die Informationen der Künstlerin in der Musik-app ordnungsgemäß angezeigt werden, trennt das Entwicklungsteam die Text Layout-Eigenschaften von der Ausrichtung.To ensure that artist information is properly displayed across the music app, the development team separated text layout properties from alignment. Anders ausgedrückt: die Informationen zu den Künstlern werden möglicherweise in vielen Fällen als rechtsbündig angezeigt, aber die Anpassung des Zeichen folgen Layouts wird basierend auf der angepassten Hintergrundverarbeitung festgelegt.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. Die Hintergrundverarbeitung bestimmt basierend auf dem Inhalt der Zeichenfolge die am besten direktionale Layouteinstellung.The background processing determines the best directional layout setting based on the content of the string.

Musik-app-Künstlerseite

Wenn z. b. ohne benutzerdefinierte zeichenfolgenlayoutverarbeitung, wird der Name des Künstlers "The The" The "TheFor example, without custom string layout processing, the artist name "The Contoso Band." würde als angezeigt werden. Der ".would appear as ".The Contoso Band".

Spezialisierte Richtung der Zeichen folgen RichtungSpecialized string direction preprocessing

Wenn die APP den Server für Medien Metadaten kontaktiert, verarbeitet Sie jede Zeichenfolge vor der Anzeige für den Benutzer.When the app contacts the server for media metadata, it preprocesses each string prior to displaying it to the user. Während dieser Vorverarbeitung führt die APP auch eine Transformation durch, um die Textrichtung konsistent zu machen.During this preprocessing, the app also does a transformation to make the text direction consistent. Zu diesem Zweck wird überprüft, ob an den Enden der Zeichenfolge neutrale Zeichen vorhanden sind.To do this, it checks whether there are neutral characters on the ends of the string. Wenn die Textrichtung der Zeichenfolge nicht mit der durch die Windows-Spracheinstellungen festgelegten App-Richtung zu tun hat, fügt Sie auch Unicode-Richtungs Marker (und manchmal auch vorangestellt) an.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. Die Transformations Funktion sieht wie folgt aus.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;
}

Die hinzugefügten Unicode-Zeichen weisen eine Breite von NULL auf, sodass Sie sich nicht auf den Abstand der Zeichen folgen auswirken.The added Unicode characters are zero-width, so they don't impact the spacing of the strings. Dieser Code führt zu einer potenziellen Leistungs Einbuße, da das Erkennen der Zeichen folgen Richtung die Zeichenfolge bis zu einem nicht neutralen Zeichen durchlaufen muss.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. Jedes Zeichen, das auf die Neutralität überprüft wird, wird zunächst mit mehreren Unicode-Bereichen verglichen, sodass es keine triviale Prüfung ist.Each character that's checked for neutrality is first compared against several Unicode ranges as well, so it isn't a trivial check.

Fallstudie #2: eine Bidi-e-Mail-AppCase study #2: A BiDi mail app

ÜbersichtOverview

Hinsichtlich der Anforderungen an die Benutzeroberflächen Layout ist ein e-Mail-Client relativ einfach zu entwerfen.In terms of UI layout requirements, a mail client is fairly simple to design. Die Mail-app in Windows wird standardmäßig gespiegelt.The Mail app in Windows is mirrored by default. Aus Sicht der Textverarbeitung ist es erforderlich, dass die Mail-App robustere Textanzeige-und Kompositions Funktionen hat, um gemischte Text Szenarios zu ermöglichen.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.

Einrichten der BenutzeroberflächeEstablishing UI directionality

Das UI-Layout für die Mail-APP wird gespiegelt.The UI layout for the Mail app is mirrored. Die drei Bereiche wurden neu ausgerichtet, sodass sich der Ordner Bereich auf der rechten Seite des Bildschirms befindet, gefolgt von der Liste der e-Mail-Element Listen auf der linken Seite und dem e-Mail-Kompositions Bereich.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.

Gespiegelte Mail-App

Zusätzliche Elemente wurden neu ausgerichtet, um dem allgemeinen Benutzeroberflächen Fluss und der touchoptimierung zu entsprechen.Additional items have been reoriented to match the overall UI flow, and touch optimization. Hierzu gehören die APP-Leiste und die Symbole "Verfassen", "Antworten" und "Löschen".These include the app bar and the compose, reply, and delete icons.

Gespiegelte Mail-App mit App-Leiste

Text VerarbeitungText Handling

BenutzeroberflächeUI

Die Text Ausrichtung über die Benutzeroberfläche wird normalerweise rechtsbündig ausgerichtet.Text alignment across the UI is usually right-aligned. Dies schließt den Ordner Bereich und den Bereich Elemente ein.This includes the folder pane and items pane. Der Element Bereich ist auf zwei Textzeilen ("Address" und "Title") beschränkt.The item pane is limited to two lines of text (Address, and Title). Dies ist wichtig, wenn die Ausrichtung von rechts nach Links beibehalten werden soll, ohne einen TextBlock einzuführen, der schwer lesbar ist, wenn sich die Richtung des Inhalts dem Fluss der Benutzeroberflächen Richtung gegen teiliert.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.

Text BearbeitungText Editing

Die Text Bearbeitung erfordert, dass Sie sowohl von rechts nach links als auch von links nach rechts verfassen können.Text editing requires the ability to compose in both right-to-left and left-to-right form. Außerdem muss das Kompositions Layout in einem Format beibehalten werden, — wie z. b. Rich-Text mit — der Möglichkeit, direktionale Informationen zu speichern.In addition, the composition layout must be preserved by using a format—such as rich text—that has the ability to save directional information.

Mail-APP von links nach rechts

Mail-APP von rechts nach links