So wird’s gemacht: Unterstützen der bidirektionalen UI (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Gestalten Sie Ihre Apps so, dass sie bidirektionale Texte (BiDi) für Rechts-nach-links-Schreibsysteme unterstützen.

Einführung

Microsoft produziert schon sehr lange Software für den Nahen Osten und andere Regionen mit Rechts-nach-links-Schreibsystemen. In diesem Teil der Welt herrschen spezifische Anforderungen an die Gestaltung von Anwendungen. Die dort allgemein verwendeten Schreibsysteme erfordern die Unterstützung von bidirektionalen Texten (BiDi). Hierbei handelt es sich um die Möglichkeit, Text sowohl von rechts nach links (RTL) als auch von links nach rechts (LTR) einzugeben und anzuzeigen. Windows 3.1 hat als erste Windows-Version BiDi-Sprachen unterstützt. In Windows 98 wurde schließlich die Ausrichtung der Benutzeroberfläche gespiegelt, um für Benutzer mit arabischer oder hebräischer Sprache ein natürlicheres Erscheinungsbild der Benutzerfläche zu erzielen.

Windows 8 bietet eine BiDi-Lösung ohne Kompromisse. Jedes Element auf der neuen Windows-Benutzeroberfläche ist Teil eines aufwendigen und immersiven Rechts-nach-links-Designs, bei dem die entsprechenden Sprachen in ihrer natürlichsten Form zum Einsatz kommen.

Ab Windows 8 werden insgesamt 9 bidirektionale Sprachen unterstützt:

• Zwei Sprachen (Arabisch und Hebräisch) wurden vollständig lokalisiert.
• Sieben Benutzeroberflächen-Sprachpakete stehen für aufstrebende Märkte zur Verfügung (Persisch, Urdu, Dari, Zentralkurdisch, Sindhi, Punjabi (Pakistan) und Uigurisch). Zwei dieser Sprachen sind neu und exklusiv für Windows 8 verfügbar.

Entwerfen von Windows Store-Apps für BiDi-Märkte

Hier finden Sie die Windows BiDi-Designphilosophie und Fallstudien, die die zu berücksichtigenden BiDi-Designaspekte verdeutlichen.

Bidirektionale Gestaltungselemente

Die Gestaltung bidirektionaler Elemente in Windows wird von 4 Prinzipien bestimmt:

• Spiegelung der Benutzeroberfläche. Der Benutzeroberflächenfluss ermöglicht die Darstellung von Inhalten mit Leserichtung von rechts nach links in einem einheitlichen Layout. Die Benutzeroberfläche für Länder mit bidirektionalen Sprachen orientiert sich an den örtlichen Konventionen.
• Einheitliche Benutzererfahrung. Das Design zeichnet sich durch eine organische Ausrichtung von rechts nach links aus. Die Elemente der Benutzeroberfläche weisen eine einheitliche Layoutrichtung auf und werden so dargestellt, wie der Benutzer dies erwartet.
• Optimierung für die Fingereingabe. Die Elemente der Benutzeroberfläche bieten eine ähnliche UX wie nicht gespiegelte berührungsempfindliche Benutzeroberflächen. Alle Elemente sind leicht zugänglich und ermöglichen eine natürliche Interaktion per Fingereingabe.
• Unterstützung von gemischtem Text. Die Unterstützung verschiedener Textausrichtungen erlaubt eine weitgehende Mischung von Textrichtungen (deutscher Text in bidirektionalen Builds und umgekehrt).

Überblick über die Gestaltungselemente

Die Windows-Plattform unterstützt die vier vorstehend genannten Gestaltungselemente für bidirektionale Benutzeroberflächen. Betrachten wir nun einige der wichtigsten diesbezüglichen Elemente in Windows. Dazu untersuchen wir einige Umstände näher, in denen diese von Bedeutung für Ihre App sind.

Navigieren Sie in die gewohnte Richtung.

Wir haben die Rasterausrichtung so angepasst, dass die Elemente darin von rechts nach links fließen. Die erste Kachel im Raster befindet sich daher oben rechts und die letzte Kachel unten links. Auf diese Weise werden die Information so dargestellt, wie es Benutzer bereits von Publikationen auf Papier, etwa von Büchern und Zeitschriften, kennen. Dort wird auch von rechts oben nach links unten gelesen.

Um einen einheitlichen Benutzeroberflächenfluss sicherzustellen, behalten die Kacheln im Raster immer ihre Ausrichtung von rechts nach links bei. Der Name Ihrer App und das Logo werden daher unabhängig von der Sprache der Benutzeroberfläche Ihrer App immer rechts unten auf der Kachel angezeigt.

BiDi-Kachel:

Englische Kachel:

Erhalten Sie Kachelbenachrichtigungen, die ordnungsgemäß gelesen werden können.

Kacheln unterstützen gemischte Texte. Der Benachrichtigungsbereich weist eine integrierte Flexibilität auf, sodass die Textausrichtung an die jeweils verwendete Sprache angepasst werden kann. Wenn eine App Benachrichtigungen auf Arabisch, Hebräisch oder in einer anderen BiDi-Sprache sendet, wird der Text am rechten Rand ausgerichtet. Geht dagegen eine Benachrichtigung in englischer Sprache (oder in einer anderen Sprache mit Links-nach-rechts-Leserichtung) ein, wird der Text am linken Rand ausgerichtet.

Eine einheitliche und fingereingabenfreundliche Benutzererfahrung für Sprachen mit Leserichtung von rechts nach links.

Alle Elemente der neuen Benutzeroberfläche von Windows sind mit der Ausrichtung von rechts nach links kompatibel. Charms und Flyouts wurden auf der linken Seite des Bildschirms platziert, um das Überlappen von Suchergebnissen oder eine Beeinträchtigung der Fingereingabe zu vermeiden. Sie sind nun leicht mit dem Daumen erreichbar.

Texteingabe in beliebiger Richtung.

Windows zeigt eine kompakte und übersichtliche Bildschirmtastatur für Fingereingaben an. Bei Sprachen mit bidirektionaler Ausrichtung kann die Texteingaberichtung über eine entsprechende Steuerungstaste nach Bedarf umgeschaltet werden.

Verwenden Sie jede App in jeder Sprache.

Installieren und verwenden Sie Ihre bevorzugten Apps in jeder beliebigen Sprache. Die Darstellung und Funktionsweise der Apps gleicht exakt der nicht bidirektionaler Versionen von Windows. Elemente in Apps werden stets einheitlich an vorhersehbaren Positionen angezeigt.

Ordnungsgemäße Darstellung von Klammern.

Dank der Einführung des BiDi-Klammeralgorithmus (BiDi Parenthesis Algorithm, BPA) werden Klammerpaare unabhängig von den Sprach- oder Textausrichtungseigenschaften stets korrekt dargestellt.

Falsche Klammern:

Korrekte Klammern:

Neue Schriftart.

Windows verwendet die neue Schriftart "Segoe UI" für alle BiDi-Sprachen. Diese Schriftart wurde speziell für die neue Windows-Benutzeroberfläche angepasst und skaliert.

Fallstudie Nr. 1: BiDi-Musik-App

Übersicht

Multimediale Anwendungen stellen eine interessante Herausforderung hinsichtlich der Gestaltung dar. Von den Steuerelementen für entsprechende Medien wird i. d. R. ein Layout mit ähnlicher Ausrichtung (links-nach-rechts) wie bei nicht bidirektionalen Sprachen erwartet.

Festlegen der Ausrichtung von Elementen der Benutzeroberfläche

Die Beibehaltung der Rechts-nach-links-Ausrichtung auf der Benutzeroberfläche ist im Hinblick auf die BiDi-Märkte für eine einheitliche Gestaltung von großer Bedeutung. Das Hinzufügen von Elementen mit Links-nach-rechts-Fluss in diesem Kontext ist schwierig, da einige Navigationselemente wie die Zurück-Schaltfläche unter Umständen der direktionalen Ausrichtung der Zurück-Schaltfläche in den Audiosteuerelementen widerspricht.

Die Musik-App von Microsoft übernimmt die Rechts-nach-links-Ausrichtung des Rasters. Dadurch wirkt die Anwendung für Benutzer, die diese Navigationsrichtung bereits auf der neuen Windows-Benutzeroberfläche verwenden, sehr natürlich. Bei der Beibehaltung des Flusses wird nicht nur dafür gesorgt, dass die Hauptelemente von links nach rechts angeordnet werden, sondern es wird auch auf eine ordnungsgemäße Ausrichtung in den Abschnittsüberschriften geachtet, um eine fließende Verwendung der Benutzeroberfläche zu ermöglichen.

Textverarbeitung

Die Biografie des Künstlers in der Abbildung oben wird linksbündig dargestellt. Andere Textbausteine wie der Name des Albums und die Namen der Einzeltitel werden jedoch weiterhin rechtsbündig dargestellt. Das Feld mit der Biografie ist ein relativ großes Textelement. Bei einer rechtsbündigen Ausrichtung würde das Lesen erschwert, weil die Orientierung zwischen den Zeilen dadurch möglicherweise beeinträchtigt wird. Allgemein gilt: Jedes Textelement mit mehr als zwei oder drei Zeilen und mindestens fünf Wörtern pro Zeile kann ähnlichen Ausnahmen bezüglich der Ausrichtung unterworfen sein, sodass die Ausrichtung der Textblöcke nicht der allgemeinen Layoutausrichtung der App entspricht.

Die Änderung der Ausrichtung innerhalb der App mag recht unkompliziert wirken, offenbart aber häufig einige Einschränkungen und Begrenzungen der verschiedenen Renderingmodule bei der neutralen Zeichenplatzierung in BiDi-Zeichenfolgen. So wird die folgende Zeichenfolge unter Umständen je nach Ausrichtung unterschiedlich dargestellt:

Um sicherzustellen, dass die Informationen zum jeweiligen Künstler in der Musik-App fehlerfrei angezeigt werden, wurden die Eigenschaften für das Textlayout und die Ausrichtung vom Entwicklungsteam getrennt behandelt. Mit anderen Worten: Die Interpreteninformationen werden zwar möglicherweise in vielen Fällen rechtsbündig dargestellt, die Layoutausrichtung wird jedoch auf der Grundlage einer angepassten Hintergrundverarbeitung festgelegt. Die Hintergrundverarbeitung bestimmt die auf Basis des Zeichenfolgeninhalts das am besten geeignete Ausrichtungslayout.

Beispiel: Ohne benutzerdefinierte Verarbeitung des Zeichenfolgenlayouts würde der Interpretenname "The Contoso Band." als ".The Contoso Band" dargestellt.

Spezielle Verarbeitung der Zeichenfolgenausrichtung

Wenn Medienmetadaten durch die App von unseren Servern abgerufen werden, wird jede einzelne Zeichenfolge zunächst verarbeitet, bevor der Benutzer sie sehen kann. Bei dieser Vorverarbeitung findet auch eine Umwandlung statt, um für eine einheitliche Textrichtung zu sorgen. Hierzu prüft die App, ob sich am Ende der Zeichenfolge neutrale Zeichen befinden. Wenn die Textausrichtung der Zeichenfolge nicht der durch die Windows-Spracheinstellungen festgelegten Richtung für die App entspricht, werden ebenfalls Unicode-Richtungsmarker an die Zeichenfolge angefügt (und dieser manchmal auch vorangestellt). Die Transformationsfunktion sieht in JavaScript wie folgt aus:

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;
}

