CSS: Schrift- und Textformatierung
Auf dieser Seite werden die wichtigsten CSS-Eigenschaften vorgestellt, mit denen Schrift und Text eines HTML-Dokuments formatiert werden können, wie man es beispielsweise auch von einem normalen Textverarbeitungsprogramm gewohnt ist. Schriftart, -größe und -farbe, fetter und kursiver Satz, aber auch speziellere Auszeichnungen wie Kapitälchen oder gesperrter Satz können auf einen Text angewendet werden. Weiterhin lässt sich die Ausrichtung eines Textes innerhalb eines Absatzes, das Einrücken der ersten Absatzzeile und die Zeilenhöhe festlegen. Alle Eigenschaften werden durch Beispiele demonstriert, mit denen auch mögliche Unterschiede in der Darstellung bei verschiedenen Browsern verglichen werden können.
Schriftart – font-family
Zur Verwendung serverseitiger Fonts siehe: @font-face
Um einen Text in einer bestimmten Schriftart (Font) darzustellen, wird dieser mit der CSS-Eigenschaft font-family formatiert. Diese Eigenschaft erwartet mindestens einen Schriftnamen als Wert. Praktischerweise sollte man aber immer eine Reihe alternativer Schriftarten (sog. ›Fallback-Fonts‹) angeben, die in dem Fall verwendet werden können, wenn eine davor deklarierte Schriftart auf dem Rechner des Benutzers nicht installiert ist. Ein Browser wird versuchen, die erste deklarierte Schriftart zu verwenden. Ist diese nicht installiert, wird nach der zweiten gesucht, und so weiter. Als letzte Alternative solle man dann noch einen ›generischen‹ Schriftnamen angeben, damit wenigstens eine halbwegs ähnliche Systemschriftart, die im Browser eingestellt ist, verwendet werden kann, falls keine einzige der angegebenen Alternativen möglich ist. Generische Schriftnamen sind keine eigentlichen Namen eines bestimmten Fonts, sondern bezeichnen eine Gruppe von Schriftarten, die ähnliche Eigenschaften besitzen:
• serif – für Schriften mit Serifen
• sans-serif – für Schriften ohne Serifen
• monospace – für dicktengleiche Schriften
• cursive – für besondere kursive Schriften
• fantasy – für alle anderen Schriften
• system-ui – Schriftart des Benutzersystems
Font-Namen, die ein Leerzeichen enthalten (z. B. ›DejaVu Sans‹), müssen in Anführungzeichen gesetzt werden.
Hier ein paar Beispiele:
<p style='font-family:"DejaVu Serif", Georgia, "Times New Roman", serif;'>Lorem ipsum dolor sit amet.</p>
<p style='font-family:"DejaVu Sans", Verdana, Arial, sans-serif;'>Consetetur sadipscing elitr.</p>
<p style='font-family:monospace;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Schriftgröße – font-size
Die Größe einer Schrift wird über die Eigenschaft font-size definiert. Als Wert eignen sich z. B. absolute Werte in Pixeln oder auch bestimmte Schlüsselworte wie z. B. small oder large. Mehr dazu siehe W3C-Spezifikation.
Hier ein paar Beispiele:
<p style='font-size:20px;'>Lorem ipsum dolor sit amet.</p>
<p style='font-size:1.8em;'>Consetetur sadipscing elitr.</p>
<p style='font-size:small;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Schriftstärke – font-weight
Über die Eigenschaft font-weight kann die Strichstärke einer Schrift eingestellt werden. Üblicherweise wird man die Werte normal oder bold (für fette Schrift) verwenden. Es sind aber auch numerische Angaben möglich, die in der Regel jedoch keinen besonderen Nutzen bringen.
Hier ein paar Beispiele:
<p style='font-weight:bold;'>Lorem ipsum dolor sit amet.</p>
<p style='font-weight:normal;'>Consetetur sadipscing elitr.</p>
<p style='font-weight:900;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Kursiver Text – font-style
Über die Eigenschaft font-style kann eingestellt werden, ob die Schrift normal oder kursiv dargestellt wird. Möglich sind folgende Werte:
• normal – in der Regel aufrechte Darstellung
• italic – kursive Darstellung
• oblique – ›verschiefte‹ oder ›faux italic‹ Darstellung, wenn vorhanden
Hier ein paar Beispiele:
<p style='font-style:italic;'>Lorem ipsum dolor sit amet.</p>
<p style='font-style:normal;'>Consetetur sadipscing elitr.</p>
<p style='font-style:oblique;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Zeichenbreite – font-stretch
Über die Eigenschaft font-stretch kann die Breite einer Schrift gewählt werden, sofern ein entsprechender Schriftschnitt verfügbar ist. Möglich sind folgende Werte:
• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded
Hier ein paar Beispiele:
<p style='font-stretch:condensed;'>Lorem ipsum dolor sit amet.</p>
<p style='font-stretch:normal;'>Lorem ipsum dolor sit amet.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Kapitälchen – font-variant-caps
Über die Eigenschaft font-variant-caps kann eingestellt werden, wie Text als Kapitälchen dargestellt wird. Unterstützte Werte sind hier:
• normal – keine Kapitälchen
• small-caps – Kleinbuchstaben werden zu Kapitälchen
• all-petite-caps – alle Buchstaben werden zu Kapitälchen
• unicase – Großbuchstaben werden zu Kapitälchen (nur Webkit)
Hier ein paar Beispiele:
<p style='font-variant-caps:small-caps;'>Lorem ipsum dolor sit amet.</p>
<p style='font-variant-caps:all-petite-caps;'>Lorem ipsum dolor sit amet.</p>
<p style='font-variant-caps:unicase;'>Lorem ipsum dolor sit amet.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
Ligaturen – font-variant-ligatures
Über die Eigenschaft font-variant-ligatures kann eingestellt werden, wie Ligaturen eingesetzt werden. Unterstützte Werte sind hier:
• none – keine Ligaturen
• normal – nur common-ligatures und contextual
• [no-]common-ligatures – gewöhnliche Ligaturen
• [no-]contextual – kontextbezogene Formen
• [no-]discretionary-ligatures – dekorative Ligaturen
• [no-]historical-ligatures – historische Ligaturen
Über das Präfix no- lassen sich diese Angaben ausschalten.
Hier ein paar Beispiele:
<p style='font-variant-ligatures:none;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:common-ligatures;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:contextual;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:discretionary-ligatures;'>ff ft fl fi ffi ffl ſt st</p>
<p style='font-variant-ligatures:historical-ligatures;'>ff ft fl fi ffi ffl ſt st</p>
Dieser Code führt zu folgender Darstellung:
ff ft fl fi ffi ffl ſt st ct Th
ff ft fl fi ffi ffl ſt st ct Th
ff ft fl fi ffi ffl ſt st ct Th
ff ft fl fi ffi ffl ſt st ct Th
ff ft fl fi ffi ffl ſt st ct Th
Ziffernzeichen – font-variant-numeric
Über die Eigenschaft font-variant-numeric kann die Darstellung von Ziffernzeichen eingestellt werden. Unterstützte Werte sind hier:
• normal – gewöhnliche Darstellung
• lining-nums – Versalziffern oder
• oldstyle-nums – Mediävalziffern
• proportional-nums – Ziffern mit variabler Breite oder
• tabular-nums – Ziffern mit fester Breite
• diagonal-fractions – schräge Darstellung von Brüchen oder
• stacked-fractions – gestapelte Darstellung von Brüchen
• ordinal – Ordinalzeichen
• slashed-zero – Null mit Schrägstrich
Hier ein paar Beispiele:
<p style='font-variant-numeric:lining-nums proportional-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:lining-nums tabular-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:oldstyle-nums proportional-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:oldstyle-nums tabular-nums;'>123,45<br>987,65</p>
<p style='font-variant-numeric:diagonal-fractions;'>123/456</p>
<p>1<span style='font-variant-numeric:ordinal;'>st</span> 2<span style='font-variant-numeric:ordinal;'>nd</span> 3<span style='font-variant-numeric:ordinal;'>rd</span> 4<span style='font-variant-numeric:ordinal;'>th</span></p>
Dieser Code führt zu folgender Darstellung:
123,45
987,65
123,45
987,65
123,45
987,65
123,45
987,65
123/456
1st 2nd 3rd 4th
Schriftvarianten – font-variant
Die Eigenschaft font-variant ist eine Kurzschreibweise für verschiedene oben genannte Schrifteigenschaften. Mögliche Werte sind hier:
• none – setzt alle Eigenschaften auf den Ausgangswert zurück und font-variant-ligatures auf none
• normal – setzt alle Eigenschaften auf den Ausgangswert zurück
• ein Wert aus font-variant-caps oder
• ein Wert aus font-variant-ligatures oder
• ein Wert aus font-variant-numeric
Hier ein paar Beispiele:
<p style='font-variant:small-caps;'>Lorem ipsum dolor sit amet.</p>
<p style='font-variant:oldstyle-nums;'>1234,456</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
1234,456
Schrift – font
Über die Eigenschaft font können folgende Eigenschaften in einer einzigen Definition eingestellt werden:
• font-style – Kursiver Text
• font-variant – Schriftvarianten (nur normal oder small-caps)
• font-weight – Schriftstärke
• font-stretch – Zeichenbreite
• font-size – Schriftgröße
• line-height – Zeilenhöhe (siehe unten)
• font-family – Schriftart
Es müssen nicht alle Angaben gemacht werden, aber sie müssen in der obigen Reihenfolge notiert werden. Schriftgröße und Zeilenhöhe werden durch ein Slash / getrennt.
Hier ein paar Beispiele:
<p style='font:italic small-caps bold 20px/2em "DejaVu Sans", Verdana, sans-serif;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<p style='font:17px serif;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Typografische Merkmale – font-feature-settings
Mit der Eigenschaft font-feature-settings lassen sich besondere typografische Merkmale von OpenType-Schriften steuern, die in der Voreinstellung nicht verfügbar sind. Nicht alle möglichen Merkmale werden von den einzelnen Fonts unterstützt, weshalb man diese in entsprechenden Dokumentationen oder durch Ausprobieren herausfinden muss. Eine Liste möglicher Merkmale findet man bei Wikipedia.
Hier ein paar Beispiele für die Schriften OpenSans bzw. EB Garamond:
onum – Mediävalziffern
frac – Besondere Darstellung von Brüchen
ss01 – Stylistic Set 01
ss02 – Stylistic Set 02
ss03 – Stylistic Set 03
swsh – Swash
<p>
<span>0123456789</span>
<span style="font-feature-settings:'onum';">0123456789</span>
</p>
<p>
<span>1234/5678</span>
<span style="font-feature-settings:'frac';">1234/5678</span>
</p>
<p>
<span>Iglu</span>
<span style="font-feature-settings:'ss01';">Iglu</span>
<span style="font-feature-settings:'ss02';">Iglu</span>
<span style="font-feature-settings:'ss03';">Iglu</span>
</p>
<p>
<span><i>Anton Reiser</i></span>
<span style="font-feature-settings:'swsh';"><i>Anton Reiser</i></span>
</p>
0123456789 0123456789
1234/5678 1234/5678
Iglu Iglu Iglu Iglu
Anton Reiser Anton Reiser
Groß-/Kleinschreibung – text-transform
Über die Eigenschaft text-transform lässt sich einstellen, ob Text in normaler, Klein- oder Großschreibung dargestellt wird. Mögliche Werte außer none (normale Darstellung) sind:
• capitalize – das erste Zeichen jedes Wortes wird groß gesetzt
• uppercase – alle Zeichen werden groß gesetzt
• lowercase – alle Zeichen werden klein gesetzt
Hier ein paar Beispiele:
<p style='text-transform:capitalize;'>Lorem ipsum dolor sit amet.</p>
<p style='text-transform:uppercase;'>Consetetur sadipscing elitr.</p>
<p style='text-transform:lowercase;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Vertikale Ausrichtung – vertical-align
Über die Eigenschaft vertical-align lässt sich die vertikale Ausrichtung eines Inline-Elements einstellen. Mögliche Werte sind:
• baseline – Grundlinie
• top – Oberkante
• middle – Mitte
• bottom – Unterkante
• text-top – Textoberkante
• text-bottom – Textunterkante
• super – Position für höher gestellte Zeichen
• sub – Position für tiefer gestellte Zeichen
Außerdem kann ein Zahlenwert in den üblichen Einheiten wie px oder em sowie ein Prozentwert angegeben werden.
Der Nutzen dieser Eigenschaft erschließt sich nicht unbedingt sofort, allerdings kann sie manchmal hilfreich sein, um Grafiken, die Teil eines Textflusses sind, auszurichten, wobei es praktischer ist, in einem solchen Fall Zahlenwerte statt der Schlüsselwörter zu verwenden, da man diese Elemente so genauer positionieren kann.
Hier ein paar Beispiele:
<p style='text-transform:uppercase;padding:20px;background-color:#333;'>
lorem <img src='img/orangebox.png' style='vertical-align:text-top;' alt='Box' title='text-top'>
ipsum <img src='img/orangebox.png' style='vertical-align:top;' alt='Box' title='top'>
dolor <img src='img/orangebox.png' style='vertical-align:super;' alt='Box' title='super'>
sit <img src='img/orangebox.png' style='vertical-align:middle;' alt='Box' title='middle'>
amet <img src='img/orangebox.png' style='vertical-align:baseline;' alt='Box' title='baseline'>
lorem <img src='img/orangebox.png' style='vertical-align:sub;' alt='Box' title='sub'>
ipsum <img src='img/orangebox.png' style='vertical-align:bottom;' alt='Box' title='bottom'>
dolor <img src='img/orangebox.png' style='vertical-align:text-bottom;' alt='Box' title='text-bottom'> amet
</p>
<p style='text-transform:uppercase;padding:20px;margin-bottom:20px;background-color:#444;'>
lorem <img src='img/orangebox.png' style='vertical-align:9px;' alt='Box' title='9px'>
ipsum <img src='img/orangebox.png' style='vertical-align:6px;' alt='Box' title='6px'>
dolor <img src='img/orangebox.png' style='vertical-align:3px;' alt='Box' title='3px'>
sit <img src='img/orangebox.png' style='vertical-align:0px;' alt='Box' title='0px'>
amet <img src='img/orangebox.png' style='vertical-align:-3px;' alt='Box' title='-3px'>
lorem <img src='img/orangebox.png' style='vertical-align:-6px;' alt='Box' title='-6px'>
ipsum <img src='img/orangebox.png' style='vertical-align:-9px;' alt='Box' title='-9px'> dolor
</p>
Dieser Code führt zu folgender Darstellung. In der oberen Reihe sind die Grafiken mit den Schlüsselbegriffen ausgerichtet, in der unteren mit Zahlenwerten. Wenn man eine Grafik mit der Maus überfährt, wird der entsprechende Wert angezeigt:
lorem ipsum dolor sit amet lorem ipsum dolor amet
lorem ipsum dolor sit amet lorem ipsum dolor
Zeichenabstand – letter-spacing
Über die Eigenschaft letter-spacing kann der Zeichenabstand eines Textes eingestellt werden (sog. Sperrsatz). Moglich ist der Wert normal oder ein numerischer Wert z. B. in Pixeln oder als Anteil der Em-Länge.
Hier ein paar Beispiele:
<p style='letter-spacing:2px;'>Lorem ipsum dolor sit amet.</p>
<p style='letter-spacing:-.1em;'>Consetetur sadipscing elitr.</p>
<p style='letter-spacing:.5em;'>Sed diam nonumy eirmod tempor.</p>2px
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Textdekoration Linie - text-decoration-line
Über die Eigenschaft text-decoration-line lässt sich die Position einer Linie bestimmen, mit der Text ausgezeichnet werden soll. Mögliche Werte neben none (ohne Auszeichnung) sind:
• underline – unterstrichen
• overline – überstrichen
• line-through – durchgestrichen
Beispiele:
<p style='text-decoration-line:underline;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:overline;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:line-through;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Textdekoration Farbe - text-decoration-color
Über die Eigenschaft text-decoration-color lässt sich die Farbe der Linie festlegen, mit der Text ausgezeichnet werden soll. Es können die üblichen Farbwerte verwendet werden.
Beispiele:
<p style='text-decoration-line:underline;text-decoration-color:#ff0000;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:overline;text-decoration-color:yellow;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:line-through;text-decoration-color:hsl(130,85%,50%);'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Textdekoration Stil - text-decoration-style
Über die Eigenschaft text-decoration-style lässt sich der Stil der Linie festlegen, mit der Text ausgezeichnet werden soll. Mögliche Werte sind:
• solid – durchgehende Linie
• double – doppelte Linie
• dotted – gepunktete Linie
• dashed – gestrichelte Linie
• wavy – wellenförmige Linie
Beispiele:
<p style='text-decoration-line:underline;text-decoration-style:solid;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:underline;text-decoration-style:double;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration-line:underline;text-decoration-style:dotted;'>Sed diam nonumy eirmod tempor.</p>
<p style='text-decoration-line:underline;text-decoration-style:dashed;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration-line:underline;text-decoration-style:wavy;'>Consetetur sadipscing elitr.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Textdekoration – text-decoration
Über die Eigenschaft text-decoration lassen sich die Eigenschaften text-decoration-line, text-decoration-color und text-decoration-style zusammenfassen.
Beispiele:
<p style='text-decoration:underline yellow solid;'>Lorem ipsum dolor sit amet.</p>
<p style='text-decoration:overline #ff0000 dashed;'>Consetetur sadipscing elitr.</p>
<p style='text-decoration:line-through hsl(130,85%,50%) wavy;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet.
Consetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Textdekoration überspringen - text-decoration-skip
Mit der Eigenschaft text-decoration-skip lässt sich festlegen, ob eine Textdekoration unter bestimmten Bedingungen unterbrochen werden soll. Mögliche Werte sind:
• none – keine Unterbrechung
• ink – Unterbrechung bei Überschneidung mit dem Text
• objects –
• spaces –
• edges –
• box-decoration –
Diese Eigenschaft ist gegenwärtig offenbar weder in WebKit noch in Gecko vollständig implementiert. Lediglich der Wert ink funktioniert bei WebKit (außer bei text-decoration-line:line-through;). Man beachte das unterschiedliche Rendering zwischen WebKit und Gecko bei hochgestellten Zeichen.
Siehe auch Can I Use.
Beispiele:
<p style='text-decoration:underline red solid;text-decoration-skip:ink;'>Lorem ipsum dolor sit amet<sup>2</sup>.</p>
<p style='text-decoration:overline yellow solid;text-decoration-skip:ink;'>ÂConsetetur sadipscing elitr.</p>
<p style='text-decoration:line-through blue solid;text-decoration-skip:ink;'>Sed diam nonumy eirmod tempor.</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet2.
ÂConsetetur sadipscing elitr.
Sed diam nonumy eirmod tempor.
Absatzausrichtung – text-align
Über die Eigenschaft text-align lässt sich die horizontale Ausrichtung des Textes eines Absatzes einstellen. Mögliche Werte sind:
• left – linksbündiger Flattersatz
• right – rechtsbündiger Flattersatz
• center – zentriert bzw. Mittelachsensatz
• justify – Blocksatz
Hier ein paar Beispiele:
<p style='text-align:left;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:right;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:center;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-align:justify;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Erste Zeile einrücken – text-indent
Über die Eigenschaft text-indent lässt sich einstellen, wie weit die erste Zeile eines Absatzes eingerückt wird. Mögliche Werte außer 0 sind:
• ein Zahlenwert mit Einheit gibt einen festen Wert an
• ein Prozentwert bezieht sich auf die Breite des Absatzes
Hier ein paar Beispiele:
<p style='text-indent:0;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:10%;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:3em;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='text-indent:-20px;padding-left:40px;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Zeilenhöhe – line-height
Über die Eigenschaft line-height lässt sich die Zeilenhöhe eines Absatzes einstellen. Mögliche Werte außer normal sind:
• ein Zahlenwert ohne Einheit gilt als Multiplikator für die Schriftgröße
• ein Prozentwert bezieht sich ebenfalls auf die Schriftgröße
• ein Zahlenwert mit Einheit gibt einen festen Wert an
Hier ein paar Beispiele:
<p style='line-height:normal;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:1.5;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:180%;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
<p style='line-height:.8em;'>Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</p>
Dieser Code führt zu folgender Darstellung:
Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
Invidunt ut labore et dolore. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet