Entwerfen Sie Ihre App für bidirektionalen Text

Entwerfen Sie Ihre App so, dass bidirektionale Textunterstützung (BiDi) bereitgestellt wird, damit Sie Skripts von rechts nach links (RTL) und von links nach rechts (LTR)-Schreibsystemen kombinieren können, die in der Regel unterschiedliche Alphabettypen enthalten.

Rechts-nach-links-Schreibsysteme, z. B. im Nahen Osten, Zentral- und Südasien, und in Afrika, haben einzigartige Designanforderungen. Diese Schreibsysteme erfordern bidirektionale Textunterstützung (BiDi). BiDi-Unterstützung ist die Möglichkeit zum Eingeben und Anzeigen des Textlayouts in der Reihenfolge von rechts nach links (RTL) oder von links nach rechts (LTR).

Insgesamt neun BiDi-Sprachen sind in Windows enthalten.

• Zwei vollständig lokalisierte Sprachen. Arabisch und Hebräisch.
• Sieben Benutzeroberflächen-Sprachpaket für Schwellenländer. Persisch, Urdu, Dari, Zentralkurdisch, Sindhi, Punjabi (Pakistan) und Uyghur.

Dieses Thema enthält die Designphilosophie von Windows BiDi und Fallstudien, die BiDi-Designüberlegungen zeigen.

Bidi-Designelemente

Vier Elemente beeinflussen BiDi-Designentscheidungen in Windows.

• Benutzeroberflächenspiegelung. Der Benutzeroberflächenfluss ermöglicht die Darstellung von Rechts-nach-links-Inhalten im systemeigenen Layout. Ui-Design fühlt sich lokal in BiDi-Märkten an.
• Konsistenz bei der Benutzererfahrung. Das Design fühlt sich in rechts-nach-links-Ausrichtung natürlich an. UI-Elemente teilen eine einheitliche Layoutrichtung und werden angezeigt, wenn der Benutzer sie erwartet.
• Touchoptimierung. Ähnlich wie die Touch-UI in nicht gespiegelter UI sind Elemente leicht zu erreichen, und sie sind natürlich für die Touchinteraktion.
• Unterstützung gemischter Text. Die Unterstützung der Textrichtung ermöglicht eine großartige Gemischte Textpräsentation (englischer Text auf BiDi-Builds und umgekehrt).

Übersicht über das Featuredesign

Windows unterstützt die vier BiDi-Designelemente. Sehen wir uns einige der wichtigsten relevanten Features von (früheren Versionen) von Windows an, und geben Sie einen Kontext darüber, wie sie sich auf Ihre App auswirken.

Navigieren Sie in die Richtung, die sich natürlich fühlt

Windows passt die Richtung des typografischen Rasters so an, dass es von rechts nach links fließt, was bedeutet, dass die erste Kachel im Raster in der oberen rechten Ecke und die letzte Kachel unten links platziert wird. Dies entspricht dem RTL-Muster gedruckter Publikationen wie Bücher und Zeitschriften, wobei das Lesemuster immer in der oberen rechten Ecke beginnt und nach links verläuft.

Um einen konsistenten Ui-Fluss beizubehalten, behalten Inhalte auf Kacheln ein Layout von rechts nach links bei, was bedeutet, dass der App-Name und das Logo unabhängig von der Sprache der App-UI an der unteren rechten Ecke der Kachel positioniert werden.

BiDi-Kachel

Englische Kachel

Abrufen von Kachelbenachrichtigungen, die korrekt gelesen werden

Kacheln weisen gemischte Textunterstützung auf. Der Benachrichtigungsbereich verfügt über integrierte Flexibilität, um die Textausrichtung basierend auf der Benachrichtigungssprache anzupassen. Wenn eine App Benachrichtigungen über Arabisch, Hebräisch oder andere BiDi-Sprachen sendet, wird der Text rechts ausgerichtet. Und wenn eine englische (oder andere LTR)-Benachrichtigung eingeht, wird sie linksbündig ausgerichtet.

Eine konsistente, leicht zu berührende RTL-Benutzeroberfläche

