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

23.02.09

Formatierung logischer Textauszeichnungen

Während man wie ein Berserker an seinem Layout tüftelt, das Letzte aus seinem CMS herausholt oder einfach nur wahnsinnig wird vor lauter Optimierung für den Internet Explorer, vernachlässigt man nicht selten die genauso wichtigen Inline-Textauszeichnungen à la em, code oder dfn. In diesem Essay möchte ich auf die Formatierung dieser Elemente eingehen.

Prolog

Die logischen Textauszeichnungen haben im Gegensatz zu den physikalischen Textauszeichnungen (b, u, i, strike …) eine genaue Bedeutung, die natürlich auch erhalten bleibt, wenn die Elemente genau gleich aussehen wie der neutrale Fließtext um sie herum. Das heißt, ich setze für dieses Essay die korrekte und sinnvolle Benutzung der Elemente voraus.

Wer keine Lust oder Zeit auf die Formatierung dieser Elemente hat, der kann dies auch einfach vom Browser übernehmen lassen. Wichtig hierbei ist jedoch, dass man die Elemente nicht per CSS-Reset zu Beginn des Stylesheets zum Einheitsbrei gemacht hat.

Auf der Ergebnisseite von Google wird diese Herangehensweise genutzt. Jeder Internetuser hat schon einmal Google benutzt und die Farbgebung ist uns allen in Fleisch und Blut übergegangen. Die Formatierungen einfach beim Standard zu belassen ist also nicht die schlechteste Lösung. Sie ist aber bei weitem auch nicht die schönste.

Eine Testseite, die alle Elemten nach dem Browserstandard anzeigt findet sich hier:
http://markus-schlegel.com/essays/logicdefault.html

Hyperlinks

Hyperlinks sind wohl die Elemente, denen im Designprozess noch am meisten Beachtung geschenkt wird, sind sie doch das, was das Netz zum Netz macht. Über die Formatierung von Hyperlinks wurde schon viel geschrieben, deshalb möchte ich darauf auch gar nicht näher eingehen. Am Wichtigsten ist, dass man die Links klar als solche kennzeichnet; sei dies durch Unterstreichung, klare Farbgestaltung etc.

Ein Hyperlink hat im Grunde drei Zustände. »Normal«, »Schon besucht« und das, was wir flapsig als »Hover« bezeichnen. :link, :visited und :hover, bzw. :active und :focus sind deren CSS-Pseudotypen. Einen besuchten Link muss man meiner Meinung nach nicht unbedingt klar als solch einen kennzeichnen, da das Gedächtnis des Besuchers diese Aufgabe übernehmen kann. Es kann aber trotzdem nicht von Nachteil sein, diese Links beispielsweise etwas blasser darzustellen. Viel wichtiger finde ich jedoch die Formatierung des »Hover«-Pseudoelements. Als Benutzer ohne Maus ist man auf eine visuelle Veränderung angewiesen, da man sich sonst beim »durchtabben« der Links gnadenlos verläuft. Aber auch wer eine Maus zur Hand hat, ist froh über ein Feedback beim Überfahren einen Textstückes.

Standardmäßiges Rendern von Hyperlinks:
Hyperlinks, wie sie vom Browser standardmäßig gerendert werden.

em und strong

Die beiden am häufigsten anzutreffenden Elemente nach Hyperlinks. em ist die etwas schwächere Variante von strong, weshalb der Browser dieses Element auch nur kursiv setzt, während strong fett ist. Falls einem der fette Schnitt zu aufdringlich ist, kann man strong visuell em angleichen und ebenfalls kursiv anzeigen lassen.

Man kann die Elemente auch farblich hervorheben. Wenn man kein richtiges Schwarz in seinem Fließtext verwendet, kann man die beiden Elemente mit color:black; wirklich schwarz machen, wodurch diese stärker ins Auge fallen.

Standardmäßiges Rendern von em und strong:
em und strong, wie sie vom Browser standardmäßig gerendert werden

del und ins

