Language: HTML | XAML

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

Applies to Windows and Windows Phone

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 sind insgesamt neun BiDi-Sprachen integriert:

  • Zwei vollständig lokalisierte Sprachen (Arabisch, Hebräisch).
  • Sieben Benutzeroberflächen-Sprachpakete für Schwellenmärkte (Persisch, Urdu, Dari, Zentralkurdisch, Sindhi, Punjabi (Pakistan) und Uigurisch). Zwei dieser Sprachen sind neu und nur in 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.

BiDi-Designelemente

Bei Windows werden Entscheidungen in Bezug auf das BiDi-Design von vier Elementen beeinflusst:

  • Benutzeroberflächenspiegelung. Der Benutzeroberflächenfluss ermöglicht die Darstellung von Inhalten mit Rechts-nach-links-Format in ihrem natürlichen Layout. Das Design der Benutzeroberfläche wirkt wie ein lokales Design für BiDi-Märkte.
  • Einheitlichkeit der Benutzeroberfläche. Das Design vermittelt in der Ausrichtung von rechts nach links einen natürlichen Eindruck. Alle Benutzeroberflächenelemente besitzen eine einheitliche Layoutrichtung und werden wie vom Benutzer erwartet dargestellt.
  • 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 gemischter Texte. Die Textausrichtungsunterstützung ermöglicht die Verwendung gemischter Texte (beispielsweise englischer Text in BiDi-Builds und umgekehrt).

Übersicht über das Featuredesign

Die Windows-Plattform unterstützt die vier oben angegebenen BiDi-Designelemente. Im Anschluss werfen wir einen Blick auf die wichtigsten relevanten Features in Windows und gehen auf Kontext ein, in dem diese Ihre App beeinflussen.

Navigation in natürlich wirkender Richtung.

Wir haben das Raster so angepasst, dass die Ausrichtung von rechts nach links verläuft. Das bedeutet, dass sich die erste Kachel im Raster rechts oben und die letzte Kachel links unten befindet. 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.

BiDi-Startmenü BiDi-Startmenü mit Charms

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:

BiDi-Kachel

Englische Kachel:

Englische Kachel

Abrufen von Kachelbenachrichtigungen mit korrekter Leserichtung.

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.

Kachelbenachrichtigungen

Eine einheitliche Benutzeroberfläche mit Rechts-nach-links-Ausrichtung und problemloser Fingereingabe.

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.

BiDi-Screenshot BiDi-Screenshot

BiDi-Screenshot BiDi-Screenshot

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.

Bildschirmtastatur für BiDi-Sprache

Verwendung beliebiger Apps in jeder beliebigen Sprache.

Installieren und verwenden Sie Ihre Lieblings-Apps in einer beliebigen Sprache. Darstellung und Funktionsweise der Apps entsprechen der Darstellung und Funktionsweise in BiDi-fremden Versionen von Windows. Elemente in Apps werden stets einheitlich an vorhersehbaren Positionen angezeigt.

Englische App mit BiDi-Inhalt

Korrekte 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:

BiDi-App mit falschen Klammern

Korrekte Klammern:

BiDi-App mit korrekten Klammern

Neue Schriftart.

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

Segoe-Benutzeroberflächenschriftart für BiDi-Sprache Segoe-Benutzeroberflächenschriftart für BiDi-Sprache

Fallstudie 1: eine BiDi-Musik-App

Übersicht

Multimediaanwendungen stellen Entwickler vor interessante Designherausforderungen, da bei Mediensteuerelementen üblicherweise ein Links-nach-rechts-Layout erwartet wird, das dem BiDi-fremder Sprachen gleicht.

Mediensteuerelemente (links nach rechts) Mediensteuerelemente (rechts nach links)

Einrichten der Benutzeroberflächenausrichtung

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.

Titelseite der Musik-App

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.

Albumseite der Musik-App

Handhabung von Text

Die Biografie des Interpreten im oben dargestellten Bildschirm ist am linken Rand ausgerichtet, während andere interpretenbezogene Informationen wie Album- und Titelnamen weiterhin rechtsbündig ausgerichtet sind. Beim Biografiefeld handelt es sich um ein relativ großes Textelement, dessen Lesbarkeit durch eine rechtsbündige Ausrichtung stark beeinträchtigt wird, da der Leser den Zeilen in einem umfangreichen Textabschnitt nur schwer folgen kann. 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:

Englische Zeichenfolge (von links nach rechts)Hebräische Zeichenfolge (von rechts nach links)
LinksbündigHello World!בוקר טוב!
Rechtsbündig!Hello World!בוקר טוב

 

Um zu gewährleisten, dass Interpreteninformationen innerhalb der Musik-App ordnungsgemäß dargestellt werden, hat das Entwicklungsteam die Eigenschaften für das Textlayout und die Ausrichtung voneinander getrennt. 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.

Interpretenseite der Musik-App

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

Spezialverarbeitung 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. Jedes auf Neutralität untersuchte Zeichen wird außerdem zuvor mit mehreren Unicode-Bereichen verglichen. Die Überprüfung ist also nicht nur oberflächlich.

Fallstudie 2: eine BiDi-E-Mail-App

Übersicht

Bei einem E-Mail-Client sind die Anforderungen an das Benutzeroberflächenlayout relativ simpel. Die in Windows enthaltene E-Mail-App von Microsoft ist standardmäßig gespiegelt. In puncto Textbehandlung muss die E-Mail-App über leistungsfähigere Anzeige- und Erstellungsfunktionen verfügen, um für Szenarien mit gemischtem Text geeignet zu sein.

Einrichten der Benutzeroberflächenausrichtung

Das Benutzeroberflächenlayout für die E-Mail-App von Microsoft ist 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.

Gespiegelte E-Mail-App

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.

Gespiegelte Mail-App mit App-Leiste

Handhabung von Text

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.

E-Mail-App von links nach rechts

E-Mail-App von rechts nach links

 

 

Anzeigen:
© 2014 Microsoft