Quelltext der Seite Typografische Zeichen in XML und HTML

Dieser Artikel erläutert, wie [[Typografie|typografische]] Gepflogenheiten mittels [[Entität (Auszeichnungssprache)|Entität]]en in den [[Auszeichnungssprache]]n [[Hypertext Markup Language|HTML]] und [[Extensible Markup Language|XML]] umgesetzt werden können.

== Anführungszeichen ==

Üblicherweise werden [[Anführungszeichen]] in drei Fällen angewendet:

# zur Darstellung wörtlicher Rede
# zum Bezug auf das Wort statt die damit gemeinte Sache
# zur Hervorhebung von Ironie

Unüblich hingegen ist es, Betonungen oder Titel von Büchern, Liedern etc. durch Anführungszeichen darzustellen. Hierfür sollte eine betonte Darstellung verwendet werden (siehe unten).

Bei der Anwendung von Anführungszeichen werden häufig Fehler gemacht. Hier eine Auflistung der korrekten Verwendung verschiedener Anführungszeichen. Leerzeichen sind im Ergebnis der Übersicht halber mit „&#9251;“ hervorgehoben.
<!-- #9251: sind sie aber gar nicht, und ist auch nicht nötig; sieht doch auch so ganz gut aus. SHZ.de -->

{| class="wikitable" 
|-----
! Bezeichnung !! Beispiel !! Ergebnis
|-----
| Anführungszeichen (Deutschland, Österreich)
| <code>&amp;bdquo;Beispiel&amp;ldquo;</code>
| „Beispiel“
|-----
| Anführungszeichen (englisch)
| <code>&amp;lsquo;example&amp;rsquo;</code>
| ‘example’
|-----
| Einfache Anführungszeichen (Deutschland, Österreich)
| <code>&amp;sbquo;Beispiel&amp;lsquo;</code>
| ‚Beispiel‘
|-----
| Doppelte Anführungszeichen (englisch, im Amerikanischen Standard)
| <code>&amp;ldquo;example&amp;rdquo;</code>
| “example”
|-----
| [[Guillemets]] (deutsch)
| <code>&amp;raquo;Beispiel&amp;laquo;</code>
| »Beispiel«
|-----
| Guillemets (französisch)
| <code>&amp;laquo;&amp;nbsp;exemple&amp;nbsp;&amp;raquo;</code>
| «␣exemple␣»
|-----
| Guillemets (schweizerisch)
| <code>&amp;laquo;Beispiel&amp;raquo;</code>
| «Beispiel»
|-----
| Einfache Guillemets (deutsch)
| <code>&amp;rsaquo;Beispiel&amp;lsaquo;</code>
| ›Beispiel‹
|-----
| Einfache Guillemets (französisch)
| <code>&amp;lsaquo;&amp;nbsp;exemple&amp;nbsp;&amp;rsaquo;</code>
| ‹␣exemple␣›
|-----
| Einfache Guillemets (schweizerisch)
| <code>&amp;lsaquo;Beispiel&amp;rsaquo;</code>
| ‹Beispiel›
|}
Einfache Anführungszeichen werden normalerweise nur innerhalb bereits in Anführungszeichen stehender Bereiche verwendet.

Anführungszeichen werden für Zitate verwendet oder um einzelne Wörter als ironisch zu markieren. Sie werden jedoch ''nicht'' zur Betonung verwendet. Auch dies wird oft falsch gemacht. Zur Betonung eignen sich stattdessen die Elemente <code>em</code> und <code>strong</code>.

