Übersetzung von "
RTL Styling 101 - Eine umfassende Anleitung zum Stylen von RTL in CSS " von Ahmad Shadid.
Über 292 Millionen Menschen weltweit sprechen Arabisch als Muttersprache. Ich gehöre zu ihnen und entwickle manchmal Websites, die beide Schreibrichtungen unterstützen: von links nach rechts (LTR - Left To Right) und von rechts nach links (Right To Left).
Einführung in RTL Styling
CSS verwendet standardmäßig die LTR-Richtung. Wenn Sie die Browser-Stile für das HTML-Element überprüfen, sehen Sie, dass für die Eigenschaft dir (oder "direction") der Wert ltr der Standardwert ist. Das folgende Beispiel zeigt den Unterschied zwischen LTR- und RTL-Markup.
Achten Sie auf den RTL-Block - im Gegensatz zu LTR wird der Text darin von rechts nach links gelesen. In diesem einfachen Beispiel wurde es vom Browser korrekt angezeigt. Um die Richtung der Dokumentsprache zu ändern, müssen Sie dem Stammelement das dir-Attribut hinzufügen.
<html dir="rtl">...</html>
Wenn sich der dir-Wert ändert, sollten alle verschachtelten Elemente automatisch als Nächstes wechseln: Überschriften, Absätze, Links, Bilder und Formulare.
Erwähnenswert ist auch, dass das dir-Attribut auf "auto" gesetzt werden kann, wodurch die Richtung für das Element basierend auf einer Analyse seines Inhalts automatisch geändert wird. Gemäß der HTML-Spezifikation:
Die Autoren raten dringend, diesen Wert nur als letzten Ausweg zu verwenden, wenn die Richtung des Texts wirklich unbekannt ist und es keine Möglichkeit gibt, dies auf der Serverseite effektiv zu bestimmen.
Zusätzlich zum Setzen des dir = rtl-Attributs für das HTML-Element können wir auch direction: rtl als CSS-Stil hinzufügen.
.element { direction: rtl; }
CSSWG (die CSS-Arbeitsgruppe) empfiehlt jedoch, die Richtung genau als Attribut für das HTML-Stammelement zu definieren, um sicherzustellen, dass das Markup korrekt ist, unabhängig davon, ob CSS vorhanden ist oder nicht.
Beispiel für die Änderung der Markierungsrichtung
Schauen wir uns ein detaillierteres Beispiel an, um besser zu verstehen, wie die Markierungsrichtung von LTR zu RTL geändert wird.
<article class="media"> <img class="media__photo" src="blueberry-cheesecake.jpg" alt=""> <div class="media__content"> <h2>Blueberry Cheesecake</h2> <p>...</p> <p><a href="#" class="link">View Recipe</a></p> </div> </article>
Anfangs habe ich das gute alte Float verwendet, um das Bild im LTR-Markup linksbündig auszurichten, und natürlich Clearfix angewendet.
.media:after { content: ""; display: block; clear: both; } .media img { float: left; width: 200px; margin-right: 16px; }
Dann fügen wir dir = "rtl" für das Element hinzu, das arabischen Text enthält. Das folgende Ergebnis wird erhalten:
Alle Elemente außer dem Bild werden auf der rechten Seite ausgerichtet. Dies geschah, weil die image -Eigenschaft auf float gesetzt war: left und margin-right: 16px. Um dies zu beheben, überschreiben Sie die folgenden Stile
.media[dir="rtl"] img { float: right; margin-right: 0; margin-left: 16px; }
Englische und arabische Inhalte im LTR-Layout
Was passiert, wenn ein Text eine Mischung aus englischen und arabischen Wörtern enthält und das Markup in Richtung LTR zeigt? Das Ergebnis ist seltsam
Der Browser zeigt den Titel nicht richtig an. Arabischsprachige werden verwirrend sein. Die Wörter in dieser Überschrift sollten in der im Bild unten gezeigten Reihenfolge sein. Einfach rechts anfangen.
Um dieses Problem zu vermeiden, legen Sie nach Möglichkeit die entsprechende Sprachrichtung fest. Wenn das Element auf das Attribut dir = "rtl" gesetzt ist, wird es wie erwartet angezeigt.
Bei langen Titeln kann die Situation noch komplizierter werden. Unten habe ich es ein wenig ergänzt und das Ergebnis war unerwartet. Ich habe mit Zahlen die richtige Reihenfolge angegeben. Wieder von rechts beginnend.
Wenn das Attribut dir = "rtl" für das Element festgelegt ist, wird der Titel korrekt. Das heißt, der Satz sieht grammatisch korrekt aus und die Wörter sind in der richtigen Reihenfolge angeordnet.
Flexbox
Flexbox berücksichtigt grundsätzlich den im Dokument eingestellten Schreibmodus. Dieser Faktor wird verwendet, um festzulegen, wie die Blöcke standardmäßig auf der Seite ausgerichtet werden. Beispielsweise werden sie auf einer englischen Website von links nach rechts und auf Chinesisch von oben nach unten angezeigt. Für Englisch und Arabisch lautet die Standardeigenschaft für den Schreibmodus "horizontal-tb".
Gemäß dem
Mozilla Developer Network (MDN) bedeutet ein horizontaler-tb-Wert Folgendes:
Der Inhalt wird horizontal von links nach rechts und vertikal von oben nach unten positioniert. Die nächste horizontale Linie liegt unter der vorherigen.
Wenn sich die Seitenrichtung in RTL ändert, erweitert flexbox den Fluss seiner Elemente entsprechend. Das ist ein riesiger Vorteil! Das Bild unten zeigt, wie sich die Flexbox-Achse in Abhängigkeit vom Wert der direction-Eigenschaft dreht.
Im folgenden Beispiel habe ich drei Elemente erstellt und nummeriert, um den Unterschied beim Ändern der Seitenrichtung anzuzeigen.
<div class="element"> <div class="item"^_^gt lt^_^/div> <div class="item"^_^gt lt^_^/div> <div class="item"^_^gt lt^_^/div> </div>
.element { display: flex; flex-direction: row; }
CSS-Gitter
Wie bei der Flexbox hängt das CSS-Raster vom Schreibmodus des Dokuments ab, was dieselben Vorteile bietet wie bei der Flexbox.
Im folgenden Beispiel sollte sich für die LTR-Richtung die Seitenleiste links und die Hauptleiste rechts befinden. Bei RTL ist das Gegenteil der Fall. Wenn wir CSS Grid verwenden, wird diese Neuerstellung automatisch in Übereinstimmung mit der auf dieser Seite festgelegten Richtung durchgeführt.
<div class="element"> <div class="side">Side</div> <div class="main">Main</div> </div>
.element { display: grid; grid-template-columns: 220px 1fr; grid-gap: 1rem; }
Hauptfehler beim Umschalten in RTL-Richtung
Nicht-arabische Entwickler machen häufig Fehler, die Muttersprachlern sofort auffallen.
1. Buchstabenabstand
Im Englischen ist es üblich, den Buchstabenabstand innerhalb eines Wortes mithilfe der Buchstabenabstandseigenschaft zu steuern. Betrachten Sie das folgende Beispiel mit Inhalten auf Englisch. Es sieht ganz normal aus.
Wenn Sie jedoch denselben Buchstabenabstand zum arabischen Text hinzufügen, sieht dies sehr merkwürdig aus. Betrachten Sie das folgende Beispiel aus der Praxis.
Beachten Sie, dass in dem Text, auf den die Buchstabenabstandseigenschaft angewendet wird, die Buchstaben jedes Wortes voneinander getrennt sind. Das ist nicht richtig. Arabische Buchstaben sollten zusammenhängend aussehen, und der gleiche Buchstabenabstand wie in Englisch verhindert dies. Stellen Sie sicher, dass Sie bei der Arbeit mit einer mehrsprachigen Site nicht vergessen, die Buchstabenabstandseigenschaft: 0 an der richtigen Stelle festzulegen.
2. Texttransparenz
Bei der Gestaltung von Websites wird der Text häufig durchscheinend. Zum Beispiel, um seine untergeordnete Bedeutung zu markieren. Dies funktioniert für Englisch. Wenn der Inhalt jedoch auf Arabisch ist, kann ein Problem aufgrund der seltsamen Art der Wiedergabe des Texts auftreten.
Es werden Orte angezeigt, an denen sich die Farbe des Umrisses der Figur aufgrund ihrer Überlappung ändert. In diesem Beispiel wurde die Buchstabenabstandseigenschaft nicht festgelegt, sodass das Problem hiervon nicht betroffen ist. Die Lösung besteht darin, Farben ohne Transluzenz einzustellen (die normalerweise über RGBa oder Opazität eingestellt wird).
3. Unterschiede in der Wortgröße in verschiedenen Sprachen
Wenn eine Site ins Arabische übersetzt wird, ändert sich die Größe der Elemente manchmal aufgrund der Tatsache, dass einige Wörter nach der Übersetzung größer oder kleiner werden. Betrachten Sie das folgende Beispiel, in dem ich die Navigation der Smashing Magazine-Site simuliert habe.
In der arabischen Version haben einige der Wörter fast die gleiche Größe wie ihre englischen Versionen, einige sind genau gleich und einige sind größer. Zur Verdeutlichung finden Sie hier einen Vergleich der einzelnen Wörter und ihrer arabischen Übersetzung.
Sie fragen sich vielleicht, warum ich über den Unterschied in der Größe von Wörtern in verschiedenen Sprachen spreche, da dies normal ist und erwartet wird. Betrachten Sie das folgende Beispiel aus der Praxis von LinkedIn.
Die Schaltfläche "Fertig" wird ins Arabische als "تم" übersetzt, weshalb sie recht klein wird und im Allgemeinen seltsam aussieht. Insbesondere in solchen Fällen ist es besser, die Eigenschaft min-width für die Schaltfläche festzulegen. Ich habe es über das Entwicklerfenster hinzugefügt, um zu zeigen, wie es aussehen sollte:
Hier ist ein sehr ähnliches Beispiel von Twitter:
Bitte beachten Sie, dass die oben genannten Probleme mit LinkedIn und Twitter zum Zeitpunkt des Schreibens (13. Dezember 2019) festgestellt wurden.
4. Text abschneiden
Ich habe einmal an einem mehrsprachigen Projekt gearbeitet und bin auf ein Problem gestoßen, das mit dem Kürzen von Text in die falsche Richtung zusammenhängt. Betrachten Sie das folgende Beispiel.
Die Kürzung für den englischen Text ist falsch. Dies sollte am Ende des Elements geschehen, nicht am Anfang. Um dieses Problem zu beheben, müssen Sie das Attribut dir = "auto" für dieses Element festlegen. Anschließend analysiert der Browser automatisch den Inhalt und entscheidet, welcher dir-Wert angewendet werden soll.
<p dir="auto">أهلاً وسهلاً بكم في المقال الذي يتحدث عن تصميم صفحات الويب للغة العربية</p> <p dir="auto">Welcome to the article that explains how to design for RTL pages.</p>
5. Eine schlechte RTL-Schriftart auswählen
Das Vorhandensein einer RTL-Version der Site bedeutet nicht, dass Sie sich einfach darauf beschränken können, die vom Benutzer standardmäßig installierte Systemschrift anzugeben. Sie müssen dies ernst nehmen, um eine gute Lesbarkeit zu gewährleisten. Ein Beispiel für die Auswahl einer fehlgeschlagenen Schriftart ist Twitter:
Aus arabischer Sicht ist das Wort „تغريد“ aus mehreren Gründen schwer zu lesen:
- Nicht sehr gute Schrift
- Fett beeinträchtigt die Lesbarkeit
- Die Punkte des Wortes sind sehr klein und zu nah an den Buchstaben
Ich habe einige Beispiele genannt, die viel klarer aussehen:
6. Hindi und arabische Zahlen mischen
Auf Arabisch gibt es zwei Möglichkeiten, Zahlen zu schreiben:
- Hindi: ١ ١ ٢ ٣ ٤ ٦ ٧ ٧ ٨
- Arabisch: 0 1 2 3 4 5 6 7 8 9
Die im Englischen verwendeten Zahlen stammen aus dem Arabischen: "0, 1, 2, 3, 4, 5, 6, 7, 8, 9". Text, der Zahlen enthält, darf nur einer von zwei Optionen entsprechen: entweder Hindi oder Arabisch.
Laut Wikipedia:
Der Grund, warum die Zahlen in Europa und Amerika als "arabisch" bezeichnet werden, ist, dass sie im 10. Jahrhundert von arabischsprachigen Menschen aus Nordafrika in Europa eingeführt wurden.
Das folgende Beispiel enthält eine Mischung aus Hindi und arabischen Zahlen. Dieser Ansatz scheint inkonsistent zu sein, und stattdessen sollte ein einzelner Stil verwendet werden.
Momente, die mit RTL möglicherweise nicht funktionieren
1. Zeilenhöhe (Zeilenhöhe)
In der Regel wird eine separate Schriftart für das RTL-Markup festgelegt. Überprüfen Sie in diesem Fall, wie der Inhalt in einer oder mehreren Zeilen angezeigt wird. Im folgenden Beispiel ist zwischen den Zeilen für arabischen Text weniger Platz als für Englisch, obwohl sie für die Eigenschaft line-height denselben Wert haben.
Es ist wichtig, dies zu berücksichtigen und den richtigen Wert für die Zeilenhöhe für arabischen Text festzulegen.
Twitter hat beispielsweise eine Schaltfläche mit zugeschnittenem Inhalt. Nur wegen des falschen Zeilenhöhenwertes.
Beachten Sie, dass im ersten Bild die arabische diakritische Schrift abgeschnitten ist. Es heißt Kasra und ist sehr wichtig für das korrekte Lesen des Wortes. Im nächsten Bild habe ich die Zeilenhöhe korrigiert und jetzt werden die Zeichen vollständig ohne Zuschneiden angezeigt.
2. Unterstrichene Links
Mit arabischen Wörtern sieht die standardmäßige Unterstreichung von Links aus CSS schlecht aus. Dies liegt an den Besonderheiten des Schreibens von Wörtern und Buchstaben auf Arabisch und ist in der folgenden Abbildung dargestellt:
Ich habe die Problemzonen mit einem roten Kreis markiert. Die Unterstreichung überlappt die Buchstabenpunkte. Hier ist eine Nahaufnahme:
Mit einem roten Kreis markierte Punkte überlappen sich mit einer Unterstreichung, was das Lesen erschwert. Die Lösung besteht darin, die Unterstreichung mit CSS anzupassen.
2.1. Typografie (Textdekoration)
Es ist möglich, den Stil und die Farbe der Unterstreichung mit den neuen Eigenschaften Textdekorationsstil und Textdekorationsfarbe zu ändern. Es kann jedoch nicht garantiert werden, dass dies bei allen Schriftfamilien und -größen korrekt funktioniert. Zum Zeitpunkt des Schreibens ist Firefox der Browser mit der besten Unterstützung für diese Funktionen.
.link-2 { text-decoration-color: rgba(21, 132, 196, 0.2); text-decoration-style: normal; text-underline-offset: 4px; text-decoration-thickness: 2px; }
2.2 Schatten (Kastenschatten)
Die Browserunterstützung für die Box-Shadow-Eigenschaft ist viel besser als die Textdekoration. Sie können überprüfen, ob eine der neuen Textdekorationseigenschaften unterstützt wird. Wenn der Browser dies nicht unterstützt, wenden Sie mithilfe der Box-Shadow-Eigenschaft ein Fallback an.
.link-3 { color: #000; text-decoration-color: rgba(21, 132, 196, 0.2); text-decoration-style: normal; text-underline-offset: 4px; text-decoration-thickness: 2px; box-shadow: inset 0 -5px 0 0 rgba(#1584c4, 0.2); } @supports (text-decoration-color: red){ .link-3 { box-shadow: none; } }
3. Zeilenumbruch
Wenn Sie die Eigenschaft word-break verwenden, müssen Sie die korrekte Funktionsweise überprüfen. Schauen Sie sich folgendes Beispiel an:
Die eingekreisten Bereiche sind arabische Wörter, die aufgrund von Wortumbrüchen durch Zeilenumbrüche unterbrochen werden. Und auf Arabisch wird kein Zeilenumbruch verwendet, da die Buchstaben jedes Wortes miteinander verbunden werden müssen.
4. Abkürzungen
Im Englischen werden Abkürzungen häufig verwendet, beispielsweise für Wochentage. So wird aus "Samstag" "Sa".
Im Arabischen ist dies prinzipiell nicht möglich, da die Buchstaben des Wortes verbunden sein müssen.
Bidirektionale Symbole
Symmetrische Symbole müssen nicht umgedreht werden, wenn Sie zwischen LTR- und RTL-Layouts wechseln. Hier einige Beispiele:
Gleichzeitig ist es für einige Symbole wichtig, die Richtung in der RTL-Version der Site zu ändern, damit sie vom Benutzer richtig verstanden werden.
Gegenstände spiegeln
Während ich an einigen Komponenten arbeite, brauche ich eine Möglichkeit, sie schnell umzudrehen. In Sketch kopiere ich die Komponente und drehe sie mit dem entsprechenden Befehl um. Dieselbe Funktionalität ist in Adobe XD und Figma verfügbar.
Um zu sehen, was ich meine, ist hier eine Animation, die zeigt, was ich nach dem Umdrehen der Komponente mache.
Konstruktionsmerkmale für RTL
In diesem Abschnitt werde ich die gängigsten Komponenten untersuchen und zeigen, wie sie im RTL-Modus aussehen sollten.
Schaltflächensymbole
In bestimmten Situationen verfügt die Schaltfläche über ein Symbol, das ein Menü mit zusätzlichen Aktionen öffnet. In diesem Fall sollte die Position des Symbols im RTL-Layout umgekehrt werden.
Eingabefelder
Einige Formulareingabefelder müssen auch im RTL-Modus linksbündig bleiben. Zum Beispiel Eingabefelder E-Mail oder Telefonnummern.
Semmelbrösel
Die Pfeile zwischen den Abschnitten in Paniermehl sollten ebenfalls gedreht werden.
Seitentitel
Die Seitenkopfkomponente enthält die Start- und Endabschnitte. Beide müssen in RTL gedreht werden
Tabellen
Tische müssen auch gedreht werden.
Lesezeichen
Befindet sich das Symbol in Lesezeichen im LTR-Modus links vom Namen, muss diese Komponente in RTL erweitert werden.
Karte
Für eine horizontale Karte müssen Bild und Text in RTL ausgetauscht werden
Popup-Benachrichtigungen
Wie zu erwarten, sollten die Symbole "Schließen" und "Warnung" vertauscht werden
Boolesche CSS-Eigenschaften
Laut MDN:
Logische Eigenschaften und Werte CSS ist ein Modul, das logische Eigenschaften und Werte darstellt, mit denen das Layout mithilfe logischer und nicht physischer Richtungen und Dimensionen gesteuert werden kann.
Nehmen wir ein einfaches Beispiel. Angenommen, wir müssen eine Textzeile rechts ausrichten. Fügen Sie Folgendes hinzu:
.page-header { text-align: right; }
Und für RTL:
[dir="rtl"] .nav-item { text-align: left; }
Was wäre, wenn es eine Möglichkeit gäbe, nur einen Wert für die Textausrichtungseigenschaft hinzuzufügen, wodurch die Ausrichtungsseite angesichts der Richtung der Seite geändert würde? Die logischen Eigenschaften von CSS helfen!
.page-header { text-align: end; }
Wenn Sie es verwenden, basiert die von der Eigenschaft text-align angegebene Seite auf der Richtung der Seite.
DemoUm den Unterschied zwischen Anfang und Ende besser erkennen zu können, habe ich das folgende Diagramm erstellt. Der Startwert entspricht dem linken Wert in LRT und dem rechten Wert in RTL. Das gleiche gilt für das Ende, genau das Gegenteil.
Nachdem Sie sich einen Überblick über die Funktionsweise verschafft haben, sehen wir uns weitere Beispiele und Möglichkeiten an, wie Sie die logischen Eigenschaften von CSS anwenden können.
Logische Auffüllung
Angenommen, wir haben ein Eingabefeld mit einem Suchsymbol auf der rechten Seite. Wir müssen die Polsterung auf beiden Seiten einstellen. Die Polsterung rechts ist etwas größer, um ein Überlagern des Symbols im Text zu vermeiden.
.input--search { padding-inline-start: 1rem; padding-inline-end: 2.5rem; }
Logische Marge
Der Rand rechts neben dem Symbol sollte logisch sein, daher verwenden wir das Rand-Inline-Ende.
.page-header__avatar { margin-inline-end: 1rem; }
Logische Frames (Rahmen)
Oft wird ein Rahmen verwendet, um ein aktives Navigationselement anzuzeigen. Im obigen Beispiel wird auf der linken Seite jedes Elements ein Rahmen gesetzt. Wie implementiere ich das mit logischen Eigenschaften?
.nav__item { border-inline-start: 3px solid transparent; } .nav__item.is-active { border-color: #1e9ada; }
Logische Abrundung von Ecken (Randradius)
Im obigen Bild wird der Hintergrund des Navigationselements nur für die obere rechte und linke Ecke abgerundet. Dies kann mithilfe logischer Eigenschaften implementiert werden:
.nav__item { border-start-end-radius: 30px; border-end-end-radius: 30px; background-color: transparent; } .nav__item.is-active { background-color: #ecf6fb; }
Logische Eigenschaften des Spickzettel
Wenn Sie Zweifel an der Wahl eines logischen Analogons der Eigenschaft haben, die die Seite definiert, können Sie einen Blick in den unten stehenden Spickzettel werfen. Bitte beachten Sie, dass es nur die logischen Eigenschaften enthält, die beim Arbeiten mit den Modi LTR und RTL nützlich sein können. Ich habe diesen Spickzettel basierend auf einem wunderbaren
Artikel von Adrian Roselli zusammengestellt.
https://codepen.io/shadeed/pen/2981e62691e67452d9f282a5351d7c79Darüber hinaus hat Adrian eine Demo erstellt, die es einfacher macht, den Unterschied zwischen logischen und gerichteten Eigenschaften zu verstehen.
Browser-Unterstützung
Die Browserunterstützung ist ziemlich gut für Auffüllungs-, Rand- und Textausrichtungseigenschaften. Für Randradius-Eigenschaften reicht dies jedoch immer noch nicht aus. Nachfolgend finden Sie eine Tabelle mit Supportleistungen von der Website "
Kann ich verwenden" :
Auch wenn die Unterstützung noch nicht perfekt ist (und niemals perfekt sein wird), rate ich Ihnen, logische Eigenschaften mit Fallbacks sofort zu verwenden. Zum Beispiel
.input--search { padding-left: 1rem; padding-right: 2.5rem; padding-inline-start: 1rem; padding-inline-end: 2.5rem; }
Sie können auch das
PostCSS Logical- Plugin verwenden, das für jede verwendete logische Eigenschaft einen Fallback hinzufügt.
CSS-Namenskonventionen
Vermeiden Sie es, CSS-Klassennamen zuzuweisen, die an ihre Elemente angehängt sind. Verwenden Sie Namen, die in wiederverwendbare Komponenten extrahiert werden können. Betrachten Sie das folgende Beispiel:
<div class="c-section"> <p><a href="#" class="see-link">See more</a></p> </div> <div class="c-section"> <p><a href="#" class="see-link">Learn more</a></p> </div>
Die Links sind in beiden Blöcken gleich, aber ihre Namen sind unterschiedlich. Im zweiten Block macht die Klasse see-link keinen Sinn. Ein guter Name könnte c-link sein. Das Präfix c– wird für Komponenten ersetzt, ich habe diese Methode aus dem ITCSS-Framework übernommen.
Nachdem Sie die Idee verstanden haben, können wir sie auch auf das RTL-Styling anwenden. Das folgende Beispiel zeigt einen Abschnitt mit zwei Kindern
Anstatt den Elementen Namen wie ".c-page-header__left" und ".c-page-header__right" zu geben, bezeichne ich sie als ".c-page-header__start" und ".c-page-header__end". Dies ist zukunftsorientierter und bedeutet nicht, dass die Site nur im LTR- oder RTL-Modus erstellt wird.
Automatisierungs-Tools
Es gibt großartige Tools, die die Arbeit mit LTR- und RTL-Markups erleichtern.
1. Bi-App-Sass
Mit Anas Nakavas
Bi-App-Sass können Sie eine Version von Stilen schreiben, die in zwei verschiedene Stylesheets kompiliert werden: eines für LRT und eines für RTL-Markup.
Dieses Tool kann für große Projekte nützlich sein. Infolgedessen kann es für jede Schreibrichtung viele Stylesheets geben. Betrachten Sie das folgende Beispiel:
.elem { display: flex; @include margin-left(10px); @include border-right(2px solid #000); }
Der resultierende CSS-Code kann wie folgt aussehen.App-ltr.css-Datei: .elem { display: flex; margin-left: 10px; border-right: 2px solid #000; }
App-rtl.css-Datei: .elem { display: flex; margin-right: 10px; border-left: 2px solid #000; }
Beachten Sie jedoch, dass die letzte Übergabe an das Repository auf GitHub vor vier Jahren (November 2015) erfolgte.2. RTLCSS
RTLCSS von Mohamed Jonas ist ein Framework für die Umwandlung von LTR Sheets in RTL.Der Unterschied zwischen diesem Tool besteht darin, dass es für eine bereits zusammengestellte Version der CSS-Datei gilt. Wenn Ihr Projekt beispielsweise mehr als 50 Sass-Komponenten enthält, ist RTLCSS hilfreich, um eine kompilierte CSS-Datei zu analysieren und daraus eine RTL-Version zu erstellen.Praxisbeispiele
Site-Header
Ich habe speziell ein Layout erstellt, um zu zeigen, mit welchem Ansatz ich die RTL-Version des Markups implementiere.
Beginnen wir mit den Komponenten des Headers. Um dies im Code korrekt zu implementieren, habe ich seine allgemeine Struktur schematisch dargestellt. Bitte beachten Sie, dass ich den Header in den Hauptabschnitt und den Unterabschnitt unterteilt habe. Außerdem wurden Start- und Endklassen für untergeordnete Elemente hinzugefügt.
.header__main, .header__sub { display: flex; justify-content: space-between; }
Da der Betrieb von CSS Flexbox die auf der Seite angegebene Richtung berücksichtigt, wie weiter oben in diesem Handbuch erläutert, wird diese automatisch erweitert, wenn RTL-Markups verwendet werden.
Der nächste Punkt ist die Trennlinie zwischen Logo und Navigation. Zuerst habe ich daran gedacht, border-right zu verwenden. Es funktioniert, aber nicht perfekt. Es ist besser, ein Pseudoelement zu verwenden, da es sich nach der Richtung der Seite entfaltet.
.c-brand:after { content: ""; display: inline-block; vertical-align: middle; width: 3px; height: 38px; border-radius: 5px; background: #e4e4e4; margin-inline-start: 1.25rem; }
Hier ist das aktuelle Ergebnis:
Als Nächstes werde ich mit der Abschnittskomponente arbeiten (die sich im Unterabschnitt für die Überschriften befindet und Namen und Zähler enthält). Unten sehen Sie ein Layout, wie diese Komponente in LTR aussehen sollte.
Auf den ersten Blick mag dies einfach erscheinen, aber es müssen tatsächlich mehrere Auffüllungs- und Randeigenschaften angegeben werden. Hier ist ein Layout, das dies demonstriert:
.topics-heading { margin-inline-end: 1.5rem; } .topics-list { margin-inline-end: 1rem; } .c-topic { padding-inline-start: 0.5rem; } .c-topic:not(:last-child) { margin-inline-end: 10px; } .c-topic__counter { margin-inline-start: 1rem; }
Wie Sie sehen, verwende ich CSS-Boolesche Eigenschaften anstelle von linken und rechten Werten.Der nächste Schritt ist der Link "Alle anzeigen". Achten Sie auf den Pfeil am Ende. Sie sollte folgendes Verhalten haben:- Während des Schwebens sollte sich die Farbe des Pfeils ändern
- Wenn Sie den Mauszeiger bewegen, sollte die Animation auf den Pfeil angewendet werden
Für diese Aufgabe habe ich mich für das integrierte SVG entschieden. Als ich den Pfeil auf Übersetzen stellte, dachte ich über RTL nach. Es gibt keine logischen Eigenschaften, die für diese Situation geeignet sind, und ich muss eine andere Lösung in Betracht ziehen. Die Option mit wechselnder Marge wurde angeboten. .c-link svg { margin-inline-start: 4px; transition: 0.15s ease-in; } .c-link:hover svg { margin-inline-start: 8px; }
Das Animieren von Rändern wirkt sich zwar nicht sehr gut auf die Leistung aus, funktioniert aber trotzdem. Eine andere Lösung besteht darin, die Seitenrichtung zu bestimmen und auf dieser Basis die entsprechende Richtung für den Versatz anzugeben .c-link:hover svg { transform: translateX(6px); } .c-header[dir="rtl"] .c-link svg { transform: scaleX(-1); } .c-header[dir="rtl"] .c-link:hover svg { transform: scaleX(-1) translateX(6px); }
Beachten Sie, dass ich für die RTL-Seitenrichtung scaleX (-1) hinzugefügt habe, um das Symbol horizontal zu erweitern. Sie können auch drehen (180 Grad), aber die Skalierungsoption scheint mir einfacher.
Als nächstes kommt das Suchfeld. Die Anforderungen sind wie folgt:- Das Suchsymbol sollte am Ende des Feldes erscheinen.
- Die Position des Suchsymbols muss dynamisch sein
.c-input--search { background-image: url("data:image/svg+xml..."); background-position: right 6px center; } .c-header[dir="rtl"] .c-input--search { background-image: url("data:image/svg+xml..."); background-position: right 6px center; }
Wenn der Benutzer den Text in dieses Feld eingibt, sollte der Text das Symbol nicht überlappen. Um dies zu vermeiden, fügen Sie auf beiden Seiten des Feldes Polster hinzu.
Das Ergebnis ist das folgende Markup für LTR- und RTL-Modi:
Das nächste ist das mobile Menü. Um es zu kennzeichnen, verwende ich ein Hamburger-Symbol. Die Position des Symbols ändert sich je nach Richtung (LTR oder RTL). Gleiches gilt für die Richtung der Verschiebungsanimation.
Sie können die Demo auf CodePen sehenDankbarkeit
Besonderer Dank geht an meine Frau Kholoud für ihre fortgesetzte Unterstützung und das mehrfache Lesen des Handbuchs. Vielen Dank auch an Adebiyi Adedotun Lukman und Šime Vidas für ihr großartiges Feedback.