Benutzer-Werkzeuge

Formatierung (Styleguide)

Wie sind die Formatierungen korrekt zu benutzen?

Kursiv und Betonung

Grundsätzlich gilt: Kursiver Text ist schlechter lesbar als in aufrechter Schrift („Antiqua“) gesetzer Text. Insbesondere wird die Lesegeschwindigkeit durch den Wechsel zur kursiven Schrift verlangsamt. Dies kann dafür benutzt werden, um eine Betonung von einzelnen Worten oder Begriffen herbeizuführen, oder um z.B. auf auf einen Wechsel der Sprache oder ähnliches aufmerksam zu machen.

Es sollte vermieden werden, längere Abschnitte kursiv zu setzen, oder zu viele solcher Betonungen zu setzen.

Unterscheidung zwischen Kursiv und Betonung

HTML kennt zwei verschiedene Markierungen, die beide visuell als kursiver Text auf einer Website erscheinen:

  1. <i>kursiver Text, ohne jede semantische Bedeutung
  2. <em> – semantisch betonter Text (wird auch kursiv angezeigt)

Der Unterschied ist am einfachsten erkennbar, wenn man sich vorstellt, wie ein Schreenreader den Text vorlesen würde: Mit <i> markierter Text wird genauso vorgelesen wie regulärer Text, während mit <em> markierter mit einer Betonung (Akzent) gelesen wird.

