Zei­chen­set­zung

Unter Inter­punk­tion (oder Zei­chen­set­zung) ver­steht man das Set­zen von Satz­zei­chen oder Wort­zei­chen. In die­sem Arti­kel soll erläu­tert wer­den, wel­che typo­gra­fi­schen Mög­lich­kei­ten hierzu auf Web­sei­ten exis­tie­ren und wie die kor­rek­ten Zei­chen gesetzt werden.

Son­der­zei­chen las­sen sich auf vier ver­schie­dene Arten im Quell­text definieren:

1. Ist die Web­seite UTF‑8 codiert, las­sen sich die Son­der­zei­chen direkt ein­ge­ben. Jedoch tau­chen hier gele­gent­lich Pro­bleme bei bestimm­ten Brow­sern oder Ser­vern auf, so das die Son­der­zei­chen nicht kor­rekt ange­zeigt wer­den. Es ist also rat­sam auf eine der drei ande­ren Metho­den zurück zu greifen.
2. für mache Son­der­zei­chen liegt eine HTML-Kennung vor. So wird das scharfe »ß« als ß defi­niert. Die HTML-Kennung ist eine Abkür­zung des typo­gra­fi­schen Fach­aus­dru­ckes für das ent­spre­chende Zei­chen. Nicht alle Son­der­zei­chen las­sen sich über diese Ken­nung einfügen.
3. Son­der­zei­chen kön­nen auch per Uni­code defi­niert wer­den. Dabei han­delt es sich um einen Zah­len­code, dem immer »&#« vor­an­ge­stellt ist. Das scharfe »ß« wird hier als ß definiert.
4. Eine wei­tere Vari­ante ist die hexa­de­zi­male Schreib­weise des Uni­codes. Das Prä­fix lau­tet hier »&#x« gefolgt von der hexa­de­zi­ma­len Schreib­weise des Codes. Beim schar­fen »ß« würde diese Schreib­weise ß lauten.

Alle Schreib­wei­sen las­sen sich inner­halb eines Doku­men­tes belie­big kombinieren.

Anfüh­rungs­zei­chen

Die Anfüh­rungs­zei­chen wur­den ursprüng­lich dazu genutzt, Text­pas­sa­gen aus ande­ren euro­päi­schen Spra­chen zu kenn­zeich­nen. Heute benut­zen wir sie zur Aus­zeich­nung von Zita­ten, wört­li­che Rede und zur Her­vor­he­bung von bestimm­ten Wörtern.

