Chuck Norris hat ein „Sie haben gewonnen“-Banner angeklickt. Und er hat gewonnen!

8.01.10

Absätze gewichten mit Initialen

Wenn man zwei Inhaltsblöcke voneinander abgrenzen möchte, weil sie beispielsweise unterschiedliche Teilaspekte behandeln, greift man wie gehabt zum p-Element. Ein p-Block, also ein Absatz sollte exakt eine Kernaussage enthalten; enthält er mehr als diese eine, sollte man erwägen, den Absatz in mehrere kleinere Absätze zu gliedern. So weit nichts Neues.

Beim Schreiben wünsche ich mir aber des Öfteren eine feinere Abstufung. Es sollte nicht nur ein Aneinanderreihen von gleichwertigen Paragraphen möglich sein, sondern manchmal will ich hier und da eine etwas längere Lesepause erzwingen, um einen umfangreicheren Gedanken abzuschließen und eine Zäsur zu verdeutlichen.

Im Printbereich finden sich derlei Abgrenzungen überall; im Web bin ich dagegen noch kaum auf geschickte Absatzgewichtungen getroffen. Das liegt z.B. teilweise daran, dass der Schreiberling im Web nicht nur auf das optische, sondern im gleichen Maß auf das semantische Gewicht zu achten hat.

Die einfachste und wahrscheinlich eleganteste Lösung ist der Einsatz sogenannter Initialen. Das sind jene übergroßen Anfangsbuchstaben, die meist so positioniert werden, dass der nachfolgende Fließtext um sie herumläuft. Je nach gewünschter „Stärke“ der Zäsur kann man den Initialen noch eine andere Farbe zuweisen.

Beim Blick auf die Semantik fällt einem zuerst die Verwendung verschiedener Klassen ein; ein Absatz, der einen neuen Gedanken einleitet, wird mit einer speziellen Klasse versehen, die mittels :first-letter die Initiale formt. Eigentlich möchte man aber nicht dem ersten Absatz des neuen Gedankens eine besondere Aufgabe zukommen lassen, sondern viel eher der Lesepause, der Zäsur zwischen den Absätzen. Wühlt man lange genug in seinem Gedächtnis, fällt einem das hr-Element ein, welches zwar nicht so definiert, doch bislang für derlei Zwecke verwendet wurde. Die aktuelle HTML5-Spezifikation schafft Klarheit:

The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Dass die ursprüngliche Bedeutung des Akronyms „hr“ für „horizontal rule“ nicht viel mit Semantik zu tun hat, lassen wir geschickt unter den Tisch fallen, denn das ist man von HTML5 ohnehin gewohnt (vgl. b, i und font). Das Element ist zu praktisch, als dass man es einfach nicht benutzen dürfte. Mit dem Adjacent Sibling Combinator lassen sich die gewünschten Absätze sehr gut auswählen.

hr + p:first-letter {
font-size: 3em;
}

In diesem Fall selektiert der Adjacent Sibling Combinator also jeden Absatz, der hinter einem hr steht. Und genau das will man; die horizontale Linie selbst blenden wir per display:none aus (Wie sieht das in Jaws und anderen Screenreadern aus? Getestet nur mit LSR und wie immer nichts verstanden …).

Je nach persönlichen Vorlieben kann man die Initiale nun noch in den Textblock hineinsetzen. Das geschieht, wie gewohnt, mit einer float-Anweisung. Wenn man diesen Schritt wagt, sollte man sich aber auch bewusst werden, dass es dabei einer feinen Abstimmung der Schriftgrößen und Außenabstände bedarf. So sollte die Zeilenhöhe der Initiale immer ein Vielfaches der Zeilenhöhe des umfließenden Textes sein. Leider kann man mit den heutigen Mitteln, die CSS zur Verfügung stellt, noch nicht auf die Zeilenhöhe des Elternelements zugreifen, man muss also diese Zeilenhöhe kennen, um Initiale sauber umsetzen zu können.

p {
font: 15px/20px serif;
}

hr + p:first-letter {
font: 58px/60px serif;
margin-right: 4px;
}

Es gibt noch viele weitere Möglichkeiten, eine Gedankenpause zu erzwingen, doch die Initiale finde ich sehr schön und werde sie deshalb auch bald hier im Blog einsetzen.

Hier noch eine Liste der Alternativen, wer kann etwas ergänzen?

  • Eingeschobene Zwischenüberschriften
  • Verzierungen und Ähnliches (sog. Alinea)
    • Aldus-Blatt
    • 3 zentrierte Punkte
  • Normale Absätze sind nur eingezogen, „stärkere“ Absätze mit tatsächlicher Leerzeile

Kommentare [3]

Tim am 15.01.2010 um 13:57

In meinem Englischbuch findet sich folgende Alternative: Normale Absätze nur eingezogen, “stärkere” zusätzlich noch mit grünem Quadrat der Höhe 1em vor dem 1. Buchstaben.

Markus Schlegel am 15.01.2010 um 17:25

Könnte bei manchen Textarten nicht schlecht sein, danke.

Paul am 16.01.2010 um 16:39

Halle erstmal, dein Blog gefällt mir richtig gut. Das Layout ist sehr stimmig und du konzentrierst dich aufs wesentliche.

Ich hab für mich festgestellt das es obwohl wir mit CSS arbeiten nicht einfach ist eine Seite wirklich für alle Browser (und vor allem die einzelnen Versionen) gleich aussehen zu lassen. Dies ist eine Sache die mich am meisten an der Webentwicklung ergärt. Dies sind unnötige Stolpersteine.

Kommentar verfassen

Textile-Hilfe

  • *stark*
  • _betont_
  • "Link":http://url.com/
  • bq. Zitatkasten
  • bc. Code-Block
Der Kommentar kann erst abgeschickt werden, wenn man mindestens einmal die Vorschaufunktion aktiviert hat.

Flattr

Blogrolle

Podroll

Soziale Netzwerke

Twitroll