Die beiden einfachsten Elemente. del zeichnet einen Text als nachträglich gelöscht aus, ins als nachträglich eingefügt. Es liegt nahe, del mittels text-decoration: strike-through durchzustreichen. ins kann man dann entweder noch unterstreichen oder überhaupt nicht vom restlichen Text unterscheiden, da del und ins sowieso fast ausschließlich zusammen auftreten und es somit klar sein sollte, dass das nachfolgende Textstück ersetzt wurde.

In XHTML 2 werden del und ins durch das Attribut edit ersetzt, welches sich auf fast jedes Inline-Element anwenden lässt.

Standardmäßiges Rendern von del und ins:
ins und del, wie sie vom Browser standardmäßig gerendert werden

abbr und acronym

Diese beiden Elemente fasse ich deshalb zusammen, weil sie quasi das Gleiche beschreiben. Ein Akronym (acronym) ist die häufigste Erscheinungsform einer Abkürzung (abbreviation). In HTML 5 exisitert deshalb auch nur noch abbr.

Auch vom Browser werden beide Elemente gleich angezeigt, nämlich mit einem gepunkteten unteren Rand. Das kann man in seinen eigenen Formatierungen auch dabei belassen. Als zusätzliches Feature kann man den Mauszeiger beim »Hovern« zu einem Fragezeichen werden lassen. Wenn man dann noch einen ordentlichen Browser benutzt, wird einem der Inhalt des title-Tags als Tooltip angezeigt.

Um den Cursor zu verändern definiert man folgendes:

abbr, acronym  {
    cursor: help;
}

Standardmäßiges Rendern von abbr und acronym:
abbr und acronym, wie sie vom Browser standardmäßig gerendert werden

samp, dfn und cite

Ein Beispiel wird mittels samp ausgezeichnet, eine zu definierender Begriff mittels dfn und ein kurzes Zitat mit cite.

Bei all’ diesen vielen verschiedenen Elementen kann es beim Besucher auch oftmals eher zu Verwirrung kommen. Deshalb sollte man es nicht übertreiben und diese drei Elemente einfach dem normalen Text angleichen.

Standardmäßiges Rendern von samp, dfn und cite:
samp, cite und dfn, wie sie vom Browser standardmäßig gerendert werden

kbd, var und code

Will man etwas als Quellcode auszeichnen, benutzt man code. Variable Textteile werden mittels var gekennzeichnet. Will man eine vom User vorzunehmende Eingabe zeigen, so benutzt man kbd. Allen drei Elementen tut eine dicktengleiche (monospace) Schrift gut.

Im Fließtext ist es außerdem praktisch, kbd einen Border oder Outline zu verpassen. Damit ähnelt der ausgezeichnete Text einem Formularfeld und kommt somit seiner Bestimmung etwas näher.

Standardmäßiges Rendern von kbd, var und code:
kbd, var und code, wie sie vom Browser standardmäßig gerendert werden

HTML 5: mark

In HTML 5 gibt es ein Element mit dem Namen mark. Es kann beispielweise eingesetzt werden, wenn eine Suche gestartet wurde und den Suchbegriff dort hervorzuheben, wo er im gefundenen Text auftaucht.

Hier muss man sich nicht zurückhalten, denn wenn der Nutzer nach dem Begriff gesucht hat, ist er für jede Hilfe, den Begriff wiederzufinden, dankbar. Es eignet sich zum Beispiel eine farbliche Unterlegung des Begriffs. Wenn man das Ganze etwas kunstvoller angehen möchte, kann man sich auch den gemeinen Textmarker auf Papier zum Vorbild nehmen und eine Hintergrundgrafik erstellen, die sich horizontal prima kacheln lässt.

Kommentare [1]

BajK am 7.09.2009 um 03:36

Der große Unterschied zwischen acronym und abbr ist, dass Screenreader z.B. abbr als “Erklärung einer abkürzung” auffassen, also das Wort buchstabenweise vorlesen (F-U-C-K), während acronym nur eine normale Erklärung sein soll (Fack).

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