Jedes Element in der Windows-Benutzeroberfläche passt in die RTL-Ausrichtung. Charms und Flyouts wurden am linken Bildschirmrand positioniert, sodass sie keine Suchergebnisse überlappen oder die Touchoptimierung beeinträchtigen. Sie können mit den Daumen leicht erreicht werden.

Texteingabe in beliebiger Richtung

Windows bietet eine Bildschirmtastatur, die sauber und unübersichtlich ist. Für BiDi-Sprachen gibt es eine Textrichtungssteuerungstaste, sodass die Texteingaberichtung bei Bedarf umgeschaltet werden kann.

Verwenden einer beliebigen App in einer beliebigen Sprache

Installieren und verwenden Sie Ihre bevorzugten Apps in einer beliebigen Sprache. Die Apps werden wie in Nicht-BiDi-Versionen von Windows angezeigt und funktionieren. Elemente innerhalb von Apps werden immer an einer konsistenten und vorhersehbaren Position platziert.

Korrekte Anzeige von Klammern

Mit der Einführung des BiDi-Klammeralgorithmus (BiDi Parenthesis Algorithm, BPA) werden gekoppelte Klammern unabhängig von den Sprach- oder Textausrichtungseigenschaften immer ordnungsgemäß angezeigt.

Falsche Klammern

Korrigieren von Klammern

Typografie

Windows verwendet die Schriftart "Segoe UI" für alle BiDi-Sprachen. Diese Schriftart wird für die Windows-Benutzeroberfläche geformt und skaliert.

Fallstudie Nr. 1: Eine BiDi-Musik-App

Übersicht

Multimedia-Apps sorgen für eine sehr interessante Design-Herausforderung, da Mediensteuerelemente in der Regel ein Links-nach-rechts-Layout ähnlich wie bei Nicht-BiDi-Sprachen haben.

Einrichten der Benutzeroberflächenrichtung

Die Beibehaltung des Ui-Flusses von rechts nach links ist für ein konsistentes Design für BiDi-Märkte wichtig. Das Hinzufügen von Elementen, die in diesem Kontext links-nach-rechts-Fluss aufweisen, ist schwierig, da einige Navigationselemente wie die Zurück-Schaltfläche möglicherweise der richtungsbezogenen Ausrichtung der Zurück-Schaltfläche in den Audiosteuerelementen widersprechen.

Diese Musik-App behält ein rechts-nach-links-orientiertes Raster bei. Dadurch erhält die App ein sehr natürliches Gefühl für Benutzer, die bereits in diese Richtung über die Windows-Benutzeroberfläche navigieren. Der Fluss wird beibehalten, indem sichergestellt wird, dass die Hauptelemente nicht nur von rechts nach links sortiert werden, sondern auch ordnungsgemäß in den Abschnittsüberschriften ausgerichtet sind, um den UI-Fluss zu verwalten.

Textverarbeitung

Die Künstlerbiografie im obigen Screenshot ist linksbündig ausgerichtet, während andere künstlerbezogene Textstücke wie Album- und Titelnamen die rechte Ausrichtung beibehalten. Das Biofeld ist ein recht großes Textelement, das beim Lesen eines breiteren Textblocks nur schwer zwischen den Zeilen nachverfolgt werden kann. Im Allgemeinen sollten alle Textelemente mit mehr als zwei oder drei Zeilen, die fünf oder mehr Wörter enthalten, für ähnliche Ausrichtungsausnahmen berücksichtigt werden, wobei die Textblockausrichtung dem des gesamten App-Direktionallayouts entgegengesetzt wird.

Das Bearbeiten der Ausrichtung über die App kann einfach aussehen, aber häufig werden einige der Grenzen und Einschränkungen der Renderingmodule hinsichtlich der neutralen Zeichenplatzierung in BiDi-Zeichenfolgen verfügbar gemacht. Die folgende Zeichenfolge kann beispielsweise je nach Ausrichtung anders angezeigt werden.

	Englische Zeichenfolge (LTR)	Hebräische Zeichenfolge (RTL)
