CSS unicode-bidi Eigenschaft
Die CSS-Eigenschaft unicode-bidi steuert die Texteinbettung und wirkt nur zusammen mit der direction-Eigenschaft. Syntax und Beispiele.
Die Eigenschaft unicode-bidi steuert, wie bidirektionaler (bidi) Text — Text, der Schriften von links nach rechts und von rechts nach links mischt — angeordnet wird, und ermöglicht es, den integrierten Unicode-Bidirektionalitätsalgorithmus des Browsers zu überschreiben.
Die meisten Seiten benötigen sie nie. Browser ordnen bereits gemischten lateinischen/arabischen/hebräischen Text korrekt mithilfe des Unicode Bidirectional Algorithm an. unicode-bidi kommt nur dann zum Einsatz, wenn dieses Standardverhalten falsch ist: zum Beispiel wenn ein isolierter Wert (eine Telefonnummer, ein Benutzername, ein Preis) seine Richtung in den umgebenden Satz überträgt, oder wenn man absichtlich eine visuelle Reihenfolge erzwingen möchte.
In der Praxis wird unicode-bidi zusammen mit der Eigenschaft direction verwendet: direction legt die Grundrichtung des Textes fest, und unicode-bidi bestimmt, wie stark diese Grundrichtung angewendet wird. Zusammen entsprechen sie dem CSS-Äquivalent des HTML-Attributs dir und der Elemente <bdo>/<bdi>.
unicode-bidi hat nur dann einen sichtbaren Effekt, wenn das Element auch gemischten Text in verschiedene Richtungen enthält. Allein bewirkt es nichts — es arbeitet Hand in Hand mit der Eigenschaft direction.
| Standardwert | normal |
|---|---|
| Gilt für | Alle Elemente, obwohl einige Werte bei Nicht-Inline-Elementen keine Wirkung haben. |
| Vererbt | Ja. |
| Animierbar | Nein. |
| Version | CSS2 |
| DOM-Syntax | object.style.unicodeBidi = "isolate"; |
Syntax
CSS unicode-bidi Werte
unicode-bidi: normal | embed | bidi-override | isolate | isolate-override | plaintext | initial | inherit;Beispiel der unicode-bidi Eigenschaft:
Im folgenden Beispiel verwendet der .text-Block direction: rtl zusammen mit unicode-bidi: embed. Der arabische Ausdruck behält seine natürliche Rechts-nach-links-Reihenfolge, während die Einbettung eine zusätzliche bidi-Ebene hinzufügt, sodass der gesamte Block als Rechts-nach-links behandelt wird — Interpunktion und lateinische Wörter werden relativ zu dieser Rechts-nach-links-Basis positioniert.
CSS unicode-bidi Codebeispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: embed;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "embed" value. مرحبا بالعالم</div>
</body>
</html>Beispiel der unicode-bidi Eigenschaft mit dem Wert "bidi-override":
bidi-override ist der aggressivste Wert: Er ignoriert die inhärente Richtung der Zeichen und ordnet jedes Zeichen streng in der durch direction festgelegten Reihenfolge an. Mit direction: rtl unten wird sogar der lateinische Text zeichenweise umgekehrt — dieser Wert eignet sich daher hauptsächlich für Spezialeffekte und nicht für echten Dokumenttext.
CSS unicode-bidi bidi-override Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.text {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<h2>Unicode-bidi property example</h2>
<div>Normal writing direction. مرحبا بالعالم</div>
<div class="text">Using "bidi-override" value. مرحبا بالعالم</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| normal | Fügt keine zusätzliche Einbettungsebene hinzu. |
| embed | Öffnet eine zusätzliche Einbettungsebene, wenn das Element inline ist. |
| bidi-override | Erstellt eine Überschreibung für ein Inline-Element. Bei Block-Container-Elementen erstellt dieser Wert eine Überschreibung für Nachkommen auf Inline-Ebene. |
| isolate | Das Element ist von seinen Geschwisterelementen isoliert. Dieser Wert gibt an, dass die Containerrichtung des Elements berechnet werden soll, ohne den Inhalt dieses Elements zu berücksichtigen. |
| isolate-override | Wendet das Isolierungsverhalten auf den umgebenden Inhalt und das Überschreibungsverhalten auf den inneren Inhalt an. |
| plaintext | Dieser Wert verhält sich wie der Wert isolate, aber die Richtung wird mithilfe der Regeln P2 und P3 des Unicode-Bidirektionalitätsalgorithmus berechnet. |
| initial | Setzt die Eigenschaft auf ihren Standardwert. |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Welchen Wert sollte man verwenden?
- Nur einen Ausdruck in der entgegengesetzten Richtung einbetten? Verwenden Sie
embedzusammen mit der passenden Eigenschaft direction. Dies ist der klassische Fall „etwas Arabisches in einem englischen Absatz zitieren". - Benutzergenerierten Text unbekannter Richtung einfügen (ein Name, ein Kommentar, ein Suchbegriff)? Bevorzugen Sie
isolate. Dadurch wird verhindert, dass dieser Ausschnitt die Richtung der umgebenden Wörter beeinflusst — denselben Schutz bietet das HTML-Element<bdi>. plaintextist für Inhalte wie Chat-Nachrichten oder Log-Zeilen geeignet, bei denen jeder Absatz seine eigene Richtung aus seinem ersten starken Zeichen bestimmen soll, anstatt eine von der Seite zu erben.bidi-overridesollte selten verwendet werden. Setzen Sie es nur ein, wenn Sie absichtlich eine visuelle Reihenfolge erzwingen möchten (zum Beispiel Text als Effekt spiegeln), da es die natürliche Lesereihenfolge jedes Zeichens überschreibt.
Beachten Sie, dass unicode-bidi nicht animierbar ist, sodass Übergänge und Animationen keine Wirkung darauf haben.
Verwandte Eigenschaften
- direction — legt die Basistextrichtung (
ltroderrtl) fest, auf derunicode-bidiaufbaut. - writing-mode — steuert den horizontalen vs. vertikalen Blockfluss.
- text-align — richtet Text innerhalb seiner Zeilenbox aus, was bei RTL-Inhalten häufig angepasst werden muss.