Die hinzugefügten Unicode-Zeichen sind Nullbreitenzeichen und wirken sich daher nicht auf die Zeichenfolgenabstände aus. Dieser Code beeinträchtigt unter Umständen die Leistung, da die Zeichenfolge zum Erkennen der Richtung durchlaufen werden muss, bis ein nicht neutrales Zeichen gefunden wird. Da jedes Zeichen, dessen Neutralität überprüft wird, zunächst mit mehreren Unicode-Bereichen abgeglichen wird, handelt es sich um eine umfangreiche Prüfung.

Fallstudie Nr. 2: BiDi-Mail-App

Übersicht

Im Hinblick auf die Anforderungen an das Layout der Benutzeroberfläche gestaltet sich der Entwurf eines Mail-Clients relativ einfach. Die Microsoft Mail-App von Windows wird standardmäßig gespiegelt. Im Hinblick auf die Textverarbeitung erfordert die Mail-App eine leistungsfähigere Textanzeige und leistungsfähigere Erstellungsfunktionen, um Szenarien mit gemischter Textausrichtung behandeln zu können.

Festlegen der Ausrichtung von Elementen der Benutzeroberfläche

Das Layout der Benutzeroberfläche für die Microsoft Mail-App wird gespiegelt. Die Ausrichtung der drei Bereiche wurde so angepasst, dass der Ordnerbereich rechts im Bildschirm dargestellt wird. Die Liste der E-Mail-Elemente wird links davon angezeigt, gefolgt vom Bereich zum Verfassen von E-Mails.

Auch die Ausrichtung zusätzlicher Elemente wurde an den allgemeinen Benutzeroberflächenfluss und die Optimierung für die Fingereingabe angepasst. Dazu gehören die App-Leiste und die Symbole zum Verfassen, Beantworten und Löschen.

Textverarbeitung

Benutzeroberfläche

Texte auf der Benutzeroberfläche sind im Allgemeinen rechtsbündig ausgerichtet. Dies gilt auch für den Ordner- und Elementbereich. Der Elementbereich ist auf zwei Textzeilen (Adresse und Titel) begrenzt. Dies ist wichtig, um die Rechts-nach-links-Ausrichtung beizubehalten, ohne dass ein Textblock entsteht, der nur schwer zu lesen ist, wenn die Inhaltsrichtung nicht der Flussrichtung der Benutzeroberfläche entspricht.

Textbearbeitung

Bei der Textbearbeitung muss es möglich sein, Text sowohl von rechts nach links als auch von links nach rechts zu verfassen. Darüber hinaus muss das Layout zum Verfassen von Nachrichten mithilfe eines Formats wie Rich-Text beibehalten werden, das Ausrichtungsinformationen speichern kann.