Linksbündig	Hello, World!	בוקר טוב!
Rechtsausrichtung	Hello, World!	!בוקר טוב

Um sicherzustellen, dass Künstlerinformationen in der Musik-App ordnungsgemäß angezeigt werden, trennte das Entwicklungsteam die Textlayouteigenschaften von der Ausrichtung. Mit anderen Worten, die Künstlerinformationen können in vielen Fällen rechtsbündig angezeigt werden, aber die Anpassung des Zeichenfolgenlayouts wird basierend auf der angepassten Hintergrundverarbeitung festgelegt. Die Hintergrundverarbeitung bestimmt die beste direktionale Layouteinstellung basierend auf dem Inhalt der Zeichenfolge.

Ohne benutzerdefinierte Zeichenfolgenlayoutverarbeitung würde beispielsweise der Künstlername "The Contoso Band" als ". Die Contoso-Band".

Spezielle Vorverarbeitung der Zeichenfolgenrichtung

Wenn die App den Server für Medienmetadaten kontaktiert, verarbeitet sie jede Zeichenfolge vor der Anzeige für den Benutzer. Während dieser Vorverarbeitung führt die App auch eine Transformation durch, um die Textrichtung konsistent zu gestalten. Dazu wird überprüft, ob am Ende der Zeichenfolge neutrale Zeichen vorhanden sind. Wenn die Textrichtung der Zeichenfolge gegenüber der app-Richtung steht, die von den Windows-Spracheinstellungen festgelegt wird, fügt sie Unicode-Richtungsmarkierungen an (und manchmal vorab). Die Transformationsfunktion sieht wie folgt aus.

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 sind nullbreite, sodass sie sich nicht auf den Abstand der Zeichenfolgen auswirken. Dieser Code führt zu einer potenziellen Leistungseinbuße, da das Erkennen der Richtung einer Zeichenfolge die Ausführung der Zeichenfolge erfordert, bis ein nicht neutrales Zeichen gefunden wird. Jedes Zeichen, das auf Neutralität überprüft wird, wird zuerst mit mehreren Unicode-Bereichen verglichen, daher handelt es sich nicht um eine triviale Prüfung.

Fallstudie Nr. 2: Eine BiDi-Mail-App

Übersicht

Im Hinblick auf die Anforderungen an das Ui-Layout ist ein E-Mail-Client recht einfach zu entwerfen. Die Mail-App in Windows wird standardmäßig gespiegelt. Aus Der Sicht der Textverarbeitung muss die Mail-App robustere Textanzeige- und Kompositionsfunktionen aufweisen, um gemischte Textszenarien zu berücksichtigen.

Einrichten der Benutzeroberflächenrichtung

Das UI-Layout für die Mail-App wird gespiegelt. Die drei Bereiche wurden neu ausgerichtet, sodass der Ordnerbereich am rechten Rand des Bildschirms positioniert wird, gefolgt vom Listenbereich für E-Mail-Elemente links und dann dem E-Mail-Kompositionsbereich.

Zusätzliche Elemente wurden neu ausgerichtet, um dem gesamten UI-Fluss und der Touchoptimierung zu entsprechen. Dazu gehören die App-Leiste und die Symbole "Verfassen", "Antworten" und "Löschen".

Textverarbeitung

UI

Die Textausrichtung auf der Benutzeroberfläche wird in der Regel rechtsbündig ausgerichtet. Dies schließt den Ordnerbereich und den Elementbereich ein. Der Elementbereich ist auf zwei Textzeilen (Adresse und Titel) beschränkt. Dies ist wichtig für die Beibehaltung der Rechts-nach-Links-Ausrichtung, ohne einen Textblock einzuführen, der schwer zu lesen wäre, wenn die Inhaltsrichtung dem Fluss der UI-Richtung entgegengesetzt ist.

Textbearbeitung

Die Textbearbeitung erfordert die Möglichkeit, sowohl in rechts-nach-links- als auch in von links nach rechts zu verfassen. Darüber hinaus muss das Kompositionslayout mithilfe eines Formats wie Rich-Text beibehalten werden, das die Möglichkeit zum Speichern von direktionalen Informationen hat.