Wenn doch alles so einfach wäre wie in Word! Zwar ärgere ich mich oft über eine gewisse Eigendynamik, die die MS-Software häufig an den Tag legt. Doch die Tatsache, dass zumindest "falsche" Anführungszeichen und - zu kurz geratene - Gedankenstriche automatisch gegen die „korrekten“ Versionen – in Windeseile – ersetzt werden, tilgt schon einmal 70 % der Sonderzeichen-Sünden, die unbedarfte Hobbysetzer sonst verursachen würden.

Dass die meisten HTML-Editoren und Content Management Systeme dieser Welt noch nicht so weit sind, sieht man daran, dass selbst die Internet-Auftritte großer Zeitungen und Magazine nicht in der Lage sind, einige elementare Satzregeln zu beachten. Dabei ist das doch gar kein Problem, wie wir gleich sehen werden.

Vom & zum ;

Eines haben alle Sonderzeichen gemeinsam: Sie lassen sich auf drei Arten im HTML-Quelltext erzeugen. In jedem der Fälle muss die Kennung des gewünschten Zeichens zwischen einer Et-Ligatur & und einem Semikolon ; platziert werden.

Es ist zwar prinzipiell möglich, das HTML-Dokument von Grund auf im Unicode (UTF-8) anzulegen und die Sonderzeichen einfach ohne weitere Kodierung einzufügen. Jedoch zeigt die Erfahrung, dass dies noch nicht von allen Browser-/Server-Kombinationen ohne weiteres unterstützt wird. Deshalb lieber auf Nummer Sicher gehen und alle Sonderzeichen hübsch kodieren, und zwar so:

1. Die HTML-Kennung   Sie besteht aus maximal 6 Buchstaben und ist eine Abkürzung des typografischen Fachausdruckes für das entsprechende Zeichen. Zum Beispiel das scharfe ß: ß (»EssZett«-Ligatur).
2. Der Unicode   Hier darf man die Raute # nicht vergessen, welche vor dem eigentlichen Zahlencode gesetzt wird. Das scharfe ß wird so erzeugt: ß
3. Der Unicode (hexadezimal)   Eine Raute # plus ein x kennzeichnet ein Unicode-Zeichen im hexadezimalen System. Unser scharfes ß sieht dann so aus: ß

Alle drei Möglichkeiten sind seit HTML 4.0 legitim und können auch vermischt eingesetzt werden. Natürlich sind die HTML-Kennungen am leichtesten zu lernen. Die wichtigsten sollte man auch tatsächlich auswändig können, alles andere schlägt man bei SelfHTML nach!

Wer mit einem HTML-Editor arbeitet, der Sonderzeichen automatisch in Codes umwandelt, muss aber eigentlich nur die richtigen Tastenkombination wissen, die ich auch hier in den Tabellen für Windows und MacOS aufführe.

Umlaute und das scharfe ß

Zu den deutschen Umlauten erspare ich mir weitschweifende Erklärungen, besondere Satzregeln gibt es hier nicht.

Anders beim scharfen ß. Dies ist der einzige Buchstabe des deutschen Alphabets, der ausschließlich als Kleinbuchstabe existiert. Eine Versalienversion ist schon allein deswegen nicht sinnvoll, weil kein deutsches Wort mit ß beginnt. Wer jedoch mit dem Gedanken spielt, Überschriften oder kleinere Textmengen IN VERSALIEN ZU SETZEN, muss aufpassen: Hier wird das scharfe ß grundsätzlich durch ein Doppel-S ersetzt. JETZT WEISS ES DIE GANZE WELT. Ein ewiger Streitfall sind die Eigennamen: Darf Herr Weißmüller zu HERRN WEISSMÜLLER werden, nur weil der Typograf findet, dass Versalien funky aussehen?

Leider ist die CSS-Funktion text-transform: uppercase; noch nicht soweit. Auf den meisten Browsern wird das scharfe ß im Versalsatz nicht durch SS ersetzt. Das ist zwar schade, aber kann man solche typografischen Spitzfindigkeiten von den Browser-Entwicklern erwarten? Die Mozilla-Crew leistet hier jedoch einmal mehr Pionierarbeit.

Anführungen „ “

In deutschsprachigen Texten gibt es genau drei korrekte Arten, Anführungszeichen zu setzen, nicht mehr und nicht weniger.

Zunächst die klassische „deutsche“ Variante, immer erst unten, dann oben. Die Form der Zeichen lehnt sich an die Zahlen 99 und 66 an. Alles andere ist falsch. Auch das beliebte Zollzeichen, mit SHIFT 2 schnell erzeugt, darf für Anführungen nicht verwendet werden!

Leider sieht die korrekte Form der deutschen Anführungszeichen in einigen Schriften, darunter die hier verwendete Verdana, etwas kurios aus. Das liegt mutmaßlich an der mangelnden Sorgfalt von englischsprachigen Schriftgestaltern, die die deutsche Form der Anführungen keinem Ästhetik-Test zu unterziehen scheinen.

