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:

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


Deprecated: Directive 'allow_url_include' is deprecated in Unknown on line 0