Sie haben sich also entschlossen, eine RTL-Version Ihrer Website zu erstellen. Es spielt keine Rolle, was Sie antreibt: aktuelle Geschäftsanforderungen, oder Sie sehen einen solchen Bedarf in der Zukunft voraus und mÜchten sich darauf vorbereiten, oder Sie mÜchten einfach nur in diesen Bereich der UI-Entwicklung eintauchen. Wichtig ist, dass Sie hÜchstwahrscheinlich bereits einige Artikel zu diesem Thema kennengelernt, CSS-Plugins zum Erweitern von Stilen gefunden und sich mit der Eingabe von Zeichen in RTL-Sprachen und dem Attribut magic dir vertraut gemacht haben.
Wenn nicht, finden Sie hier einige hilfreiche Links zum Verständnis der Probleme und LÜsungen:
- Von rechts nach links. Was ist dir = rtl und wie zähme ich Arabisch?
- Von rechts nach links. So kippen Sie die Site-Schnittstelle fĂźr RTL
- RTL Styling 101 - Der ultimative Leitfaden fĂźr RTL Styling in CSS
- Internationalisierungstechniken: Verfassen von HTML und CSS
- Bidirektionalität im Materialdesign
- AndrĂŠ ĺ° ĺąą Schappos Blog Ăźber Internationalisierung
Dies reicht aus, um statische Schnittstellen fßr RTL anzupassen, und Sie werden hÜchstwahrscheinlich sehr zufrieden sein. Aber nur bis die Site Elemente der Interaktion mit Benutzern enthält, z. B. Formulare, die unabhängig von der Sprache der Benutzeroberfläche alle Inhalte akzeptieren kÜnnen.
Dieses Problem besteht aus zwei Komponenten - Eingabe und Ausgabe von Inhalten - und beide sind auf ihre Weise interessant. Gleichzeitig wird der zweite in den obigen und anderen Artikeln ausfĂźhrlich behandelt, der erste jedoch nicht. Um es zu lĂśsen, gab es einige Tricks, die uns wĂźrdig erschienen, mit den Lesern von Habr zu teilen.
Lassen Sie uns zunächst einige RTL-Anwendungsschnittstellen vergleichen, fĂźr die RTL-Zielgruppen keine groĂe Rolle spielen, und sehen, wie sie mit der Aufgabe der Texteingabe umgehen.
Beispiel 1. Ein soziales Netzwerk
1.1 Anmeldeformular
Im Anmeldeformular auf der Hauptseite verhält sich das Feld "E-Mail" standardmäĂig wie LTR. Dies ist ziemlich vernĂźnftig, da die meisten E-Mail-Adressen nur lateinische Buchstaben enthalten.
Aber nicht universell. Aktuelle Standards erlauben die Verwendung fast aller Zeichen in E-Mail-Adressen. Infolgedessen lautet die auf Hebräisch geschriebene Adresse:
- nach links ausgerichtet;
- Beim Schreiben der Symbole "@" und ".", die eine neutrale Schreibweise haben, ändert die gesamte Konstruktion ihre Position, was nicht sehr praktisch ist.
Das Standardkennwort lautet RTL, der Cursor befindet sich rechts.
Aber was passiert, wenn wir versuchen, ein Passwort aus lateinischen Zeichen oder Zahlen einzugeben? Während der Eingabe wird der Cursor links von dem eingegebenen Text positioniert. Dies ist nicht kritisch, da das Kennwort immer noch nicht angezeigt wird (bis die Schaltfläche "Kennwort anzeigen" angezeigt wird). Das Verhalten des Felds kann jedoch verbessert werden, indem dem Benutzer angezeigt wird, in welchem ââLayout er das Kennwort eingibt. Die Besonderheit von RTL-Schnittstellen besteht darin, dass Benutzer trotz der Tatsache, dass der grĂśĂte Teil des Textes rechtshändig ist, sehr oft das Tastaturlayout wechseln mĂźssen, um E-Mail, Login und Passwort einzugeben, die normalerweise als LTR geschrieben werden. Ein kleiner Tipp hier wäre hilfreich.
1.2 Anmeldeformular
Schauen wir uns nun das Registrierungsformular an, das sich ebenfalls auf der Hauptseite befindet.
Hier kÜnnen Sie sehen, dass alle Felder eindeutig als RTL betrachtet und rechtsbßndig sind, was beim Umgang mit LTR-Text nicht sehr praktisch ist. Besonders unangenehm wird es bei der Eingabe von E-Mails - Symbole "@" und "." Erzwingen Sie, dass Teile der Adresse während der Eingabe ausgetauscht werden. Was im vorherigen Beispiel fßr seltene RTL-Adressen nicht sehr kritisch war, wird fßr LTR kritisch.
1.3 Messenger - kompakt
Messenger ist eines der wichtigsten Tools dieser Anwendung. Alles sollte auf jeden Fall perfekt sein. Werfen wir einen Blick auf die kompakte Version:
In der Tat. Das Feld wird standardmäĂig als RTL betrachtet. Sobald wir jedoch mit der Eingabe von LTR-Text beginnen, ändert sich seine Richtung in eine bequeme Eingabe. Nichts springen. Stellen wir sicher, dass auch in der erweiterten Version alles in Ordnung ist.
1.4 Messenger - erweitert
Hoppla! Obwohl sich der lateinische Text im RTL-Feld korrekt verhält, ist er richtig begrßndet. Es ist unkritisch, aber die Logik ist nicht klar: Warum unterscheidet sich das Verhalten der ideologisch gleichen Komponente?
Anscheinend wurden die vier betrachteten Komponenten von verschiedenen Teams oder zu verschiedenen Zeiten entwickelt, als die Anforderungen an internationale Schnittstellen unterschiedlich waren.
Gibt es hier etwas, das verbessert werden kann? Wir denken schon. DarĂźber hinaus auf sehr einfache Weise Ăźber sie - unten.
Beispiel 2. Ein ziemlich bekannter Postdienst
2.1 Anmeldeformular
Hier gehen die Entwickler vom Prinzip der obligatorischen Rechtsausrichtung aus, behalten aber die Einstellung zum Eingabeinhalt als LTR bei. Dies fßhrt zu mehreren unbequemen Punkten, ähnlich den in den vorherigen Beispielen gezeigten.
Ein E-Mail-Eingabefeld erwartet beispielsweise den Eingabetext auf der rechten Seite.
Der eingegebene LTR-Text verhält sich jedoch wie erwartet ohne Sprßnge (und die Verwendung von nicht-lateinischen Zeichen in diesem Mail-Dienst ist verboten).
, , RTL- , . , : - , - â , , , . Badoo, , .
Interessanteres Verhalten fĂźr das Passwortfeld. Es ist auch gezwungen, rechtsbĂźndig auszurichten, und wird auch als LTR betrachtet, was unserer Meinung nach zum Verlust nĂźtzlicher Informationen Ăźber das Tastaturlayout beim Tippen in RTL-Sprache fĂźhrt.
Und wenn die Passwortanzeige eingeschaltet ist, wird es wirklich schlimm, da neutrale Zeichen das Passwort springen lassen, wie es bei E-Mails in den vorherigen Beispielen der Fall ist. Im Beispiel aus dem nächsten Screenshot sollte das Ausrufezeichen an erster Stelle stehen und der Cursor sollte sich links befinden.
2.2 Anmeldeformular Das Anmeldeformular
ist plÜtzlich viel benutzerfreundlicher. Dies ist jedoch logisch - die eingegebenen Informationen sind vielfältiger. Hier erscheinen mindestens der Vor- und Nachname.
Die Ausrichtung ist auch hier immer rechtsbßndig, aber der Text wird nicht mehr eindeutig als linksseitig betrachtet, und die Felder ändern ihre Richtung abhängig von den eingegebenen Zeichen.
Die einzige Ausnahme ist das Adressfeld. Hier bleibt die Ausrichtung. Sieht etwas seltsam aus.
Aber das Passwortfeld ist wieder frustrierend. Trotz der Tatsache, dass diese Seite die Richtung des Textes in den Feldern dynamisch ändern kann, wurde sie aus irgendeinem Grund nicht zum Kennwortfeld hinzugefßgt.
Wie Sie sehen, werfen selbst solche einfachen Komponenten Fragen auf. Was kĂśnnen wir Ăźber komplexe Steuerelemente wie einen Kalender sagen?
Badoo Erfahrung
Basierend auf den Ergebnissen dieser kurzen Ăbersicht werden wir die Anforderungen fĂźr das Verhalten von Textfeldern formulieren, die wir erhalten mĂśchten:
- Platzhalter sollten abhängig von der Richtung der Schnittstellensprache ausgerichtet werden.
- Der eingegebene Text sollte je nach Richtung automatisch die linke oder rechte Seite des Feldes einnehmen.
- Der Cursor in einem leeren Feld muss abhängig von der Richtung der Schnittstellensprache ausgerichtet sein.
- Wenn Sie Text in die Felder fĂźr die Eingabe des Telefons eingeben, muss sich die URL immer auf der linken Seite befinden.
- E-Mail-Felder erwarten linkshändigen Text, sind aber auch fßr Rechtshänder bereit.
- Cursor in leeren Feldern fĂźr E-Mail, Telefon und URL werden links ausgerichtet.
Und versuchen wir dies zu erreichen.
Beginnen wir damit, ein Feld fĂźr einfachen Text wie einen Namen ohne Tricks zu betrachten.
<html lang=âheâ dir=ârtlâ>
...
<input type="text">
...
</html>
Der Cursor befindet sich erwartungsgemäà rechts, da das INPUT-Tag die Textrichtung von HTML erbt. Fßr eine rechtshändige Benutzeroberfläche wird erwartet, dass der eingegebene Text hÜchstwahrscheinlich rechtshändig ist.
Aber was passiert, wenn wir anfangen, LTR-Zeichen einzugeben? Eine uns bereits bekannte Situation mit einem ungewĂśhnlichen Cursor auf der linken Seite.
In den obigen Beispielen verfolgen die Entwickler einen schwierigen Ansatz zur LÜsung des Problems: Sie ßberwachen die Eingabezeichen mithilfe von JavaScript und ändern das dir-Attribut im laufenden Betrieb. Dies war bis vor kurzem sinnvoll, aber jetzt verstehen alle modernen Browser das Attribut dir = "auto" sehr gut und kÜnnen selbst Text erweitern. Fßgen wir es hinzu.
<input type="text" dir=âautoâ>Es stellte sich heraus, was wir brauchen.
Versuchen wir, dem Feld einen Platzhalter hinzuzufĂźgen.
Im Allgemeinen ist die Verwendung von Platzhaltern ein separates Thema, das vertraut gemacht werden muss. Laut einigen Entwicklern beeinträchtigt die gedankenlose Verwendung dieses Attributs die Verwendbarkeit von Eingabefeldern . Wenn wir die Entscheidung Ihnen ßberlassen, gehen wir in diesen Experimenten davon aus, dass wir Platzhalter benÜtigen.
<input type="text" dir=âautoâ placeholder=â×Š× ×¤×¨××â>
Oh! Aus irgendeinem Grund bleibt alles linksbĂźndig, einschlieĂlich des Platzhalters.
Der Punkt ist im Attribut dir = "auto". Wenn kein Inhalt vorhanden ist, kann der Browser die Textrichtung als Linkshänder betrachten. Versuchen wir, die Platzhalter am rechten Rand zu platzieren. Dies ist normalerweise Text in der Sprache der Benutzeroberfläche, daher benÜtigen wir kein automatisches Layout.
input::placeholder {
direction: rtl;
}
Viel besser. Nur die Position des Cursors ist verwirrend - er befindet sich immer noch links. Lassen Sie uns versuchen, einen leeren EINGANG mit der schĂśnen: Platzhalter-gezeigten Pseudoklasse zu gestalten.
input:placeholder-shown {
direction: rtl;
}
Leider funktioniert bei Eingaben ohne Platzhalter die Eigenschaft: Platzhalter angezeigt nicht. Sie kĂśnnen dies beheben, indem Sie allen solchen Feldern einen leeren Platzhalter hinzufĂźgen:
<input type="text" dir=âautoâ placeholder=â â>Jetzt ist alles so wie es sein sollte. Platzhalter rechts, Cursor rechts (weil wir zunächst RTL-Text erwarten), Text - rechts oder links, je nachdem, in welcher Sprache wir drucken.
Das reicht aber nicht.
Wir erinnern uns, dass E-Mail-Adressen beliebige Zeichen enthalten kÜnnen. Daher ist der Code eines solchen EINGANGS dem vorherigen ähnlich.
<input type="email" dir=âautoâ placeholder=â×ת××ת ×××××× ×× ×ץפר × ×××â>(Bei Badoo erwarten wir zunächst die Eingabe einer E-Mail, aber wir erlauben auch die Eingabe einer Telefonnummer, so dass der Platzhalter dies sagt.)
Obwohl Zeichen beliebig sein kĂśnnen, erwarten wir zunächst die Eingabe der Adresse in lateinischer Sprache (und in unserem Fall in Zahlen) Telefonnummern). Das heiĂt, der Cursor in einem leeren Feld muss sich links befinden. Machen wir eine Ausnahme in CSS.
input[type='email']:placeholder-shown {
direction: ltr;
}Es lohnt sich nicht, darauf einzugehen. Wir haben noch Felder mit den Typen tel, number, url. Sie sind immer Linkshänder, daher schreiben wir den folgenden Code fßr sie:
<input type="tel" dir=âltrâ placeholder=â×ץפר ××פ××â>Und fĂźgen Sie Ausnahmen fĂźr leere Felder hinzu:
input[type='tel']:placeholder-shown,
input[type='number']:placeholder-shown,
input[type='url']:placeholder-shown {
direction: ltr;
}
Jetzt ist es so geworden, wie wir es geplant haben.
Nur eine kleine Kleinigkeit fĂźr diejenigen, die sich fĂźr IE11 interessieren. Dieser Browser versteht das Attribut dir = "auto" nicht, sodass automatische Ănderungen der Textrichtung ohne JavaScript nicht mĂśglich sind.
Wir ermĂśglichen Benutzern jedoch weiterhin die bequeme Eingabe von E-Mail-Adressen und Telefonnummern.
.ie11 input[type="email"],
.ie11 input[type="tel"] {
direction: ltr;
}
.ie11 input[type="email"]:-ms-input-placeholder,
.ie11 input[type="tel"]:-ms-input-placeholder {
direction: rtl;
}
Wenn Sie das gesamte CSS erfassen, Präfixe und den SCSS-Präprozessor hinzufßgen, erhalten Sie Folgendes (ja, wir erinnern uns, dass INPUT-Felder beispielsweise vom Typ Kontrollkästchen sein kÜnnen, aber der Einfachheit halber werden wir diesen Punkt ignorieren):
[dir=ârtlâ] input {
&::-webkit-input-placeholder {
direction: rtl;
}
&::-moz-placeholder {
direction: rtl;
}
&:-ms-input-placeholder {
direction: rtl;
}
&::placeholder {
direction: rtl;
}
&:placeholder-shown[type='email'],
&:placeholder-shown[type='tel'],
&:placeholder-shown[type='number'],
&:placeholder-shown[type='url'] {
direction: ltr;
}
}
.ie11 [dir=ârtlâ] input {
&[type="email"],
&[type="tel"] {
direction: ltr;
&:-ms-input-placeholder {
direction: rtl;
}
}
}
Wir bei Badoo unterteilen Stile in LTR und RTL, sodass wir keine Kaskade von [dir = ârtlâ] haben, und schreiben die Eigenschaften fĂźr LTR so, dass sie in RTL umgewandelt werden. Aber das Prinzip ist meiner Meinung nach klar.
FĂźr TEXTAREA ist das Schema bis auf eine Ausnahme dasselbe: Dort mĂźssen Sie die Feldtypen nicht berĂźcksichtigen und den Cursor oder Text am linken Rand platzieren - der Inhalt wird aufgrund des Attributs dir = "auto" immer automatisch erweitert.
Ein wichtiger Punkt, den Sie beachten sollten: Alle Feldanforderungen gelten auch fßr LTR-Schnittstellen. Der eingegebene Name in Hebräisch oder Arabisch sollte rechts angezeigt werden, der Cursor sollte sich links befinden. Der seltene Fan einer exotischen E-Mail-Adresse mit rechten Zeichen sollte seine E-Mail während der Eingabe sehen - von rechts nach links.
Fazit: Durch Hinzufßgen der richtigen Attribute zu Eingabefeldern und einigen Zeilen CSS kÜnnen Sie Formulare kostengßnstig, wenn nicht vollständig an Rechtshänder anpassen, und zumindest ihre Benutzerfreundlichkeit erheblich verbessern, indem Sie sie fßr Benutzer logischer und verständlicher machen.