Ein Ausweg aus dem Dilemma ist die Verwendung der «französischen Guillemets». In deutschen Texten üblicher sind aber die »umgekehrten« Guillemets. Beide haben den Vorteil, dass sie sich harmonischer in den Zeilenverlauf einfügen; Sie sind daher oft die bessere Wahl.

Bitte niemals mischen! Innerhalb einer Publikation sollten einheitliche Anführungszeichen verwendet werden. Und falls man, z. B. innerhalb einer wörtlichen Rede, weitere Anführungen benötigt, so müssen diese in der ›abgespeckten‹ Form gesetzt werden:

»Ich glaube ihm nicht«, sagte Markus. »Dieser hinterhältige Lügner meinte doch glatt: ›Ich bin dein Freund!‹« Betroffen wandte er sich ab.

	Bezeichnung	HTML	Unicode	Win	Mac
„	Dt. Anführung	„	„	ALT 0132	ALT ^
“	Dt. Anführung (schließend)	“	“	ALT 0147	SHIFT ALT ^
‚	Dt. Anführung	‚	‚	ALT 0130	ALT s
‘	Dt. Anführung (schließend)	‘	‘	ALT 0145	ALT #
«	Guillemet links	«	«	ALT 0171	ALT q
»	Guillemet rechts	»	»	ALT 0187	SHIFT ALT q
‹	Guillemet links	‹	‹	ALT 0139	SHIFT ALT b
›	Guillemet rechts	›	›	ALT 0155	SHIFT ALT n

Anführungen (Ausblick)

Das W3C hat ein sehr elegantes und semantisches Verfahren für Anführungen in (X)HTML und CSS implementiert. Dabei werden alle Abschnitte im HTML-Markup mit dem <q>-Tag ausgezeichnet, die im Browser mit Anführungszeichen versehen werden sollen: Das q steht für quote. Die Zeichen einzeln zu setzen, ist dann nicht mehr nötig.

Im CSS kann man nun mit dem quote: -Selektor global bestimmen, wie die Anführungszeichen auszusehen haben, und zwar auch in die erste Verschachtelung hinein, wie im obigem Beispielsatz demonstriert. Wie genau das aussieht, kann man in der W3School erfahren.

Leider sind zurzeit nur Opera und Mozilla/Netscape in der Lage, dieses CSS2-Feature korrekt anzuzeigen; Safari/Konquerer und natürlich der Internet Explorer haben leider Probleme bzw. weigern sich komplett, überhaupt Anführungszeichen darzustellen. Das macht die Sache in der Praxis problematisch. Dennoch ist es eine Option für die Zukunft und ein weiterer Baustein für das semantische Web.

Horizontale Striche –

Es gibt – entgegen der landläufigen Meinung – nicht nur den simplen Trennstrich. Nein, er hat noch zwei große Brüder! Zum einen den Gedankenstrich, auch Halbgeviert-Strich oder sogar auch »bis-Strich« genannt. Im Englischen hat er sogar noch einen vierten Namen: n-Dash, weil er ungefähr die Breite eines kleinen n hat. Nur logisch, dass der längste der drei Brüder der m-Dash ist, oder auch Geviert-Strich.

Der kurze Trennstrich (Divis) -

• Bei Trennungen, die es in HTML bekanntlich nicht gibt. Gibt es doch! Siehe Sollbruchstelle!
• Um zusammengesetzte Wörter zu gliedern: Fußball-Weltmeisterschaft, Rheinland-Pfalz, Schröder-Köpf, Groß- und Kleinschreibung.
• Zum »Durchkoppeln« von Namen: Matthias-Grünewald-Gymnasium, Willy-Brandt-Haus

Die Sollbruchstelle (Nachtrag vom 20.2.2006)

Trennungen werden in HTML nicht fest in den Code geschrieben. Es werden sogenannte Sollbruchstellen kodiert, an denen ein Browser erkennt, wo er ein längeres Wort trennen darf. Die Trennung wird mit einem normalen Trennstrich angezeigt, taucht aber im Quelltext mit dem Zeichen ­ auf.

• Ein kleines Beispiel sei erlaubt: Donau­dampf­schiffahrts­gesellschafts­kapitäns­anwärter­ehefrau
• Donau­dampf­schiffahrts­gesellschafts­kapitäns­anwärter­ehefrau

Leider klappt dieses nicht in Firefox und Mozilla, aber wer weiß, ob sich das nicht in Zukunft ändert. Einen hervorragenden, vertiefenden Artikel speziell zu diesem Thema gibt es übrigens hier zu lesen.

Der Gedankenstrich (n-Dash) –