In dem meisten Fällen sollte im Text die betonte Variante verwendet werden. Aus diesem Grund wird Text, der mittels der mit einem „i“ markierten Schaltknopfes (oder mit dem Steuercode //) kursiv gesetzt wird, auch als <em> dargestellt.

Mit <i> wird Text daher nur markiert, wenn dieser zwar kursiv angezeigt werden, aber beim Vorlesen keine Betonung erhalten soll.

Fremdsprachiger Text

Jede Seite auf diesem Wiki ist grundsätzlich als „deutschsprachig“ markiert. Damit die Sprache von einzelnen fremdsprachigen Ausdrücken korrekt erkannt werden kann (insbesondere wiederum von Screenreadern), müssen diese mit dem korrekten Sprachcode markiert werden.

Gleichzeitig sollte auch der Leser vorgewarnt werden, dass ein Begriff aus einer anderen Sprache übernommen wurde. Bei nicht-Lateinischen Zeichensätzen ist dies normalerweise offensichtlich, bei solchen aus Sprachen, die auch eine lateinische Schrift verwenden, sollte dies durch kursiven Text kenntlich gemacht werden.

Da dies keine Betonung impliziert, wird hierfür <i> verwendet. Da es hierfür keine Wiki-Auszeichnung gibt, muss dies wiederum mittels <html>-Block geschehen, so wie hier:

… „<html><i lang="fr">La trahison des images</i></html>“ …

Weitere Informationen zur Aus­zeichnung von fremd­sprach­igem Text – insbesondere auch zu solchem in nicht-Lateinischer Schrift – ist auf der Seite zur Barriere­freiheit zu finden.

Fettdruck und starke Betonung

Grundsätzlich gilt für Fettdruck das gleiche wie für kursiv: es gibt die beiden folgenden Varianten:

  1. <b>Fettdruck ohne semantische Bedeutung
  2. <strong> – semantisch starke Betonung (wird auch als Fettdruck angezeigt)

Auch hier gilt, dass der Unterschied am deutlichsten wird, wenn man bedenkt, wie ein Screenreader die Betonung verändert, wenn so ausgezeichneter Text vorgelesen wird: keine Betonung bei <b> und eine starke Betonung bei <strong>.

Auch hier wird Text, der mittels des „b“-Knopfes (oder mittels Steuercode **) markiert wurde, als <strong> dargestellt.

Anders als bei Kursiv gibt es aber nur sehr seltene sinnvolle Anwendungen für diese beiden Formatierungsvarianten. Sowohl Fettdruck als auch starke Betonung sollten beide grundsätzlich vermieden werden.

Bestenfalls kann man es verwenden, wenn ein Teil einer Textzeile eine Funktion ähnlich zu einer Überschrift einnimmt. So wie in dieser Auflistung:

  • Polysemie: Pferd (Reittier) / Pferd (Schachfigur) / …
  • Homograph: umfahren (überfahren) / umfahren (drum herum fahren)
  • Homophon: Wagen / Waagen / wagen

In diesem Fall wird die stark betonte Variante mit <strong> verwendet.

Unterstreichungen

Auf Webseiten ist Unterstreichung üblicherweise ein Hinweis auf einen Hyperlink. Um Unklarheiten bei Besuchern zu vermeiden, sollten Unterstreichungen grundsätzlich so gestaltet sein, dass diese nicht mit einem Link verwechselt werden können.

Unterstreichungen zur Betonung sollten im Fließtext vermieden verwenden. Hierfür ist kursiver Text mittels <em> (siehe oben) die bessere Wahl.

Aus diesem Grund sollte man den Knopf „Unterstrichener Text“ („u“) aus der Werkzeugleiste des Editors (wie auch der Steuercode __) grundsätzlich vermeiden. Diese generieren übrigens den Code <em class="u"> und nicht, wie vielleicht zu erwarten wäre, <u>. Dies ist zwar semantisch eine bessere Wahl, kann aber dennoch immer nocch mit einem Link verwechselt werden.

Besondere Heraushebung

Es gibt eine Ausnahme, für die Unterstreichungen wie die oben beschriebene zur Hervorhebung verwendet werden kann: dies gilt, wenn ein Wortteil besonders hervorgehoben werden soll.

Die beiden Schreibweisen „die Antezedenz“ und „das An­te­ze­dens“ sind beide ge­bräuchlich …
Homograph: umfahren (überfahren) / umfahren (drum herum fahren)

Dies sollte aber nur ausnahmsweise eingesetzt werden.

Fragwürdige Aussage

Um kenntlich zu machen, dass eine Aussage fragwürdig ist, oder ein Begriff auf eine fragwürdige Weise (z.B. mehrdeutig) gebraucht wird, sollte diese mit einer speziellen Unterstreichung kenntlich gemacht werden. Dieses Format (rote, gewellte Unterstreichung) ist der Fehlermarkierung in Texteditoren nachempfunden.

Der Code hierfür benutzt den <u>-Tag (damit die Unterstreichung auch auf Geräten sichtbar ist, die keine Stilformatierung erlauben) und benutzt die CSS-Klasse „questionable“. Dies sieht dann wie folgt aus:

… <html><u class="questionable">Unter­streich­ung</u></html> …

Falls möglich, sollte außerdem ein title-Attribut vorhanden sein, das kurz erklärt, warum diese Ausdruck fragwürdig ist (z.B.: title="mehrdeutiger Ausdruck")

Durchgestrichener Text

Durchgestrichener Text wird in Deutschen nicht sehr häufig verwendet, sodass diese Formatierung auch wenig Anlass für wird.

Auch hier gibt es wieder zwei verschiedene Varianten:

  1. <s> – für Durchstreichung ohne semantische Bedeutung
  2. <del> – für gelöschten Text (wird auch durchgestrichen dargestellt)

Der mit „s“ gekennzeichnete Knopf in der Werkzeugleiste erzeugt <del>, aber für beides gilt, dass es im Textfluss normalerweise nicht vorkommen sollte.

Ungültige Schlüsse oder falsche Aussagen

Durchstreichungen sollten dagegen gebraucht werden, um eindeutig falsche Aussagen oder ungültige Schlüsse zu markieren (im Gegensatz zu „nur“ fragwürdigen, welche eine Unterstreichung bekommen).

Hierfür wird <s> mit der Klasse „invalid“ verwendet:

Daraus folgt: <html><s class="invalid">1 ist 2</s></html>

Dies wird wie folgt dargestellt:

Daraus folgt: 1 ist 2

Bei sehr kurzen ungültigen Aussagen (mit nur einem oder zwei Zeichen) kann der durchgestrichene Text schwer lesbar sein. Für diese Fälle gibt es zusätzliche Klassen, die einen schrägen Durchstrich erzeugen:

Ein Zeichen: <html><s class="invalid short">A</s></html>
Zwei Zeichen: <html><s class="invalid short2">⌐A</s></html>

Dies wird wie folgt dargestellt:

Ein Zeichen: A
Zwei Zeichen: ⌐A

Die beiden Klassen „„short“ und „short2“ sollten nur für solche sehr kurzen Texte verwendet werden, da sie bei längeren Texten nicht korrekt aussehen.

Diese Web­site be­nutzt Cookies. Durch die Nutz­ung der Web­site er­klären Sie sich mit der Speich­er­ung von Cookies auf Ihrem Com­puter ein­ver­standen. Außer­dem be­stät­igen Sie, dass Sie unsere Daten­schutz­richt­linie ge­lesen und ver­standen haben. Wenn Sie damit nicht ein­ver­standen sind, ver­lassen Sie bitte die Web­site.

Weitere Information