So wird’s gemacht: Anpassen von Layout und Schriftarten für verschiedene Sprachen und Unterstützung von RTL-Layouts (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 ]
Sie können in Ihrer Windows Store-App Layouts und Schriftarten unterstützen, indem Sie einige einfache Richtlinien befolgen.
Technologien
Anweisungen
Layoutrichtlinien
Einige Sprachen, darunter Deutsch und Finnisch, benötigen für den Text mehr Raum als Englisch.
Verwenden Sie nach Möglichkeit flexible Layoutmechanismen anstelle einer absoluten Positionierung oder fester Breiten und Höhen. Verwenden Sie für Windows Store-Apps mit JavaScript CSS-Layoutmechanismen wie -ms-grid und -ms-box. Verwenden Sie symmetrische Abstände und Ränder, um die Lokalisierung für verschiedene Layoutrichtungen zu ermöglichen.
Sie können auch den Pseudoklassenselektor :-ms-lang() verwenden, um CSS-Eigenschaften wie die Breite für bestimmte Elemente basierend auf der Sprache der App anzupassen. Dazu muss der App-Host das lang-Attribut des Stammelements auf die App-Sprache festlegen.
.item:-ms-lang(de, fi) { width: 350px; }
Bei Sprachen wie Arabisch und Hebräisch muss die Leserichtung des Text- und des App-Layouts von rechts nach links verlaufen.
Bei Windows Store-Apps mit JavaScript, die das Stylesheet ui-light.css oder ui-dark.css verwenden, wird die Richtung des Textkörperlayouts automatisch je nach App-Sprache festgelegt. Das folgende CSS entspricht "ui-light.css" und "ui-dark.css". Sie müssen es also nicht selbst schreiben.
body:-ms-lang(ar,he…) { direction: rtl;}
Die meisten App-Layouts werden somit richtig dargestellt, wenn das System eine Sprache von rechts nach links verwendet.
Wie bei WinJS.UI-Steuerelementen kann die App den Pseudoklassenselektor :-ms-lang() verwenden, um physische CSS-Eigenschaften anzupassen, z. B. margin und padding. Sie müssen keine logischen CSS-Eigenschaften anpassen, die Schlüsselwörter wie after und before einsetzen.
Verwenden Sie keine align-Eigenschaft oder ein entsprechendes Attribut in HTML. Steuern Sie stattdessen mit der direction-Eigenschaft die Ausrichtung bestimmter Komponenten.
Unterstützen Sie mit der writing-mode-Eigenschaft vertikale Textlayouts in CSS.
Spiegeln von Bildern
Wenn Ihre App Bilder enthält, die für Rechts-nach-links-Sprachen gespiegelt werden müssen, können Sie die Bilder beim Rendern mithilfe von CSS-Transformationen spiegeln. Dazu fügen Sie den Elementen eine .mirrorable-Klasse hinzu. Zudem fügen Sie die folgende CSS-Klasse hinzu:
.mirrorable { transform: scaleX(-1); }
Wenn die App ein anderes Bild benötigt, damit dieses richtig umgedreht werden kann, können Sie das Ressourcenverwaltungssystem mit dem layoutdir-Qualifizierer verwenden. Das System wählt ein Bild mit dem Namen "file.layoutdir-rtl.png" aus, wenn die App-Sprache auf eine Rechts-nach-links-Sprache festgelegt wird. Diese Vorgehensweise ist möglicherweise nötig, wenn nicht alle Teile des Bilds umgedreht werden.
Schriftarten
Bei Windows Store-Apps mit JavaScript, die das Stylesheet ui-light.css oder ui-dark.css verwenden, wird die Schriftart automatisch je nach App-Sprache auf die am besten geeignete Schriftart festgelegt. Der App-Host legt das lang-Attribut des Stammelements auf die App-Sprache fest.
Bei Apps, die mehrere Sprachen auf einer einzigen Seite anzeigen, sollte das lang-Attribut für den Abschnitt in jeder Sprache festgelegt werden. Der Pseudoklassenselektor :-ms-lang() wählt für jeden Seitenabschnitt die richtige Schriftart aus.
Verwenden Sie die LanguageFont-Schriftartenersetzungs-APIs für den programmgesteuerten Zugriff auf die empfohlene Familie, Grad, Breite und Schnitt der Schriftart für eine spezielle Sprache. Das LanguageFont-Objekt ermöglicht den Zugriff auf die richtigen Schriftartinformationen für verschiedene Inhaltskategorien: UI-Kopfzeilen, Benachrichtigungen, Textkörper und Schriftarten für den Textkörper, die vom Benutzer bearbeitet werden können.