• verrichtet bei Einschüben und Satzpausen – wenn es genehm ist – seinen Dienst. Nicht vergessen, ein geschütztes Leerzeichen vor dem Strich zu setzen – sonst bricht dieser womöglich in die nächste Zeile um.
• Als »bis-Strich«: 7–8 Uhr abends, 2–3 Runden über den Sportplatz, Ludwig van Beethoven (1770–1827).
• Als Streckenstrich: Mainz–Hamburg, die Begegnung Leverkusen–Rostock.
• Als Auslassungsstrich: 299,– Euro.
• Als Minuszeichen: Kontostand von –2034,35 Euro
  Update:Dies ist nicht ganz korrekt: Minuszeichen und Gedankenstrich sind unterschiedliche Unicode-Zeichen, sehen aber in aller Regel identisch aus. Zur vereinfachten Eingabe ist es aber allgemein geduldet, sie identisch zu behandeln, auch wenn dies semantisch nicht ganz lupenrein ist.

Der Geviert-Strich (m-Dash) —

• wird in deutschsprachigen Texten eher selten verwendet. Er ist gleichbedeutend mit dem n-Dash und kann immer dann eingesetzt werden, wenn es schlichtweg besser aussieht. An sich ist er aber vor allem in englischen Texten anzutreffen, wo er häufig einen Einschub markiert—only without the spaces—und für deutsche Augen ungewohnt wirkt.

	Bezeichnung	HTML	Unicode	Win	Mac
-	Sollbruchstelle	­	­	ALT 0173
-	kurzer Trennstrich	-	-	-	-
–	Gedankenstrich	–	–	ALT 0150	ALT -
—	langer Gedankenstrich	—	—	ALT 0151	SHIFT ALT -

Weitere wichtige Sonderzeichen ’ × ...

Der Apostroph ’   Merket auf, hier ist Fehlerquelle Nr. 1. Es gibt definitiv nur eine einzige Möglichkeit, einen Apostroph korrekt zu setzen, egal in welcher Sprache. Der Apostroph hat die Form eines ganz normalen Kommas, befindet sich jedoch oben und nicht unten. Das war’s. So schwer? Ein Akzent-Zeichen, egal ob so ´ oder so ` hat damit nichts zu tun, genauso die einfachen schließende Anführungszeichen ‘ oder gar das Minutenzeichen ′.

Das Mal-Zeichen ×   Wer die Maße von etwas angibt, braucht das Mal-Zeichen: 34×23×8 cm. Auch wenn es in vielen Schriften zunächst so wirken mag: Das Malzeichen ist nicht identisch mit dem kleinen x. Letzteres besitzt nicht zwingend einen rechten Winkel und hat in den entsprechenden Schriften sogar Serifen, ganz im Gegensatz zum rein geometrisch geformten Mal-Zeichen.

Die Ellipse …   Bei drei Punkten kann man nichts falsch machen, richtig? Falsch! Drei Punkte sind eine Ellipse und sollten immer durch ein entsprechendes Sonderzeichen ausgetauscht werden. Bei diesem sind dann die Abstände zwischen den Punkten etwas größer, was die ganze Sache hübsch macht. Wenn die Ellipse nicht gerade ein Wort unterbricht (»Bitte, bitte nicht schieß…«), so muss außerdem ein geschütztes(!) Leerzeichen vor den Punkten gesetzt werden …

Das geschützte Leerzeichen    (engl: non-breaking space) ist nützlich, um unschöne Umbrüche zu vermeiden. Wer also sicher gehen will, dass bestimmte Wörter oder Zahlen nebeneinander stehen und nicht in die nächste Zeile abrutschen, setzt ein geschütztes Leerzeichen, z. B.: 17 Grad im Schatten, Prof. Dr. Klaus Brinkmann, Er bekam die Note 6, HTML 4.0.

Das schmale Leerzeichen   gibt es leider nicht in einer geschützten Version. Man kann es wunderbar in all jenen Situationen einsetzen, wo man sich nicht sicher ist, ob ein Leerzeichen angebracht ist oder nicht, z. B.: § 21, € 45,–, 128 kB/s, 38 cm. Offensichtlich gibt es unter Windows ein Darstellungsproblem mit den schmalen Leerzeichen, so dass diese mit Vorsicht zu genießen sind!

Alle Sonderzeichen

Es gibt noch hunderte weitere Sonderzeichen – darunter ¼ ‡ € ø ® © ™ usw. –, die aber nicht besonders erklärungsbedürftig sind. Sie können diese im SelfHTML nachsehen.

Vielen Dank

an den werten Leser, der sich die Mühe gemacht hat, meine drei Artikel zu »Typo im Web« durchzuarbeiten. Ich hoffe, dass Sie die Tipps, die ich Ihnen gegeben habe, an der einen oder anderen Stelle einsetzen, um das Web ein bisschen lesbarer zu gestalten.

Außerdem möchte ich Friedrich Forssmann und Ralf de Jong für ihr brillantes Nachschlagewerk Detailtypografie danken, welches mir eine unschätzbare Hilfe war.

Und natürlich den Machern von SelfHTML, die in den letzten Jahren Großartiges geleistet haben für die deutsche Webdesign-Kultur.