Die korrekte Verwendung von Anführungszeichen wird von [[Cascading Style Sheets|CSS]]2 durch die ''quotes''-Eigenschaft unterstützt, welche aber nur von aktuellen Browsern ausgewertet wird.<ref>{{Internetquelle |url=https://www.w3.org/TR/CSS2/generate.html |titel=Generated content, automatic numbering, and lists |abruf=2019-09-09}}</ref>

== Striche ==

Auch Striche werden oft verwechselt. Insbesondere wird der [[Bindestrich]], der sich auf der deutschen Tastatur links neben der rechten Umschalttaste befindet, für alle möglichen Striche missbraucht.
{| class="wikitable" 
|-
! Bezeichnung
! Beispiel
! Ergebnis
|-
| [[Bindestrich]], [[Trennstrich]] (deutsch)
| <code>H'''-'''Milch</code>
| H-Milch
|-
| [[Gedankenstrich]] (deutsch)
| <code>Wort1'''&amp;nbsp;&amp;ndash; '''Wort2</code>
| Wort1&nbsp;– Wort2
|-
| [[Gedankenstrich]] (US englisch)
| <code>word1'''&amp;mdash;'''word2</code>
| word1—word2
|-
| [[Gedankenstrich]] (russisch)
| <code>Слово1'''&amp;nbsp;&amp;mdash; '''Слово2</code>
| Слово1&nbsp;— Слово2
|-
| [[Streckenstrich]] (deutsch)
| <code>Kiel'''&amp;ndash;'''Berlin</code>
| Kiel–Berlin
|-
| [[Gegen-Strich]] (deutsch)
| <code>Schalke'''&amp;nbsp;&amp;ndash;&amp;nbsp;'''HSV</code>
| Schalke&nbsp;–&nbsp;HSV
|-
| [[Bis-Strich]] (deutsch und englisch)
| <code>1979'''&amp;ndash;'''2010</code>
| 1979–2010
|-
| Strich bei Währungsangaben
| <code>42,'''&amp;ndash;&amp;nbsp;'''EUR</code>
| 42,–&nbsp;EUR
|}

Der deutsche Gedankenstrich ([[Halbgeviertstrich]]) lässt sich – bei Verwendung der richtigen Kodierung – unter Windows auch durch Eingabe von 0150 auf dem [[Ziffernblock]] bei gedrückter [[Alt-Taste]] erzeugen, unter [[macOS]] durch gleichzeitiges Drücken der [[Wahltaste]] und der Bindestrich-Taste. Bei vielen MS-Windows-Programmen funktioniert auch die Kombination [[Strg-Taste]] und „–“ vom Ziffernblock.

Bei [[Nicht-proportionale Schriftart|nicht-proportionalen Schriftarten]], zum Beispiel [[Courier (Schriftart)|Courier]] oder bei alten Schreibmaschinen, empfehlen Typografen, Leerzeichen um den Bis-Strich zu setzen.

== Leerzeichen ==

Häufig will man einen Umbruch durch ein [[Leerzeichen]] vermeiden. So sieht es meist nicht gut aus, wenn in mehrteiligen Abkürzungen ein Zeilenumbruch erfolgt. Daher verwendet man hier das [[geschütztes Leerzeichen|geschützte Leerzeichen]].

Statt des normalen geschützten Leerzeichens (<code>&amp;nbsp;</code>) wäre in den folgenden Beispielen teilweise ein ''schmales'' geschütztes Leerzeichen (<code>&amp;#x202F;</code>) treffender, wird aber von vielen Browsern noch nicht unterstützt. Auch mit dem <code>&amp;minus;</code> (<code>&amp;#8722;</code>) haben manche Browser Probleme, sodass dafür fast immer der Bindestrich verwendet wird.

{| class="wikitable"
|-----
! Bezeichnung !! Beispiel !! Ergebnis
|-----
| Abkürzungen || <syntaxhighlight lang="html" inline>z.&nbsp;B.</syntaxhighlight>
| z.&nbsp;B.
|-----
| Maßangaben
| <syntaxhighlight lang="html" inline>100&nbsp;km, 98 %</syntaxhighlight>
| 100&nbsp;km, 98 %
|-----
| Rechenzeichen
| <syntaxhighlight lang="html" inline>&minus;2&nbsp;+&nbsp;5&nbsp;&middot;&nbsp;1&nbsp;=&nbsp;6&nbsp;:&nbsp;2</syntaxhighlight><br/><syntaxhighlight lang="html" inline>&minus;2&nbsp;+&nbsp;5&nbsp;&times;&nbsp;1&nbsp;=&nbsp;6&nbsp;&divide;&nbsp;2</syntaxhighlight>
| −<!-- &minus; -->2&nbsp;+&nbsp;5&nbsp;·&nbsp;1&nbsp;=&nbsp;6&nbsp;:&nbsp;2<br />−<!-- &minus; -->2&nbsp;+&nbsp;5&nbsp;×&nbsp;1&nbsp;=&nbsp;6&nbsp;÷&nbsp;2
|-----
| Zahlen
| <syntaxhighlight lang="html" inline>1&nbsp;234,567&nbsp;89</syntaxhighlight>
| 1&nbsp;234,567&nbsp;89
|-----
| Versionsnummern<BR>Abkürzungen, Paragraphen <!-- für Hypertypographierte ... SHZ.de -->
| <syntaxhighlight lang="html" inline>CSS&nbsp;2, XHTML&nbsp;2.0</syntaxhighlight><br><syntaxhighlight lang="html" inline>S.&nbsp;48: §&nbsp;11 Abs.&nbsp;9</syntaxhighlight>
| CSS&nbsp;2, XHTML&nbsp;2.0<BR>S.&nbsp;48: §&nbsp;11 Abs.&nbsp;9
|}

Für mehrteilige Abkürzungen eignen sich jedoch auch Formatierungen mit [[Cascading Style Sheets|CSS]], die einen direkten Einfluss auf den Zeilenumbruch von Abkürzungen und die Breite des Leerzeichens haben. Beispielsweise lässt sich das <code>abbr</code>-Element global formatieren. Im aktuellen Internet Explorer funktioniert dies zwar nicht, wird dort jedoch anders als die Verwendung von <code>&amp;thinsp;</code> nicht als störend empfunden. Zudem lässt sich so die Bedeutung einer Abkürzung über das <code>title</code>-Attribut hinterlegen und ggf. formatieren.

Beispiel: <syntaxhighlight lang="html" inline><abbr title="zum Beispiel" style="white-space:nowrap; word-spacing:-0.1em;">z. B.</abbr></syntaxhighlight> ergibt <abbr title="zum Beispiel" style="white-space:nowrap; word-spacing:-0.1em;">z. B.</abbr>

Einen vergleichbaren Effekt kann man auch für Maßangaben in Verbindung mit <code>span</code> erzielen.

== Auslassungspunkte ==

[[Auslassungspunkte]] (…) werden mit der Entitätenreferenz <code>&amp;hellip;</code> (<code>&amp;#8230;</code>) dargestellt. Vor ihr steht ein Leerzeichen, wenn das vorhergehende Wort beendet wurde. Wird nur ein Teilwort (z.&nbsp;B. „Teilw…“) abgetrennt, so steht davor hingegen kein Leerzeichen.

Die Auslassungspunkte lassen sich unter Windows durch Eingabe von „0&nbsp;1&nbsp;3&nbsp;3“ auf dem Ziffernblock bei gedrückter Alt-Taste und unter macOS durch die Tastenkombination <code>Alt-Taste + .</code> erzeugen.

== Siehe auch ==
* [[Webtypografie]]

== Weblinks ==

<!-- * [http://www.typemotion.de/_typographie/typobasics_1.php typemotion: Typo-Basics], diverse PDF-Anleitungen zum Thema -->
* [https://www.typolexikon.de/ Typolexikon.de]
* [https://www.w3.org/TR/CSS2/ W3C Recommendation CSS2] (englisch)

== Einzelnachweise ==
<references />

[[Kategorie:Typografie|Zeichen in XML und HTML]]