CSS: Microsoft Texteigenschaften

Microsoft hat für die Gestaltung von Texten weitere Eigenschaften eingeführt, die nicht in einer der beiden CSS Spezifikationen enthalten sind. Diese Eigenschaften sind:

line-break

Die line-break-Eigenschaft beschreibt, welcher Umbruchmodus angewendet werden soll. Dazu stehen die Werte normal und strict zur Verfügung. normal besagt, dass die normalen Regeln befolgt werden sollen, wie sie vom Browser grundsätzlich eingestellt sind. strict besagt, dass strengere Regeln angewandt werden sollen. Beispiel:

P { line-break: strict; }

ruby-align

Die ruby-align-Eigenschaft gehört zu den, ebenfalls Microsoft eigenen, ruby- und rt-Elementen. Die Eigenschaft beschreibt dabei die Ausrichtung des Ruby-Textest (rt-Element). Die folgenden Werte sind nutzbar:

auto - Standard. Der Browser entscheidet wie der Ruby-Text angezeigt wird.
left - Der Ruby-Text wird links ausgerichtet.
center - Der Ruby-Text wird zentriert.
right - Der Ruby-Text wird rechts ausgerichtet.
distribute-letter - Der Ruby-Text wird über die gesamte Breite verteilt.
distribute-space - Der Ruby-Text wird über die gesamte Breite verteilt und es werden vor und nach dem Text Leerzeichen eingefügt.
line-edge - Der Ruby-Text wird zentriert wenn er nicht an ein Zeilenende grenzt. Grenzt er an ein Zeilenende wird ein Spalier aus Ruby-Text und Base-Text gebildet.

Beispiel:

ruby-overhang

Die ruby-overhang-Eigenschaft gehört ebenfalls zu den ruby- und rt-Elementen. Sie beschreibt, ob und wie der Ruby-Text über angrenzenden Text überhängen soll oder nicht. Als Were können auto, whitespace und none notiert werden. auto besagt, dass der Ruby-Text allem Text überhängt der an den Base-Text grenzt. whitespace bedeutet, dass der Ruby-Text nur Leerzeichen (freie Fläche) überhängt und keinen Text. none sagt aus, dass der Ruby-Text nur Text überhängt (der an den Base-Text grenzt). Beispiel:

ruby-position

Die ruby-position-Eigenschaft gehört ebenfalls zu den ruby- und rt-Elementen. Sie beschreibt, wo der Ruby-Text stehen soll. Als Werte können above sowie inline angegeben werden. above bedeutet, dass der Ruby über dem Base-Text positioniert wird. inline bedeutet, dass der Ruby-Text wie Base-Text dargestellt und innerhalb des Base-Textes dargestellt werden soll. Beispiel:

RUBY { ruby-position:above; }

text-autospace

Die text-autospace-Eigenschaft beschreibt, ob und wie automatische Leerzeichen eingefügt werden sollen. Dazu können die folgenden Werte verwendet werden:

none - Es werden keine automatischen Leerzeichen eingefügt.
ideograph-alpha - Es werden zusätzliche Leerzeichen zwischen ideographischen und nicht-ideographischen Zeichen eingefügt.
ideograph-numeric - Es werden Leerzeichen zwischen ideographischem Text und Nummern/Zahlen eingefügt.
ideograph-parenthesis - Es werden Leerzeichen zwischen Klammer- oder Nebensätzen und ideographischem Text.
ideograph-space - Erweitert den Leerraum, wenn dieser Text/diese Zeichen an ideographischen Text angrenzt/en.

Beispiel:

P { text-autospace:none; }

Hinweis: Ideographischer Text (oder auch der Ideograph) ist eine asiatische Schreibform, die ein Konzept oder eine Idee darstellt, dabei aber keine einzelnen/besonderen Worte verwendet.

text-justify

Mit der text-justify-Eigenschaft definiert man die Ausrichtung des Textes im Objekt/in der Element-Box. Als Werte können dazu die folgenden verwendet werden:

auto - Standard. Der Browser entscheidet selbstständig wie der Text auszurichten ist.
distribute - Vergrößert oder verkleinert die Wort- und Zeichenzwischenräume, sodass sich der Text gleichmäßig verteilt. Dieser Wert ist speziell für asiatische Sprachen gedacht.
distribute-all-lines - Wie distribute, nur mit dem Unterschied, dass auch die letzte Zeile angepasst wird. Dieser Wert ist speziell für ideographische Texte gedacht.
inter-cluster - Richtet Textzeilen aus, die keinen Zwischenraum zwischen Zeichen/Buchstaben enthalten. Dieser Wert ist speziell für asiatische Sprachen gedacht.
inter-ideograph - Richtet ideographischen Text aus und vergrößert oder verkleinert dabei sowohl die Zwischenräume zwischen Zeichen als auch zwischen Wörtern.
inter-word - Richtet den Text aus, indem die Zwischenräume zwischen Buchstaben vergrößert werden. Die letzte Zeile wird dabei nicht angepasst.
kashida - Richtet den Text aus, indem die Zeichen verlängert werden
newspaper - Vergrößert oder verkleinert die Wort- und Zeichenzwischenräume, sodass sich der Text gleichmäßig verteilt. Dieser Wert ist speziell für lateinische Alphabete gedacht.

Beispiel:

P { text-justify:newspaper; }

text-kashida-space

Die text-kashida-space-Eigenschaft wird verwendet um Kashida-Effekte bzw. -Schrift darstellen zu können. Als Wert kann dazu eine Prozentangabe notiert werden. Sie beschreibt, zu wieviel Prozent die Buchstaben gestreckt werden sollen bzw. zu wieviel Prozent die Anpassung der Zeile durch Streckung der Leerzeichen erreicht werden soll. 0% ergibt dabei, dass die Zeile nur dadurch angepasst wird, dass sämtliche Leerzeichen gestreckt werden. 100% ergibt, dass die Zeile nur (zu 100%) dadurch angepasst wird, dass die Buchstaben gestreckt werden. Beispiel:

P { text-kashida-space: 50%; }

Hinweis: Kashida ist ein typographischer Effekt, der Textzeilen anpasst, indem Zeichen vorsichtig an bestimmten ausgewählten Punkten verlängert werden. Dieser Effekt wird besonders in arabischen Schreib-Systemen genutzt.

text-underline-position

Die text-underline-position-Eigenschaft beschreibt die Position der Unterstreichungslinie (Line mit der der Text unterstrichen wird). Als Werte können dazu entweder above oder below notiert werden. above bedeutet, dass diese Linie über dem Text dargestellt werden soll. below besagt, dass die Linie - wie gewöhnlich - unter dem text dargestellt werden soll. Beispiel:

U { text-underline-position: below; }

word-break

Die word-break-Eigenschaft beschreibt, unter welchen Umständen ein Wort umgebrochen (auf die nächste Zeile geschoben oder getrennt) werden soll. Als Werte gelten die folgenden:

normal - Erlaubt Umbrüche innerhalb von Wörtern.
break-all - Verhält sich wie normal bei asiatischen Texten, aber erlaubt Umbrüche bei nicht-asiatischen Texten. Dieser Wert wurde angepasst, um asiatischen Text (richtig) darstellen zu können, wenn dieser nicht-asiatischen Text enthält.
keep-all - Erlaubt keine Umbrüche für chinesische, japanische und koreanische Texte. Verhält sich wie normal für alle nicht-asiatischen Texte. Dieser Wert ist gedacht für Text, der kleine Beiträge in chinesisch, japanisch oder/und koreanisch enthält.

Beispiel:

P { word-break:normal; }
P.asia { word-break:keep-all; }

word-wrap

Die word-wrap-Eigenschaft besagt, ob der Inhalt eines Elements automatisch auf die nächste Zeile umgebrochen werden soll, wenn dieser die Länge der Zeile/Box überschreitet, oder nicht. Als Wert kann dazu entweder normal oder break-word notiert werden. normal (Standard) besagt, dass bei überlangen Worten kein Umbruch erfolgen soll; die Zeile/Box wird dann entsprechend verlängert. break-word bedeutet, dass Wörter, die die Zeilen-/Boxlänge überschreiten, automatisch auf die nächste Zeile umgebrochen werden sollen. Beispiel:

<p style="word-wrap:break-word;">
... sehr_sehr_sehr_langes_Wort ...
</p>

writing-mode

Die writing-mode-Eigenschaft beschreibt die Schreiberichtung. Dabei kann als Wert entweder lr-tb oder tb-rl definiert werden. lr-tb beschreibt die Schreiberichtung als (normal) horizontal von links nach rechts und zeilenweise von oben nach unten. Alle Zeichen sind senkricht angeordnet. tb-rl besagt, dass der Inhalt des Elements vertikal verlaufen soll. Die Textrichtung ist dabei von unten nach oben und zeilenweise von links nach rechts. Breite Zeichen werden um 90 Grad in Uhrzeigerrichtung gedreht. Dies wird besonders in ost-asiatischer Typographie genutzt. Beispiel:

P { writing-mode:tb-rl; }

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

CSS: Microsoft Texteigenschaften

Über uns

Cookie-Einstellungen