Kei­nes der auf der Tas­ta­tur ver­füg­ba­ren Zei­chen wie das gemeine Anfüh­rungs­zei­chen ("), Apo­stroph ('), Akut (´), Gra­vis (`) oder das Komma ist ein typo­gra­fisch kor­rek­tes Anfüh­rungs­zei­chen. Diese Zei­chen wer­den darum als „fal­sche Freunde“ bezeich­net. Auch die spit­zen Klam­mern auf der Tas­ta­tur sind keine Anfüh­rungs­zei­chen, Kon­strukte wie >>Zitat<< sind nicht erlaubt und schlicht­weg falsch.

„ “ ‚ ‘ » « › ‹

Im Deut­schen gibt es ver­schie­dene For­men von Anfüh­rungs­zei­chen. Die gebräuch­lichs­ten sind die dop­pel­ten nor­ma­len Anfüh­rungs­zei­chen („…“). Sie wer­den auch Gän­se­füß­chen oder Hase­nöhr­chen genannt. Das ein­lei­tende Anfüh­rungs­zei­chen steht dabei immer unten und das abschlie­ßende oben. Als Merk­hilfe für die Form im Deut­schen eig­net sich 99–66–Regel. Das ein­lei­tende Anfüh­rungs­zei­chen sieht aus wie die Zahl 99, das abschlie­ßende wie die Zahl 66. Ebenso kön­nen dop­pelte spitze Anfüh­rungs­zei­chen, so genannte ›Guil­le­mets‹ ein­ge­setzt wer­den (»…«). Sie zei­gen immer nach innen zum Text­ab­schnitt. Zusätz­lich gibt es noch jeweils die hal­ben Aus­füh­run­gen (‚…‘ und ›…‹). Sie wer­den ver­wen­det bei ver­schach­tel­ten Zita­ten, sowie bei Eigen­na­men und Begriffsdefinitionen.

Anfüh­rungs­zei­chen ste­hen immer ohne Leer­raum zwi­schen ihnen und der aus­zu­zeich­nen­den Textpassage.

Im HTML-Quelltext wer­den sie fol­gen­der­ma­ßen deklariert:

„ — dop­pel­tes lin­kes Anführungszeichen unten

“ — dop­pel­tes lin­kes Anführungszeichen oben

‚ — ein­fa­ches lin­kes Anführungszeichen unten

‘ — ein­fa­ches rech­tes Anführungszeichen oben

» — dop­pel­tes lin­kes spit­zes Anführungszeichen

« — dop­pel­tes lin­kes spit­zes Anführungszeichen

› — ein­fa­ches lin­kes spit­zes Anführungszeichen

‹ — ein­fa­ches rech­tes spit­zes Anführungszeichen

In man­chen Schrif­ten sehen die deut­schen Anfüh­rungs­zei­chen eigen­ar­tig aus, da die eng­li­schen Schrift­ge­stal­ter keine Rück­sicht auf die deut­schen Eigen­ar­ten genom­men haben. Stö­ren diese Anfüh­rungs­zei­chen den Text­fluss, sollte man auf die spit­zen Anfüh­rungs­zei­chen zurück greifen.

“ ” ‘ ’

Im eng­lisch­spra­chi­gen Raum wer­den andere Anfüh­rungs­zei­chen genutzt. Das ein­lei­tende Anfüh­rungs­zei­chen steht hier immer oben. Ansons­ten sind sie gegen­über den deut­schen Anfüh­rungs­zei­chen genau umge­dreht, so das hier die 66–99–Regel gilt (“…”). Sel­bi­ges trifft auf die ein­fa­chen Anführungszeichen zu (‘…’).

“ — dop­pel­tes lin­kes Anführungszeichen oben

” — dop­pel­tes rech­tes Anführungszeichen oben

‘ — ein­fa­ches lin­kes Anführungszeichen oben

’ — ein­fa­ches rech­tes Anführungszeichen oben

« » ‹ ›

In Spa­nien, Frank­reich, Ita­lien und der Schweiz wer­den die spit­zen Anfüh­rungs­zei­chen ver­wen­det. Doch Ach­tung: Die Spitze ragt hier nach außen, so dass die Anfüh­rungs­zei­chen den Text ein­klam­mern. Sie sind also genau umge­kehrt zu denen, die im Deut­schen ver­wen­det werden («…»).

Bei kur­zen fremd­spra­chi­gen Zita­ten wer­den die deut­schen Anfüh­rungs­zei­chen genutzt. Bei län­ge­ren Pas­sa­gen nutzt man die jeweils gül­ti­gen Anführungszeichen.

Auf das auto­ma­ti­sche Set­zen von Anfüh­rungs­zei­chen in HTMl gehe ich im CSS-Grundlagenartikel weiter ein.

Waa­ge­rechte Striche

In der Typo­gra­fie wer­den für Bin­de­stri­che, Bis-Striche, Stre­cken­strich und Minus­zei­chen unter­schied­li­che Zei­chen ver­wen­det. Die Ver­wen­dung die­ser Zei­chen ist auch in HTML mög­lich und sollte berück­sich­tigt werden.

Diese Stri­che ori­en­tie­ren sich jeweils am Geviert einer Schrift. Dabei han­delt es sich um eine typo­gra­phi­sche Maß­ein­heit, die noch aus dem Blei­satz stammt. Das Geviert bezeich­net im Blei­satz eine qua­dra­ti­sche Flä­che, deren Kan­ten­länge der Kegel­höhe eines Blei­let­ter ent­spricht. Also defi­niert das Geviert den Min­dest­zei­len­ab­stand im Blei­satz. Zwei neben ein­an­der ste­hende Nul­len ent­spre­chen meis­tens einem Geviert.

In der Abbil­dung links sind die Strich­län­gen von Vier­tel­ge­vierts­trich, Bindestrich-Minus, Gevierts­trich und Halb­ge­vierts­trich (von oben nach unten) in der Schrift­art Adobe Gara­mond Pro gegen­über gestellt (die ver­ti­kale Posi­tion der Zei­chen ist hier verschoben).

Der leicht gekippte Vier­tel­ge­vierts­trich ist his­to­risch bedingt. Im Mit­tel­al­ter wurde ein Schräg­strich für ein Komma geschrie­ben, ein Dop­pel­schräg­strich reprä­sen­tierte den Bin­de­strich (ähnlich einem leicht gekipp­ten Gleich­heits­zei­chen). Mit der Zeit ent­wi­ckel­ten sich aus die­sen Zei­chen das Komma und der Bindestich.

Bin­de­strich / Viertelgeviertstrich (-)

Der nor­male auf der Tas­ta­tur vor­han­dene Bin­de­strich wird zur Glie­de­rung von zusam­men­ge­setz­ten Wör­tern oder für Wort­ver­bin­dun­gen und –tren­nun­gen ver­wen­det. So z.B. bei H-Milch, S-Bahn-Wagen, Rheinland-Pfalz oder Kaffee-Ersatz. Er wird auch zur stan­dar­di­sier­ten Schreib­weise des Datums ver­wen­det (2010–07–28).

Er steht nie zwi­schen zwei Leerzeichen.

Bindestrich-Minus (−)

Inner­halb von mathe­ma­ti­schen Glei­chun­gen kommt nicht der nor­male Bin­de­strich als Minus­zei­chen zum Ein­satz, son­dern der Bindestrich-Minus. Er liegt etwas höher als der nor­male Strich und passt somit zum Plus‑Zeichen.

Im HTML-Quelltext wird er mit − deklariert.

Gedan­ken­strich / Halbgeviertstrich (–)

Er wird als Gedan­ken­strich, Bis-Strich und Stre­cken­strich ein­ge­setzt. Der Halb­ge­vierts­trich kann zusätz­lich auch bei Gegen­über­stel­lun­gen als Gegen­strich (Wer­den Bre­men – Bay­ern Mün­chen) ein­ge­setzt wer­den. Bei Geld­be­trä­gen (10,–) wird er als Aus­las­sungs­zei­chen eingesetzt.

Im HTML-Quelltext wird er als – deklariert.

Spie­gel­strich / Geviertstrich (—)

Er kann als Spie­gel­strich vor ein­zel­nen Ele­men­ten von Auf­zäh­lun­gen ver­wen­det wer­den, ist aber häu­fig zu lang und wird durch den Halb­ge­vierts­trich ersetzt. Inner­halb von Tabel­len kann er bei Wäh­rungs­be­trä­gen als Erset­zungs­zei­chen für 00 ver­wen­det wer­den (10,— €). Im Eng­li­schen wird er als Gedan­ken­strich genutzt, aller­dings ohne Leer­raum zu den angren­zen­den Wörtern.

Im HTML-Quelltext wird er als — deklariert.

Leer­zei­chen und Zwischenräume

Leer­zei­chen ist nicht gleich Leer­zei­chen. Neben dem nor­ma­len Leer­zei­chen, das direkt über die Tas­ta­tur ein­ge­ge­ben wird, gibt es wei­tere mög­li­che Leer­zei­chen die unter­schied­li­che Brei­ten haben oder über wei­tere Eigen­schaf­ten verfügen.

Nicht alle Leer­zei­chen sind in jeder Schrift­fa­mi­lie ver­füg­bar. Es muss daher vor dem Ein­satz getes­tet wer­den, wel­che Mög­lich­kei­ten beste­hen. In den meis­ten Fäl­len wird im Falle der Nicht­ver­füg­bar­keit auf das nor­male Leer­zei­chen zurückgegriffen.

Sind die Leer­räume in der ver­wen­de­ten Schrift­fa­mi­lie nicht ver­füg­bar, obwohl sie gebraucht wer­den, kann man per CSS trick­sen. Dazu defi­niert man eine Klasse für diese Zei­chen und umschließt sie im Quell­text mit einem ent­spre­chen­den span-Tag:

span.leerraum {
   font-family: Verdana, Arial, sans-serif;
   font-weight:	normal;
   font-size: 14px;
   letter-spacing: 0;
}

€ 10,–

Wer­den im Quell­text meh­rere fle­xi­ble Leer­zei­chen nach­ein­an­der ein­ge­ge­ben, fasst der Brow­ser diese bei der Dar­stel­lung zu einem Leer­zei­chen zusam­men. Die­ses Ver­hal­ten tritt aller­dings nur beim nor­ma­lem Leer­zei­chen auf. Die ande­ren Leer­zei­chen wer­den nicht zusammengefasst.

▕ ▏	Geviert
▕ ▏	Halbgeviert
▕ ▏	Flexibles Leerzeichen
▕ ▏		Geschütztes Leerzeichen
▕ ▏		Dünnraum
▕​▏		Haarraum
▕​​▏		Kein Leerraum

Fle­xi­bles Leer­zei­chen ▕ ▏

Das nor­male über die Tas­ta­tur ein­ge­ge­bene Leer­zei­chen vari­iert in der Breite abhän­gig von der gewähl­ten Schriftgröße.

Geschütz­tes Leer­zei­chen ▕ ▏

Besitzt die selbe Breite wie das nor­male Leer­zei­chen. Aller­dings tren­nen Brow­ser bei die­sem Leer­zei­chen nicht falls ein auto­ma­ti­scher Zei­len­um­bruch erfolgt. Kann genutzt wer­den um unschöne Tren­nun­gen z.B. zwi­schen 10 und Euro zu verhindern.

Wird im HTML-Quelltext als   deklariert;

Geviert ▕ ▏

Leer­zei­chen mit der Breite von einem Geviert.

Wird im HTML-Quelltext als   deklariert;

Halb­ge­viert ▕ ▏

Leer­zei­chen mit der Breite von einem Halb­ge­viert. Wird z. B. beim Gedan­ken­strich genutzt. auch Tabel­lenzif­fern ste­hen auf Halb­ge­viert. Der Platz, den jede Zif­fer ein­nimmt, ist also immer gleich. Dadurch ste­hen sie in einer Tabelle unter­ein­an­der. Somit kann das Halb­ge­viert genutzt wer­den, um Zif­fern einzurücken.

Wird im HTML-Quelltext als   deklariert;

Dünn­raum ▕ ▏

Leer­zei­chen mit der 3/18 Breite eines Gevierts. Wird zum Bei­spiel zwi­schen Zah­len und Maß­ein­hei­ten genutzt (256 kB/s oder € 45,—). Gibt es lei­der nicht in einer geschütz­ten Variante.

Wird im HTML-Quelltext als   deklariert;

Haar­raum ▕​▏

Sehr dün­ner Leer­raum, der even­tu­ell zwi­schen Zah­len wie 1​000​000 oder zum Ein­rü­cken genutzt werden kann.

Wird im HTML-Quelltext als ​ deklariert;

Kein Leer­raum ▕​▏

Leer­zei­chen ohne Breite. Kann in HTML ein­ge­setzt wer­den, um lange Wör­ter für Zei­len­um­brü­che zu tren­nen, ohne das dies im Text sicht­bar ist. Dies führt aber bei Block­satz zu fal­schen Zwi­schen­räu­men in Wörtern.

Kann auch ein­ge­setzt wer­den um z.B. Enti­ties im Text auf­zu­neh­men ohne das dies inter­pre­tiert wer­den. Auf die­sen Sei­ten sind die aus­ge­schrie­be­nen Enti­ties teil­weise mit zero width spaces versehen.

Wird im HTML-Quelltext als ​ deklariert;

Offene Schach­tel ␣

Kein Leer­zei­chen im eigent­li­chem Sinne. Wird aber in Doku­men­ta­tio­nen oder Bedie­nungs­an­lei­tun­gen als Platz­hal­ter für das nor­male Leer­zei­chen verwendet.

Wird im HTML-Quelltext als ␣ deklariert;

Zei­len­um­brü­che

Gele­gent­lich kann es vor­kom­men das der Brow­ser Text an Stel­len umbricht, an denen dies nicht gewünscht ist – oder aber nicht umbricht, obwohl es nötig wäre. Dies kann z.B. bei Prei­sen am Ende einer Zeile der Fall sein. Der Brow­ser würde in die­sem Fall „100 €“ so umbre­chen, dass die „100“ am Ende der Zeile ste­hen bleibt und das Euro-Zeichen in die nächste Zeile wan­dert. Das liegt daran, das der HTML-Standard vor­sieht, das Fließ­text bei Leer­zei­chen auto­ma­tisch umgebrochen wird.

Ein ande­res Pro­blem, beson­ders in der deut­schen Spra­che, sind sehr lange Wör­ter. Hier bricht der Brow­ser das Wort nicht auto­ma­tisch um, son­dern ver­schiebt es in die nächste Zeile, wodurch sehr große Lücken ent­ste­hen können.

Erwünschte Zei­len­um­brü­che erzwingen

An dieser Stelle
soll umgebrochen werden.

Möchte man einen Zei­len­um­bruch erzwin­gen, obwohl der Brow­ser an die­ser Stelle noch nicht auto­ma­tisch umbre­chen würde, gibt es dafür das ‹br /›-Tag.

<​p>
   An dieser Stelle
   <​br />
   soll umgebrochen werden.
<​/p>

Sil­ben­tren­nung auf Web­sei­ten ist nicht ganz un­pro­ble­ma­tisch.

Bei lan­gen Wör­tern gibt es die Mög­lich­keit, diese mit unsicht­ba­ren Soll­bruch­stel­len zu ver­se­hen. Diese wer­den im HTML-Quelltext als ­ ange­ge­ben. Inzwi­schen funk­tio­niert dies auch bei allen Brow­sern. Wird an einer sol­che Stelle umge­bro­chen, zeigt der Brow­ser ­ als Bin­de­strich an.

   Sil­ben­tren­nung
   auf Web­sei­ten ist nicht ganz
   un­pro­ble­ma­tisch.

Silbentrennung auf Webseiten ist nicht ganz unproblematisch.

Eine wei­tere Mög­lich­keit ist es, einen Umbruch bei lan­gen Wör­tern per CSS zu erzwin­gen. Dabei wer­den aber keine Bin­de­stri­che angezeigt.

p {
   word-wrap: break-word;
}

Uner­wünschte Zei­len­um­brü­che verhindern

Zu einem Preis von 100 €.

Zu die­sem Zweck gibt es ein geschütz­tes Leer­zei­chen, bei dem Text nicht umbricht. Im HTML-Quelltext wird es mit   angegeben.

   Zu einem Preis von 100 €.

Zu einem Preis von 100 €.

Zusätz­lich lässt sich das Umbre­chen von gan­zen Zei­len per CSS mit der Eigen­schaft white-space ver­hin­dern. Dies wirkt sich aber immer auf die ganze Zeile aus.

.nowrap {
   white-space: nowrap;
   word-spacing: -0.2em;
}

   Zu einem Preis von 100 €.

Die Angabe von word-spacing führt in die­sem Fall zusätz­lich dazu, dass sich der Abstand zwi­schen Zahl und Maß­ein­heit ver­rin­gert. Das halb­breite geschützte Leer­zei­chen   wird lei­der nicht in allen Brow­sern unterstützt.

Möchte man die Tren­nung von zusam­men­ge­setz­ten Wör­tern wie H-Milch ver­hin­dern, lässt sich dafür ein geschütz­ter Bin­de­strich ein­set­zen. Der geschützte Bin­de­strich wird im HTML-Quelltext als ‑ definiert.

Alter­na­tiv könnte man hier auch eine ent­spre­chende Klasse per CSS definieren.

.komposita {
   white-space: nowrap;
}

   Wir müssen noch
   H-Milch kaufen.

Hän­gende Interpunktion

Unter hän­gen­der Inter­punk­tion ver­steht man das Bestre­ben, eine gleich­mä­ßi­gere Text­kante zu errei­chen. Dazu wer­den Inter­punk­ti­ons­zei­chen am Zei­len­an­fang oder Zei­len­ende über den Spal­ten­rand gescho­ben. Dadurch schlie­ßen Buch­sta­ben vor oder hin­ter dem Inter­punk­ti­ons­zei­chen wie­der mit dem Spaltenrand ab.

Ein vol­ler opti­scher Rand­aus­gleich ist per CSS nicht mög­lich. Dazu müss­ten unter ande­rem auch die Kan­ten man­cher Buch­sta­ben (z. B. W und A) über den Spal­ten­rand hin­aus ragen. Die hän­gende Inter­punk­tion kann aber z. B. bei Zita­ten und Auf­zäh­lun­gen auf Web­sei­ten sinnvoll sein.

Zitate

Kor­rekt hän­gende Anfüh­rungs­stri­che sind per CSS der­zeit lei­der nicht mög­lich. Es fehlt die Mög­lich­keit, den schlie­ßen­den Anfüh­rungs­strich zu hän­gen. Bei links­bün­di­gen Tex­ten erreicht man aber schon ein erheb­lich ruhi­ge­res Schrift­bild, wenn zumin­dest das öffnende Anfüh­rungs­zei­chen gehängt wird.

Um die­sen Effekt zu errei­chen, defi­niert man eine ent­spre­chende Klasse per CSS und ver­schiebt den Text mit der Eigen­schaft text-indent nach links aus dem Con­tai­ner. Der Wert unter­schei­det sich dabei bei unter­schied­li­chen Schrift­fa­mi­lien und muss ent­spre­chend jus­tiert werden.

.hanging {
   text-indent: -0.5em;
}

Alter­na­tiv kann der erste Buch­stabe eines Absat­zes per CSS über einen pseudo-Selector ange­spro­chen wer­den. Dies funk­tio­niert aber nur auf neue­ren Browsern:

.zitat:first-letter {
   text-indent: -0.5em;
}

Auf­zäh­lun­gen

Lis­ten­punkte las­sen sich in aktu­el­len Brow­sern genauso ein­fach mit hän­gen­der Inter­punk­tion versehen:

ul.hanging {
   list-style-position: outside;
}

Will man die­sen Effekt manu­ell errei­chen, wird es ein wenig kom­pli­zier­ter. Dafür set­zen wir den lin­ken Rah­men auf 0 und den lin­ken Text­ab­stand zum Rah­men auf 1.5em. Das ganze Ele­ment ver­schie­ben wir nun um den Text­ab­stand nach links:

ul.hanging {
   position: relative;
   margin-left: 0;
   padding-left: 1.5em;
   left: -1.5em;
}

Zukünf­tig kommt mit CSS3 noch eine wei­tere Mög­lich­keit hinzu:

/* values: start, end, end-edge */
p {
   hanging-punctuation: start;
}

Diese Eigen­schaft wird bis­her von kei­nem Brow­ser unterstützt.

Apo­stroph

„Heute ist ’s kalt.“

Da auf der Tas­ta­tur vor­kom­mende Apo­stroph ist typo­gra­phisch kei­nes. Auch die Zei­chen ´ (Akut) und ‚ (Gra­vis) sind falsch. Stattdessen sollte das Zei­chen ’ (’) ein­ge­setzt werden.

Aus­las­sungs­punkte

F… dich selber, du …! Sonst…

Aus­las­sun­gen wer­den mit drei auf­ein­an­der fol­gen­den Punkte ange­zeigt. Diese wer­den jedoch nicht mit drei ein­zel­nen Punk­ten ein­ge­ge­ben, son­dern erhal­ten ein eige­nes Zei­chen, wel­ches in HTML mit … dekla­riert wird. Bei der Ver­wen­dung des Aus­las­sungs­zei­chens ist zu beach­ten dass Leer­zei­chen und Satz­zei­chen immer mit ange­ge­ben wer­den. Ein­zig der Punkt fällt weg. Bei Aus­las­sun­gen inner­halb von Wör­tern wer­den keine Leer­zei­chen gesetzt.

Das Mal-Zeichen ×

5 × 10 = 50

Bei der Angabe von Maßen oder in Rech­nun­gen wird das Mal-Zeichen benö­tigt. Häu­fig wird hierzu das kleine »x« ein­ge­setzt. Dies ist typo­gra­fisch falsch. für das Mal-Zeichen exis­tiert ein eige­nes Zei­chen, dies hat z. B. in Serifen-Schriften keine Serifen.

Im Quell­text wird das Mal-Zeichen als × deklariert.