Typographie und CSS
Einleitung
Cascading Style Sheets (CSS) ermöglicht die Kontrolle der Darstellung von Dokumenten, einschließlich ihrer Textinhalte, auf sehr feingranulare Weise. Aus typographischer Sicht hat CSS einiges zu bieten, vor allem das sich noch immer im Fluss befindliche CSS 3. In diesem Kapitel werden alle für typographische Zwecke interessante Selektoren sowie sämtliche schriftbezogenen Eigenschaften kurz vorgestellt und spezifikationsgetreu erläutert. Bitte beachten Sie, dass aufgrund der fortwährenden Arbeit an CSS 3, die bedeutet, dass sich Eigenschaften nebst ihrer Werte noch ändern können, die Richtigkeit und Vollständigkeit der CSS-3-Angaben nicht garantiert werden können. Ebenso gibt es große Unterschiede hinsichtlich der Unterstützung von CSS 3: Ein paar Eigenschaften werden bereits voll unterstützt, andere teilweise, andere wiederum gar nicht; es ist bei einer in Bewegung befindlichen Spezifikation schwer, den genauen Status zu bestimmen. Selektoren sowie Eigenschaften aus CSS 1 und 2 werden durch Beispiele illustriert. Die Wahl zusätzlicher Beispiele für CSS-3-Eigenschaften erfolgte etwas nach dem Zufallsprinzip. Dass Beispiele nur für wenige CSS-3-Eigenschaften vorliegen, ist dem geschuldet, dass einige von ihnen noch gar nicht unterstützt werden. Die bewusst einfach gehaltenen Beispiele dienen generell nicht als echte Spezifikationstestfälle, sondern rein der optisch-technischen Anschauung.
Selektoren
CSS 3 führt eine Reihe neuer Selektoren ein, von denen viele auch bereits in modernen Browsern implementiert sind. Während diese Selektoren außerordentlich nützlich für die generelle Arbeit mit HTML und CSS sind, da vor allem sie die konsequente Trennung von Struktur und Präsentation – Stichwort Wartbarkeit – ermöglichen, und sie letztlich alle dazu verwendet werden können, um an typographischen Merkmalen eines Elements zu feilen, sollen hier nicht alle Selektoren vorgestellt werden, sondern nur die, die einen mehr „unmittelbaren“ Zusammenhang mit Typographie haben. Anmerkung zu Pseudoelementen: In diesem Buch wird bereits CSS 3s neue Syntax für Pseudoelemente berücksichtigt, die zwei anstelle von einem Doppelpunkt vorsieht. Dies kann darin resultieren, dass ältere User-Agents diese Pseudoelemente nicht unterstützen, erschien aber angesichts steigender Verbreitung moderner User-Agents sinnvoll. Eine vollständige Liste aller CSS-3-Selektoren finden Sie im entsprechenden W3C-Entwurf unter http://www.w3.org/TR/css3-selectors/#selectors
:active (CSS 1)
Die :active-Pseudoklasse wird angewendet, während ein Element vom Nutzer aktiviert wird; beispielsweise in der Zeit zwischen dem Anklicken eines Elements und dem Loslassen des Maus-Buttons. (Bei Systemen mit mehr als einem Maus-Button greift :active nur beim primären Button, typischerweise der linke, sowie dessen Pendants.)
:focus (CSS 2)
Die :focus-Pseudoklasse wird angewandt, wenn ein Element den Fokus erhält. Dieser Fokus beinhaltet Tastatur- oder Maus-Events, neben anderen Arten der Eingabe.
:hover (CSS 2)
:hover hat einen Effekt, wenn der Benutzer ein Element mit einem Zeigegerät überfährt, aber das Element nicht notwendiger aktiviert. So kann ein visueller User-Agent diese Pseudoklasse anwenden, wenn der Cursor (Mauszeiger) über ein Element fährt. User-Agents, die interaktive Medien nicht unterstützen, müssen auch :hover nicht unterstützen; manche User-Agents wiederum, die interaktive Medien unterstützen, können zur Unterstützung der :hover-Pseudoklasse nicht in der Lage sein, beispielsweise bei einem stiftähnlichen Gerät, dass kein „Überfahren“ kennt.Beispiel
lang() (CSS 2)
:lang() ermöglicht, auf Elemente über ihre Sprache zuzugreifen. Als einziges technisches Detail ist dabei anzumerken, dass der Sprachidentifizierer („de“ in :lang(de)) zwar kein gültiger Bezeichner sein muss, aber nicht leer sein darf.
Beispiel
:link (CSS 1)
Die :link-Pseudoklasse trifft auf Links zu, die noch nicht besucht wurden.
:visited (CSS 1)
Die :visited-Pseudoklasse greift bei bereits vom Benutzer besuchten Links.Beispiel
::after (CSS 2)
D ::after-Pseudoelement kann dazu verwendet werden, mittels content-Eigenschaft Inhalte nach Elementen zu generieren.
Wenn ::first-letter oder ::first-line auf ein Element angewandt werden, dass Inhalte mittels ::after erzeugt, werden diese Pseudoelemente auf den ersten Buchstabe oder die erste Zeile des Elements einschließlich der generierten Inhalte angewandt (wobei dies bei ::after seltener der Fall sein sollte als bei ::before).
Beispiel
::before (CSS 2)
Das ::before-Pseudoelement kann dazu verwendet werden, mittels content-Eigenschaft Inhalte vor Elementen zu generieren.
Wenn ::first-letter oder ::first-line auf ein Element angewandt werden, dass Inhalte mittels ::before erzeugt, werden diese Pseudoelemente auf den ersten Buchstabe oder die erste Zeile des Elements einschließlich der generierten Inhalte angewandt.
Beispiel
::first-letter (CSS 1)
::first-letter repräsentiert den ersten Buchstaben der ersten Zeile eines Block, sofern der entsprechenden Zeile kein anderer Inhalt vorhergeht, wie beispielsweise Bilder oder Inline-Tabellen. Das ::first-line-Pseudoelement kann entsprechend für Initialen – quasi ausgeschmückte Buchstaben – verwendet werden.
Die folgenden Eigenschaften lassen sich im Zusammenhang mit ::first-letter einsetzen (laut CSS 2.1): text-decoration, text-transform, letter-spacing, word-spacing (wenn anwendbar), line-height, float, vertical-align (sofern float „none“ entspricht), color, dazu die background-, font-, margin-, padding-, und border-Eigenschaften. User-Agents dürfen jedoch auch andere Eigenschaften zulassen. Um User-Agents angemessenes Rendern von Initialen zu ermöglichen, darf dieser im Gegensatz zu normalen Elementen zudem auch Zeilenhöhe sowie Breite und Höhe auf Grundlage des Buchstaben bestimmen.
Beispiel
::first-line (CSS 1)
Das ::first-line-Pseudoelement betrifft den Inhalt der jeweils ersten Zeile eines Elements. Es trifft auf kein wirkliches Element zu, sondern entspricht einem Pseudoelement, dass konforme User-Agents gewissermaßen am Anfang jedes Textblocks erzeugen.
Eigenschaften
alignment-adjust (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#alignment-adjust-prop
Werte: auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | <percentage> | <length>
Initial: auto
Anwendbar auf: Inline-Elemente
Vererbt: nein
Media: visual
Die alignment-adjust-Eigenschaft erlaubt eine präzisere Ausrichtung von Elementen wie beispielsweise Grafiken, die über keine Grundlinientabelle verfügen oder die gewünschte Grundlinie nicht in ihrer Grundlinientabelle vorliegen haben. Mit alignment-adjust kann die Position der Grundlinie, wie durch alignment-baseline identifiziert, ausdrücklich festgelegt werden. Mittels alignment-adjust kann auch der Punkt der Ausrichtung für jeden Glyphen innerhalb eines Textelements exakt bestimmt werden. Der User-Agent verwendet Heuristiken, um die Position einer nicht bestehenden Grundlinie für ein Element festzulegen.
alignment-baseline (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#alignment-baseline
Werte: baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical
Initial: baseline
Anwendbar auf: Inline-Elemente
Vererbt: nein
Media: visual
alignment-baseline bestimmt, wie Inline-Elemente im Verhältnis zu ihrem jeweiligen Elternelement ausgerichtet werden; das heißt, auf welche Grundlinie des Elternelements der Ausrichtungspunkt gelegt wird. Im Gegensatz zur dominant-baseline- hat die alignment-baseline-Eigenschaft keinen Einfluss auf die Grundlinien ihrer Kindelemente.
baseline-shift (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#baseline-shift-prop
Werte: baseline | sub | super | <percentage> | <length>
Initial: baseline
Anwendbar auf: Inline-Elemente
Vererbt: nein
Media: visual
Die baseline-shift-Eigenschaft erlaubt die Umpositionierung der dominierenden Grundlinie (dominant-baseline). Das verschobene Objekt könnte beispielsweise Sub- oder Superskript entsprechen. Innerhalb des verschobenen Elements wird die gesamte Grundlinientabelle versetzt, nicht nur eine einzelne Grundlinie. Bei Sub- und Superskript wird dieser Versatz durch die nominelle Schrift des Elternelements bestimmt.
color (CSS 1)
Link: http://www.w3.org/TR/CSS21/colors.html#colors
Werte: <color> | inherit
Initial: implementierungsabhängig
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die color-Eigenschaft legt die Textfarbe eines Elements fest.
Beispiel
direction (CSS 2)
Link: http://www.w3.org/TR/CSS21/visuren.html#propdef-direction
Werte: ltr | rtl | inherit
Initial: ltr
Anwendbar auf: Alle Elemente
Vererbt: yes
Media: visual
direction bestimmt die Textlaufrichtung sowie die Richtung von Einbettungen und Überschreibungen (siehe unicode-bidi) im Zusammenhang mit Unicodes bidirektionalem Algorithmus. Dazu legt direction die Ausrichtung von Tabellenspaltenlayouts, die von horizontalen Überläufen (overflow) sowie die Positionen von unvollständigen Zeilen in Block-Elementen im Fall von text-align: justify fest.
Beispiel
dominant-baseline (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#dominant-baseline
Werte: auto | use-script | no-change | reset-size | alphabetic | hanging | ideographic | mathematical | central | middle | text-after-edge | text-before-edge
Initial: auto
Anwendbar auf: Inline-Elemente
Vererbt: nein
Media: visual
Die dominant-baseline-Eigenschaft wird dazu gebraucht, eine Tabelle mit skalierten Grundlinien zu bestimmen. Eine solche Grundlinientabelle entspricht einem aus drei Komponenten zusammengesetzten Wert:
- ein Grundlinienbezeichner für die dominierende Grundlinie;
- eine abgeleitete Grundlinientabelle, die Definitionen zusätzlicher Grundlinienbezeichner im Bezug auf verschiedene Schriften beinhaltet,
- eine Schriftgröße für die Grundlinientabelle.
drop-initial-after-adjust (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#drop-initial-after-adjust
Werte: central | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical | <percentage> | <length>
Initial: text-after-edge
Anwendbar auf: ::first-letter-Pseudoelement
Vererbt: nein
Media: visual
drop-initial-after-adjust bestimmt den Ausrichtungspunkt der tiefstehenden Initialen für den primären Verbindungspunkt.
drop-initial-after-align (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#drop-initial-after-align
Werte: <alignment-baseline>
Initial: baseline
Anwendbar auf: ::first-letter-Pseudoelement
Vererbt: nein
Media: visual
Die drop-initial-after-align-Eigenschaft bestimmt, welche Ausrichtungslinie innerhalb der nten Zeilenbox – wobei n durch die drop-initial-value-Eigenschaft festgelegt wird – am primären Verbindungspunkt mit der ersten „Buchstabenbox“ verwendet wird. Die Werte entsprechen denen der alignment-baseline-Eigenschaft.
drop-initial-before-adjust (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#drop-initial-before-adjust
Werte: before-edge | text-before-edge | central | middle | hanging | mathematical | <percentage> | <length>
Initial: text-before-edge
Anwendbar auf: ::first-letter-Pseudoelement
Vererbt: nein
Media: visual
drop-initial-before-adjust legt den Ausrichtungspunkt der tiefstehenden Initialen auf den sekundären Verbindungspunkt. Diese Eigenschaft funktioniert nur, wenn der Wert von drop-initial-size „auto“ entspricht.
drop-initial-before-align (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#drop-initial-before-align
Werte: caps-height | <alignment-baseline>
Initial: caps-height
Anwendbar auf: ::first-letter-Pseudoelement
Vererbt: nein
Media: visual
drop-initial-before-align legt fest, welche Ausrichtungslinie innerhalb der ersten Zeilenbox am sekundären Verbindungspunkt mit der ersten „Buchstabenbox“ verwendet wird. Diese Eigenschaft greift nur, wenn der Wert von drop-initial-size „auto“ entspricht.
drop-initial-size (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#drop-initial-size
Werte: auto | <line> | <length> | <percentage>
Initial: auto
Anwendbar auf: ::first-letter-Pseudoelement
Vererbt: nein
Media: visual
Die drop-initial-size-Eigenschaft steuert das anteilige „Absenken“ des Anfangsbuchstabens. Jeder andere Wert als „auto“ macht die Einschränkung einer sekundären Verbindungszeile obsolet.
drop-initial value (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#drop-initial-value
Werte: initial | <integer>
Initial: initial
Anwendbar auf: ::first-letter-Pseudoelement
Vererbt: nein
Media: visual
drop-initial-value entspricht der Basiseigenschaft, die tiefstehende Initialen ermöglicht. Bei der Angabe eines anderen Werts als „initial“ oder „1“ wird der primäre Verbindungspunkt hinter die erste Zeile verschoben.
font (CSS 1)
Link: http://www.w3.org/TR/CSS21/fonts.html#font-shorthand
Werte: [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Initial: abhängig von individuellen Eigenschaften
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die font- ist eine Kurzschrift-Eigenschaft, die das Setzen von font-style, font-variant, font-weight, font-size, line-height und font-family an derselben Stelle ermöglicht. Die Syntax dieser Eigenschaft fußt auf einer traditionellen Kurznotation, um mehrere schriftbezogene Eigenschaften zu bestimmen.
Alle schriftbezogenen Eigenschaften werden zuerst auf ihre initialen Werte zurückgesetzt, einschließlich der zuvor aufgeführten. Die Eigenschaften, denen ausdrückliche Werte mittels font vorgegeben werden, erhalten dann genau diese Werte.
Beispiel
font-family (CSS 1)
Link: http://www.w3.org/TR/CSS21/fonts.html#font-family-prop
Werte: [[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit
Initial: implementierungsabhängig
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Der Wert der font-family-Eigenschaft entspricht einer priorisierten Liste von Schriftnamen sowie generischen Schriftfamiliennamen (serif, sans-serif, cursive, fantasy, monospace). Im Gegensatz zu anderen CSS-Eigenschaften werden die Werte von font-family kommasepariert, um anzuzeigen, dass sie Alternativen darstellen.
Beispiel
font-size (CSS 1)
Link: http://www.w3.org/TR/CSS21/fonts.html#font-size-props
Werte: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Initial: medium
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die durch font-size vorgegebene Schriftgröße korrespondiert mit einem Geviert. Es ist zu beachten, dass bestimmte Glyphen aus ihren Geviert-Bereichen „ausbluten“ können.
Beispiel
font-size-adjust (CSS 3)
Link: http://www.w3.org/TR/css3-fonts/#font-size-adjust
Werte: <number> | none | inherit
Initial: none
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die sichtbare Größe und Lesbarkeit von Texten variiert mit jeder Schrift. Für Schriften wie Latein oder Kyrillisch, die zwischen Groß- und Kleinbuchstaben unterscheiden, ist die relative Höhe der Kleinbuchstaben im Vergleich mit ihren Gegenstücken, den Großbuchstaben, ein entscheidender Faktor im Hinblick auf die Lesbarkeit. CSS spricht diesbezüglich von einem „aspect value“, der der Minuskel- oder x-Höhe einer Schrift geteilt durch die Schriftgröße entspricht.
In Situationen, in denen Schrift-„Fallbacks“ auftreten (wenn zum Beispiel die per font- oder font-family-Eigenschaft definierte Schrift nicht vorhanden ist), kann dieser Wert der verwendeten Schrift von dem der bevorzugten abweichen und die Schrift dadurch weniger lesbar erscheinen. Die font-size-adjust-Eigenschaft stellt einen Weg dar, die Lesbarkeit von Texten zu bewahren, wenn dies passiert. Sie stellt dies dadurch sicher, indem sie erlaubt, die Schriftgröße so zu justieren, dass die x-Höhe dieselbe ist, egal, welche Schrift zum Einsatz kommt.
font-stretch (CSS 3)
Link: http://www.w3.org/TR/css3-fonts/#font-stretch
Werte: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
font-stretch erlaubt die Auswahl eines normalen, engen oder breiten Schriftstils aus einer Schriftfamilie.
font-style (CSS 1)
Link: http://www.w3.org/TR/CSS21/fonts.html#propdef-font-style
Werte: normal | italic | oblique | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die font-style-Eigenschaft wählt zwischen normalen, kursiven und schrägen Schriftstilen innerhalb einer Schriftfamilie. Der Wert „normal“ wählt eine Schrift, die als „normal“ in der Schriftdatenbank des User-Agents klassifiziert wurde, während „oblique“ einen ebenso gekennzeichneten Stil wählt; „italic“ schaut nach „italic“, und wenn dazu keine Schrift vorliegt, nach „oblique“.
In der User-Agent-Datenbank als „oblique“ gekennzeichnete Schriften dürfen durch Schrägstellen einer normalen Schrift generiert werden. Dazu ist zu bemerken, dass Schriften, die „Oblique“, „Slanted“ oder „Incline“ in ihren Namen tragen, in der Schriftdatenbank üblicherweise als „oblique“ vermerkt werden. Schriften mit „Italic“, „Cursive“ oder „Kursiv“ erfahren dies mit „italic“.
Beispiel
font-variant (CSS 1)
Link: http://www.w3.org/TR/CSS21/fonts.html#propdef-font-variant
Werte: normal | small-caps | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die font-variant-Eigenschaft erlaubt durch den Wert „small-caps“, Kapitälchen zu wählen; Kapitälchen entsprechen einer anderer Variation innerhalb von Schriftfamilien.
CSS 2.1 gestattet, dass die Kapitälchen-Schrift generiert wird, indem eine normale Schrift herangezogen wird und Großbuchstaben-Zeichen herunterskaliert werden. Als letzte Maßnahme können einfache Großbuchstaben angezeigt werden.
Beispiel
font-weight (CSS 1)
Link: http://www.w3.org/TR/CSS21/fonts.html#propdef-font-weight
Werte: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die font-weight-Eigenschaft bestimmt die Schriftstärke der gewählten Schrift. Die Werte „100“ bis „900“ bezeichnen mit jeder Zahl eine Stärke, die mindestens der vorhergehenden entsprechen muss. Das Schlüsselwort „normal“ entspricht „400“, „bold“ „700“.
Beispiel
hanging-punctuation (CSS 3)
Link: http://www.w3.org/TR/css3-text/#hanging-punctuation
Werte: none | [ start || end || end-edge ]
Initial: none
Anwendbar auf: Block-, Inline-Block-Elemente und Tabellenzellen
Vererbt: ja
Media: visual
hanging-punctuation definiert, ob ein Satzzeichen, sofern vorhanden, am Beginn oder Ende einer Textzeile oder außerhalb der Zeilenbox dargestellt wird.
hyphenate-after (CSS 3)
Link: http://www.w3.org/TR/css3-gcpm/#hyphenate-after
Werte: <integer> | auto
Initial: auto
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
hyphenate-after bestimmt die Mindestzahl von Zeichen, die in einem mit Bindestrichen getrennten Wort nach dem Trennzeichen dargestellt werden sollen. Der Wert „auto“ bedeutet, dass der User-Agent einen Wert wählt, der sich nach dem jeweiligen Layout richtet.
hyphenate-before (CSS 3)
Link: http://www.w3.org/TR/css3-gcpm/#hyphenate-before
Werte: <integer> | auto
Initial: auto
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Ähnlich hyphenate-after, jedoch bezogen auf die Anzahl von Zeichen vor dem Trennzeichen.
hyphenate-character (CSS 3)
Link: http://www.w3.org/TR/css3-gcpm/#hyphenate-character
Werte: auto | <string>
Initial: auto
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die hyphenate-character-Eigenschaft bestimmt eine Zeichenkette, die angezeigt wird, wenn eine Worttrennung erfolgt. „auto“ bezieht sich darauf, dass es am User-Agent liegt, einen angemessenen Wert zu finden.
hyphenate-lines (CSS 3)
Link: http://www.w3.org/TR/css3-gcpm/#hyphenate-lines
Werte: no-limit | <integer>
Initial: no-limit
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
hyphenate-lines bestimmt die maximale Anzahl von aufeinanderfolgenden Zeilen innerhalb eines Elements, die mit einer Worttrennung enden. Es kann vorkommen, dass der spezifizierte Wert nicht berücksichtigt werden kann. „no-limit“ hebt diese Beschränkung auf.
hyphenate-resource (CSS 3)
Link: http://www.w3.org/TR/css3-gcpm/#hyphenate-resource
Werte: none | <uri>
Initial: none
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Mit hyphenate-resource kann eine kommaseparierte Liste von externen Ressourcen (URIs) angegeben werden, die dem User-Agent hilft, Trennungspunkte zu bestimmen. Wenn mehr als eine Ressource angegeben wird, sollte der User-Agent auf jede Ressource zugreifen, um die benötigten Trennungspunkte zu finden. „none“ zeigt an, dass keine externen Ressourcen verfügbar sind. Davon unabhängig kann der User-Agent auf lokale Ressourcen zurückgreifen, die nicht mittels hyphenate-resource bestimmt werden.
hyphens (CSS 3)
Link: http://www.w3.org/TR/css3-gcpm/#hyphens
Werte: none | manual | auto
Initial: manual
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
hyphens ermöglicht Wort- beziehungsweise Silbentrennung an Zeilenenden, wenn „manual“ oder „auto“ spezifiziert wird. „manual“ erfordert bestimmte Zeichen innerhalb eines Worts, die eine Trennung andeuten; „auto“ vollzieht automatische Trennung nach Gusto des User-Agents beziehungsweise Eigenschaften wie hyphenate-resource.
inline-box-align (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#inline-box-align
Werte: initial | last | <integer>
Initial: last
Anwendbar auf: Inline-Block-Elemente
Vererbt: nein
Media: visual
inline-box-align bestimmt, welche Zeile in einem aus mehreren Zeilen bestehenden Inline-Block sich an den vorherigen oder nachfolgenden Inline-Elementen innerhalb einer Zeile ausrichtet. Die Ausrichtungsstrategie für den Inline-Block selbst – das heißt, die Definition seines Ausrichtungspunkt und welche Elterngrundlinie für die Ausrichtung verwendet wird – hängt von seinen auf die zur Ausrichtung der Zeile anwendbaren Ausrichtungseigenschaften ab. inline-box-align hat keinen Effekt bei einzeiligen Inline-Blöcken.
letter-spacing (CSS 1)
Link: http://www.w3.org/TR/CSS21/text.html#propdef-letter-spacing
Werte: normal | <length> | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die letter-spacing-Eigenschaft erlaubt das Spationieren von Zeichen, um beispielsweise Text zu sperren.
Beispiel
line-height (CSS 1)
Link: http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
Werte: normal | <number> | <length> | <percentage> | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Bei Block-, Tabellenzellen, Tabelleneigenschaften- sowie Inline-Block-Elementen, dessen Inhalte aus Inline-Elementen bestehen, gibt line-height die minimale Höhe von Zeilenboxen und damit den Zeilenabstand an. Diese minimale Höhe besteht aus einer Höhe oberhalb der Grundlinie (Grundlinie bis k-Linie) sowie einer Höhe darunter (p-Linie bis Grundlinie). Bei einem Inline-Element gibt die line-height-Eigenschaft die Höhe an, die zur Berechnung der Höhe der Zeilenbox verwendet wird (mit Ausnahme von „ersetzten“ Inline-Elementen, bei denen die Höhe der Box durch height bestimmt wird).
Beachten Sie den kleinen aber feinen Unterschied zwischen einem line-height-Wert mit Einheit und einem ohne Einheit: Mit Einheit wird der berechnete Wert an Kindelemente weitergegeben, ohne Einheit jedoch nicht. Was das bedeutet, hat Eric Meyer seinerzeit in seinem Artikel „Unitless line-heights“ beschrieben: http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/.
Beispiel
line-stacking (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#line-stacking
Werte: <line-stacking-strategy> || <line-stacking-ruby> || <line-stacking-shift - Local file was 1 month, 3 weeks newer>
Initial: abhängig von individuellen Eigenschaften
Anwendbar auf: Block-Elemente
Vererbt: ja
Media: visual
line-stacking ist eine Kurzschrift-Eigenschaft für line-stacking-ruby, line-stacking-shift und line-stacking-strategy. Ihre Eigenschaften bestimmen die Art und Weise, wie Zeilen angeordnet werden.
line-stacking-ruby (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#line-stacking-ruby
Werte: exclude-ruby | include-ruby
Initial: exclude-ruby
Anwendbar auf: Block-Elemente
Vererbt: ja
Media: visual
line-stacking-ruby bestimmt, wie Zeilen von Block-Elementen „gestapelt“ werden, die Ruby-Elemente beinhalten (Elemente, für die display: ruby-text oder display: ruby-text-container gilt). Ruby-Base-Elemente (display: ruby-base oder display: ruby-base-container) werden darin einbezogen.
line-stacking-shift (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#line-stacking-shift
Werte: consider-shifts | disregard-shifts
Initial: consider-shifts
Anwendbar auf: Block-Elemente
Vererbt: ja
Media: visual
Die line-stacking-shift-Eigenschaft gibt an, welche Anordnungsmethode bei Block-Elementen angewandt wird, die Elemente mit „base-shift“ beinhalten.
line-stacking-strategy (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#line-stacking-strategy
Werte: inline-line-height | block-line-height | max-height | grid-height
Initial: inline-line-height
Anwendbar auf: Block-Elemente
Vererbt: ja
Media: visual
line-stacking-strategy spezifiziert die Strategie für „aufgestapelte“ Zeilenboxen innerhalb eines Block-Elements.
orphans (CSS 2)
Link: http://www.w3.org/TR/CSS21/page.html#propdef-orphans
Werte: <integer> | inherit
Initial: 2
Anwendbar auf: Block-Elemente
Vererbt: ja
Media: visual, paged
orphans legt die Mindestanzahl von Zeilen innerhalb eines Blocks fest, die am Ende einer Seite angezeigt werden sollen, und dient der Vermeidung von „Waisenkindern“ beziehungsweise „Schusterjungen“.
page-break-after (CSS 2)
Link: http://www.w3.org/TR/CSS21/page.html#propdef-page-break-after
Werte: auto | always | avoid | left | right | inherit
Initial: auto
Anwendbar auf: Block-Elemente
Vererbt: nein
Media: visual, paged
page-break-after kann dazu verwendet werden, festzulegen, ob und wo nach dem betroffenen Elementen eine neue Seite folgen soll.
page-break-before (CSS 2)
Link: http://www.w3.org/TR/CSS21/page.html#propdef-page-break-before
Werte: auto | always | avoid | left | right | inherit
Initial: auto
Anwendbar auf: Block-Elemente
Vererbt: nein
Media: visual, paged
page-break-before – als Gegenstück zu page-break-after – kann dazu verwendet werden, festzulegen, ob und wo vor dem betroffenen Elementen eine neue Seite folgen soll.
page-break-inside (CSS 2)
Link: http://www.w3.org/TR/CSS21/page.html#propdef-page-break-inside
Werte: avoid | auto | inherit
Initial: auto
Anwendbar auf: Block-Elemente
Vererbt: nein
Media: visual, paged
Die page-break-inside-Eigenschaft bestimmt, ob innerhalb eines Block-Elements ein Seitenumbruch erfolgen darf (standardmäßig erlaubt).
punctuation-trim (CSS 3)
Link: http://www.w3.org/TR/css3-text/#punctuation-trim
Werte: none | [start || end || adjacent]
Initial: none
Anwendbar auf: Alle Elemente sowie generierte Inhalte
Vererbt: ja
Media: visual
punctuation-trim gibt an, ob ein Interpunktionszeichen „zugerichtet“ (Kerning) werden darf, wenn es am Anfang oder Ende einer Zeile erscheint oder an ein anderes Interpunktionszeichen angrenzt.
quotes (CSS 2)
Link: http://www.w3.org/TR/CSS21/generate.html#propdef-quotes
Werte: [<string> <string>]+ | none | inherit
Initial: implementierungsabhängig
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die quotes-Eigenschaft erlaubt die Definition von Anführungszeichen für zum Beispiel mittels q-Element eingebettete Zitate.
Beachten Sie, dass die Unterstützung für quotes immer noch als eingeschränkt gelten kann, beispielsweise in auf der WebKit-Engine basierenden Browsern.
ruby-align (CSS 3)
Link: http://www.w3.org/TR/css3-ruby/#ruby-align
Werte: auto | start | left | center | end | right | distribute-letter | distribute-space | line-edge
Initial: auto
Anwendbar auf: Alle Elemente sowie generierte Inhalte
Vererbt: ja
Media: visual
ruby-align kann auf alle Elemente angewendet werden, um die Textausrichtung von Ruby-Text und Ruby-Base-Inhalten relativ zueinander zu steuern. Die ruby-align-Eigenschaft beeinflusst das gesamte Ruby-Markup eines Elements. Die Ausrichtung betrifft die Ruby-Kindelemente, dessen Inhalte kürzer sind; bei einfachem Ruby-Markup sind dies entsprechend entweder das rb- oder das rt-Element, bei komplexem Ruby-Markup entweder das rb-Element oder ein bis zwei rt-Elemente für den jeweiligen Ruby-Text beziehungsweise das jeweilige Ruby-Base-Element innerhalb von rtc und rbc.
ruby-overhang (CSS 3)
Link: http://www.w3.org/TR/css3-ruby/#ruby-overhang
Werte: auto | start | end | none
Initial: none
Anwendbar auf: Das Elternelement von Elementen mit display: ruby-text
Vererbt: ja
Media: visual
Die ruby-overhang-Eigenschaft definiert, ob und auf welcher Seite Ruby-Text anliegenden Text stellenweise überlappen darf, zusätzlich zum eigenen Basistext in dem Fall, dass der Ruby-Text weiter läuft als der Basistext. Es ist zu beachten, dass Ruby-Text keine Zeichen überlappen darf, die zu einem anderem Basistext gehören. Der User-Agent darf ein Maximum festlegen, ab dem Ruby-Text jedweden anliegenden Text überlappen darf; er darf dabei die JIS4051-Empfehlung anwenden, um eine Ruby-Text-Zeichenlänge als Maximumlänge zu gebrauchen.
ruby-position (CSS 3)
Link: http://www.w3.org/TR/css3-ruby/#ruby-position
Werte: before | after | right
Initial: before
Anwendbar auf: Das Elternelement von Elementen mit display: ruby-text
Vererbt: ja
Media: visual
ruby-position wird von Elternelementen von Elementen mit display: ruby-text verwendet, um die Position von Ruby-Text im Hinblick auf seine Basis zu bestimmen. Solche Elternelemente sind typischerweise entweder das Ruby-Element selbst (ruby) oder das rtc-Element (im Falle komplexen Ruby-Markups). Dies stellt sicher, dass der gesamte Inhalt eines rtc-Elements in derselben Position angezeigt wird.
ruby-span (CSS 3)
Link: http://www.w3.org/TR/css3-ruby/#ruby-span
Werte: attr(x) | none
Initial: none
Anwendbar auf: Elemente mit display: ruby-text
Vererbt: nein
Media: visual
ruby-span steuert das das „Umspannungsverhalten“ von Annotationselementen; alternativ darf dazu auch das rbspan-Attribut (Ruby-Markup) verwendet werden.
text-align (CSS 1)
Link: http://www.w3.org/TR/CSS21/text.html#propdef-text-align
Werte: left | right | center | justify | inherit
Initial: Ein unbenannter Wert, der sich wie „left“ verhält, wenn direction „ltr“ entspricht, und wie „right“, wenn direction „rtl“ entspricht
Anwendbar auf: Block-Elemente, Tabellenzellen und Inline-Blöcke
Vererbt: ja
Media: visual
Die text-align-Eigenschaft beschreibt, wie Inline-Inhalte in Block-Elementen ausgerichtet werden. Ein Textblock entspricht aus dieser Sicht einem Stapel von Zeilenboxen. Bei den Werten left, right und center bestimmt text-align, wie die Inline-Boxen innerhalb jeder Zeilenbox gegenüber der linken und rechten Seite ausgerichtet werden. Bei Gebrauch des Werts justify legt text-align fest, dass die Inline-Boxen im Blocksatz erscheinen.
Wenn der berechnete Wert der white-space-Eigenschaft pre oder pre-line entspricht, wird der tatsächliche Wert von text-align auf den initialen Wert gesetzt.
Beispiel
text-align-last (CSS 3)
Link: http://www.w3.org/TR/css3-text/#text-align-last
Werte: start | end | left | right | center | justify
Initial: start
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
text-align-last bezieht sich auf die letzte Zeile eines Textblocks oder einer Zeile, die genau vor einem erzwungenen Zeilenumbruch erscheint, und spezifiziert, wie diese ausgerichtet wird, wenn der Wert der text-align-Eigenschaft „justify“ entspricht.
Beispiel
text-decoration (CSS 1)
Link: http://www.w3.org/TR/CSS21/text.html#propdef-text-decoration
Werte: none | [ underline || overline || line-through || blink ] | inherit
Initial: none
Anwendbar auf: Alle Elemente
Vererbt: nein
Media: visual
text-decoration ermöglicht die Ausschmückung von Textinhalten. Auf Inline-Elemente angewandt betrifft diese Eigenschaft alle Boxen, die durch das Element erzeugt werden; bei allen anderen Elementen wird die Dekoration über anonyme Inline-Boxen propagiert, die alle Inline-Elementkinder umschließt, sowie jedwede im Fluss folgenden Block-Elemente. text-decoration wird jedoch weder an „floatende“ oder absolut positionierte Nachkömmlinge noch an die Inhalte von „inline-table“- und „inline-block“-Elemente weitergegeben.
Unterstreichungen, „Oberstreichungen“ und Durchstreichungen werden nur auf Texte angewandt, einschließlich Leerzeichen sowie durch letter-spacing und word-spacing induzierte Veränderungen; Innen- und Außenabstände sowie Rahmen sind nicht betroffen. Wenn ein Element keinen Text beinhaltet, müssen User-Agents davon absehen, text-decoration anzuwenden. So werden Bilder beispielsweise nicht unterstrichen.
Beispiel
text-emphasis (CSS 3)
Link: http://www.w3.org/TR/css3-text/#text-emphasis
Werte: none | [ [ accent | dot | circle | disc] [ before | after ]? ]
Initial: none
Anwendbar auf: Alle Elemente sowie generierte Inhalte
Vererbt: ja
Media: visual
Ostasiatische Dokumente verwenden über jedem Zeichen kleine Symbole, um eine Reihe Text zu betonen. Die text-emphasis-Eigenschaft verleiht solchem Text entsprechend diese besondere Formatierung zur Betonung. Im Gegensatz zu text-decoration kann diese Formatierung die Zeilenhöhe beeinflussen.
text-height (CSS 3)
Link: http://www.w3.org/TR/css3-linebox/#text-height
Werte: auto | font-size | text-size | max-size
Initial: auto
Anwendbar auf: Inline-Elemente sowie Elternelemente von Elementen mit display: ruby-text
Vererbt: ja
Media: visual
Die text-height-Eigenschaft bestimmt die Progressionsdimension der Inhaltsfläche einer Inline-Box.
text-indent (CSS 1)
Link: http://www.w3.org/TR/CSS21/text.html#propdef-text-indent
Werte: <length> | <percentage> | inherit
Initial: 0
Anwendbar auf: Block-Elemente, Tabellenzellen und Inline-Blöcke
Vererbt: ja
Media: visual
text-indent bestimmt die Ein- oder Ausrückung der ersten Zeile Text in einem Block. Genauer gesagt gibt diese Eigenschaft die Ein- oder Ausrückung der ersten Box an, die in die erste Zeilenbox des Blocks fließt. Diese Box wird im Hinblick auf den linken (oder rechten, bei einem von rechts nach links laufenden Layout) Rand der Zeilenbox ein- oder ausgerückt. User-Agents sollten eine Einrückung als Leerraum darstellen.
Beispiel
text-justify (CSS 3)
Link: http://www.w3.org/TR/css3-text/#text-justify
Werte: auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | tibetan
Initial: auto
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die text-justify-Eigenschaft bestimmt die Art der Ausrichtung, wenn text-align auf „justify“ gesetzt wird.
text-outline (CSS 3)
Link: http://www.w3.org/TR/css3-text/#text-outline
Werte: none | [ <color> <length> <length>? | <length> <length>? <color> ]
Initial: none
Anwendbar auf: Alle Elemente sowie generierte Inhalte
Vererbt: ja
Media: visual
text-outline gibt den Textumriss vor. Die erste Längenangabe spiegelt die Dicke des Umrisses wider, die zweite einen optionalen Unschärfenradius. Der Umriss überdeckt niemals den Text selbst. Der Effekt von text-outline ist derselbe, wie er erzielt wird, wenn Textschattierungen strahlenförmig in jede Richtung vorgegeben werden, das heißt, dass der Versatz aller Textschattierungen die Gleichung x2 + y2 = dicke2 erfüllt.
text-replace (CSS 3)
Link: http://www.w3.org/TR/css3-gcpm/#text-replace
Werte: [<string> <string>]+ | none
Initial: none
Anwendbar auf: Alle Elemente
Vererbt: yes
Media: visual
text-replace ersetzt alle Vorkommen einer bestimmten Zeichenkette (String) mit einer anderen Zeichenkette innerhalb des Inhalts eines Elements. Die Eigenschaft nimmt Zeichenkettenpaare als Wert an, zusätzlich zum initialen „none“-Wert. Für jedes Paar von Zeichenketten werden die Vorkommen der ersten Zeichenkette durch die der zweiten ersetzt. Wenn „none“ vorgegeben wird, finden keine Ersetzungen statt.
text-shadow (CSS 3)
Link: http://www.w3.org/TR/css3-text/#text-shadow
Werte: none | [<shadow>, ] * <shadow>
Initial: none
Anwendbar auf: Alle Elemente sowie generierte Inhalte
Vererbt: ja
Media: visual
Die text-shadow-Eigenschaft akzeptiert eine kommaseparierte Liste von Schatteneffekten, um sie auf den Text eines Elements anzuwenden. <shadow> wird als [ <color>? <length> <length> <length>? | <length> <length> <length>? <color>? ] definiert, wobei die ersten zwei Längen den Versatz darstellen, und die dritte einen optionalen Unschärferadius. Der Schatten wird auf den gesamten Text sowie die Textauschmückung (text-decoration) des Elements angewandt. Wenn ein Umriss (text-outline) vorliegt, betrifft der Schatten die umrissene Form.
Beispiel
text-transform (CSS 1)
Link: http://www.w3.org/TR/CSS21/text.html#propdef-text-transform
Werte: capitalize | uppercase | lowercase | none | inherit
Initial: none
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
text-transform steuert die Groß- und Kleinschreibung des Texts eines Elements, von ausschließlicher Kleinschreibung (lowercase) über Großschreibung (uppercase) zum Beginnen jedes Worts mit einem Großbuchstaben (capitalize).
Beispiel
text-wrap (CSS 3)
Link: http://www.w3.org/TR/css3-text/#text-wrap
Werte: normal | unrestricted | none | suppress
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die text-wrap-Eigenschaft gibt den Modus an, wie Text umgebrochen wird.
unicode-bidi (CSS 2)
Link: http://www.w3.org/TR/CSS21/visuren.html#propdef-unicode-bidi
Werte: normal | embed | bidi-override | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: nein
Media: visual
Die unicode-bidi-Eigenschaft erlaubt die Anpassung der Direktionalität von Elementen in Abhängigkeit von direction.
Beispiel
vertical-align (CSS 1)
Link: http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
Werte: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Anwendbar auf: Inline-Elemente und Tabellenzellen
Vererbt: nein
Media: visual
vertical-align steuert die vertikale Positionierung innerhalb von Zeilenboxen, die durch Inline-Elemente generiert werden. Die vertical-align-Eigenschaft erlaubt neben Subskript und Superskript eine Vielfalt von Ausrichtungsformen, die mittels Prozentwerten und Längenangaben exakt bestimmt werden können.
Beispiel
white-space (CSS 1)
Link: http://www.w3.org/TR/CSS21/text.html#propdef-white-space
Werte: normal | pre | nowrap | pre-wrap | pre-line | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
white-space bestimmt, wie Leerraum behandelt wird; nowrap als nach normal (Standard) populärster Wert gibt dabei an, dass keine Zeilen umbrochen werden.
Beispiel
white-space-collapse (CSS 3)
Link: http://www.w3.org/TR/css3-text/#white-space-collapse
Werte: preserve | collapse | preserve-breaks | discard
Initial: collapse
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Normalerweise fallen mehrere Leerzeichen zu einem Leerzeichen „zusammen“; dies kann mittels der white-space-collapse-Eigenschaft unterbunden werden.
widows (CSS 2)
Link: http://www.w3.org/TR/CSS21/page.html#propdef-widows
Werte: <integer> | inherit
Initial: 2
Anwendbar auf: Block-Elemente
Vererbt: ja
Media: visual, paged
Die widows-Eigenschaft legt als Komplement zu orphans die Mindestanzahl von Zeilen innerhalb eines Blocks fest, die am Anfang einer Seite angezeigt werden sollen, und dient der Vermeidung von „Witwen“. widows nimmt nur positive Werte an.
word-break (CSS 3)
Link: http://www.w3.org/TR/css3-text/#word-break
Werte: normal | keep-all | loose | break-strict | break-all
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
word-break bestimmt, welche Zeilenumbrucheinschränkungen für ein Element vorherrschen.
word-spacing
Link: http://www.w3.org/TR/CSS21/text.html#propdef-word-spacing
Werte: normal | <length> | inherit
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
word-spacing erlaubt die Steuerung des Abstands zwischen Wörtern.
Beispiel
word-wrap (CSS 3)
Link: http://www.w3.org/TR/css3-text/#word-wrap
Werte: normal | break-word
Initial: normal
Anwendbar auf: Alle Elemente
Vererbt: ja
Media: visual
Die word-wrap-Eigenschaft bestimmt, ob der User-Agent innerhalb eines Worts umbrechen darf, um bei einer ansonsten nicht umbrechenden, zu langen Zeichenkette, die nicht in die Zeilenbox passen würde, ein „Überlaufen“ zu verhindern. Sie hat nur einen Effekt, wenn der Wert von text-wrap auf „normal“ oder „suppress“ lautet.
Beispiel