CSS - Unicode-bidi-Eigenschaft: Beherrschen von bidirektionalem Text

Hallo dort, zukünftige Webentwickler! Heute machen wir uns auf eine aufregende Reise in die Welt von CSS und erkunden eine Eigenschaft, die initially vielleicht etwas einschüchternd klingen mag: unicode-bidi. Aber keine Sorge, am Ende dieses Tutorials werdet ihr bidirektionalen Text wie ein Profi handhaben können!

Was ist Unicode-bidi?

Bevor wir ins Detail gehen, lassen Sie uns verstehen, was es mit unicode-bidi auf sich hat. Stellt euch vor, ihr schreibt eine mehrsprachige Webseite, die sowohl Englisch (links nach rechts) als auch Arabisch (rechts nach links) Text enthält. Wie stellt ihr sicher, dass jede Sprache korrekt angezeigt wird? Genau hier kommt unicode-bidi zur Rettung!

Die unicode-bidi Eigenschaft ist euer treuer Sidekick beim Umgang mit bidirektionalem Text in CSS. Sie hilft euch dabei, zu steuern, wie bidirektionaler Text in einem Dokument behandelt wird und stellt sicher, dass eure Inhalte unabhängig von der Schreibrichtung korrekt angezeigt werden.

Mögliche Werte

Schauen wir uns die möglichen Werte für die unicode-bidi Eigenschaft an:

Wert	Beschreibung
normal	Das Element öffnet keine zusätzliche Ebene der Einbettung
embed	Öffnet eine zusätzliche Ebene der Einbettung
bidi-override	Erzeugt eine Übersteuerung für den bidirektionalen Algorithmus
isolate	Das Element ist von seinen Geschwisterelementen isoliert
isolate-override	Kombiniert die Effekte von 'isolate' und 'bidi-override'
plaintext	Das Element ist isoliert und die bidirektionale Formatierung wird zurückgesetzt

Keine Sorge, wenn diese jetzt verwirrend erscheinen. Wir werden jeden von ihnen im Detail mit Beispielen erkunden!

Gültig für

Die unicode-bidi Eigenschaft kann auf alle Elemente angewendet werden. Sie wird jedoch am häufigsten mit inline-Elementen oder Elementen verwendet, die auf display: inline gesetzt wurden.

DOM-Syntax

Um unicode-bidi in eurem JavaScript zu verwenden, könnt ihr die folgende Syntax benutzen:

object.style.unicodeBidi = "value"

Nun tauchen wir ein in jeden Wert und schauen uns an, wie sie in der Praxis funktionieren!

CSS unicode-bidi - normal Wert

Der normal Wert ist die Standardeinstellung. Er öffnet keine zusätzliche Ebene der Einbettung im Hinblick auf den bidirektionalen Algorithmus.

<p style="unicode-bidi: normal;">
Dies ist englischer Text. هذا نص عربي.
</p>

In diesem Beispiel wird der Text wie folgt angezeigt:

Dies ist englischer Text. هذا نص عربي.

Der englische Text ist links nach rechts, während der arabische Text rechts nach links ist und seine natürliche Richtung beibehält.

CSS unicode-bidi - embed Wert

Der embed Wert öffnet eine zusätzliche Ebene der Einbettung im Hinblick auf den bidirektionalen Algorithmus.

<p style="unicode-bidi: embed; direction: rtl;">
Dies ist englischer Text. هذا نص عربي.
</p>

Dies wird wie folgt angezeigt:

.هذا نص عربي Dies ist englischer Text.

Hier wird der gesamte Absatz als rechts nach links behandelt, aber der englische Text behält seine linke Richtung im gesamten RTL-Kontext bei.

CSS unicode-bidi - bidi-override Wert

Der bidi-override Wert erzeugt eine Übersteuerung für den bidirektionalen Algorithmus. Er zwingt die Textrichtung, der direction Eigenschaft zu entsprechen.

<p style="unicode-bidi: bidi-override; direction: rtl;">
Dies ist englischer Text. هذا نص عربي.
</p>

Dies wird wie folgt angezeigt:

.يبرع صن اذه .txet hsilgnE si sihT

In diesem Fall wird весь Text streng als rechts nach links behandelt,甚至 umkehren die Reihenfolge der Zeichen im englischen Text.

CSS unicode-bidi - isolate Wert

Der isolate Wert isoliert das Element von seinen Geschwisterelementen in Bezug auf die bidirektionale Formatierung.

<p>Dies ist <span style="unicode-bidi: isolate; direction: rtl;">هذا نص عربي</span> einiger englischer Text.</p>

Dies wird wie folgt angezeigt:

Dies ist αυτός ο αραβικός κείμενος einige englische Text.

Der arabische Text ist isoliert und wird rechts nach links angezeigt, während der umgebende englische Text unbeeinflusst bleibt.

CSS unicode-bidi - isolate-override Wert

Der isolate-override Wert kombiniert die Effekte von isolate und bidi-override.

<p>Dies ist <span style="unicode-bidi: isolate-override; direction: rtl;">Englischer Text</span> in einem Satz.</p>

Dies wird wie folgt angezeigt:

Dies ist txet hsilgnE in einem Satz.

Der Text innerhalb des Span-Elements ist isoliert und strikt umgekehrt.

CSS unicode-bidi - plaintext Wert

Der plaintext Wert isoliert das Element und setzt die bidirektionale Formatierung auf seine implizite Richtung zurück.

<p style="direction: rtl;">
Dies ist <span style="unicode-bidi: plaintext;">einige englische Texte</span> بعض النص العربي
</p>

Dies wird wie folgt angezeigt:

بعض النص العربي einige englische Texte Dies ist

Der englische Text innerhalb des Span-Elements wird in seiner natürlichen linken Richtung angezeigt, unabhängig von der rechten Richtung des Elternteils.

CSS unicode-bidi - verwandte Eigenschaften

Wenn ihr mit unicode-bidi arbeitet, werdet ihr oft diese verwandten Eigenschaften verwenden:

Eigenschaft	Beschreibung
direction	Setzt die Textrichtung
writing-mode	Definiert, ob Zeilen horizontal oder vertikal angeordnet werden

Denkt daran, die unicode-bidi Eigenschaft arbeitet Hand in Hand mit der direction Eigenschaft, um den bidirektionalen Textfluss zu steuern.

Schlussfolgerung

Glückwunsch! Ihr habt gerade eine tiefe Reise in die Welt von unicode-bidi unternommen. Diese Eigenschaft mag initially komplex erscheinen, aber sie ist ein unersetzliches Werkzeug bei der Arbeit mit mehrsprachigen Webseiten. Denkt daran, Übung macht den Meister, also zögert nicht, verschiedene Werte auszuprobieren und zu sehen, wie sie euren Text beeinflussen.

Während ihr eure Reise im Webdevelopment fortsetzt, werdet ihr viele Situationen begegnen, in denen das Verständnis von bidirektionalem Text entscheidend ist. Ob ihr eine Webseite für ein globales Publikum erstellt oder an einem Lokalisierungsprojekt arbeitet, die Fähigkeiten, die ihr heute gelernt habt, werden euch gut dienen.

Weiter codieren, weiter lernen und vor allem: Spaß haben! Die Welt der Webentwicklung ist voller aufregender Herausforderungen, und das Beherrschen Eigenschaften wie unicode-bidi ist erst der Anfang eures Abenteuers. Frohes Coden!

Credits: Image by storyset