CSS/Tutorials/Hängende Interpunktion

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter hängender Interpunktion oder Zeichensetzung versteht man in der Typografie eine Technik, die zu ruhigeren Kanten führen soll. Dabei werden Interpunktionszeichen, meist Anführungszeichen, die am Zeilenanfang oder -ende gesetzt werden müssen, außerhalb des Spaltenrands geschoben, sodass die Buchstaben, die vor oder nach den Interpunktionszeichen stehen, wieder am Spaltenrand abschließen. Dadurch stören diese Zeichen nicht den Fluss des im Blocksatz formatierten Textes. Dieser Stil wurde schon in der Gutenberg-Bibel, dem ersten gedruckten Buch verwendet.

Obwohl es eine CSS-Eigenschaft hanging-punctuation in der Spezifikation gibt[1], wird diese bislang nur (teilweise) von Safari unterstützt[2]. In diesem Tutorial lernen Sie, wie sie Zitate ansprechend formatieren, sodass die Anführungszeichen außerhalb des Blocksatzes erscheinen.

Vorüberlegungen[Bearbeiten]

Typographische Grundlagen[Bearbeiten]

Praktisch alle modernen Textverarbeitungsprogramme haben eine Funktion, die automatisch das doppelte Hochkomma ("…") durch die typografisch korrekten Anführungszeichen (z.B. “…” oder „…“) ersetzt. In Browsern ist etwas derartiges aus verschiedenen Gründen nicht eingebaut, deshalb liegt es an den Webautoren, die richtigen Zeichen zu verwenden.

Sprache Doppelte Anführungszeichen Einfache Anführungszeichen
Deutsch „…” ‚…’
Deutsch (alternativ; in der Schweiz zeigen die Spitzen nach außen) »…« ›…‹
Englisch “…” ‘…’
Französisch (mit geschützten Leerzeichen) « … » ‹ … ›

Im Deutschen verwendet man zu Beginn der wörtlichen Rede das Anführungszeichen unten (, „). Das Ende wird durch Anführungszeichen oben (, ”) gekennzeichnet. Um das Ganze unübersichtlich zu machen, wird z.B. in englischsprachigen Texten das Anführungszeichen oben zum Anfang der Rede und ein gespiegeltes Anführungszeichen oben als Endmarke verwendet. Daneben gibt es noch die spitzen Klammern, »Guillemets« genannt, die bevorzugt in französischen, spanischen Texten aber auch in der Schweiz Verwendung finden.[3]

Zitieren[Bearbeiten]

HTML stellt für Zitate mehrere Elemente zu Verfügung:

  • q: (quote, engl. „Zitat“) für einzeilige Zitate im Fließtext
  • blockquote: Blockzitat, das einen eigenen Absatz ggf. auch über mehrere Zeilen einnimmt.
Beachten Sie: Das cite-Element (citation) wird nur für die Namensnennung des Titels oder Autors eines Werks, nicht für Zitate verwendet.

Daneben gibt es noch pull quotes (deutsch: „Seitenansprache“), die Sätze aus dem Text als Teaser wiederholen. Hier gibt es kein eindeutiges Element, allerdings wäre ein aside oder figure wohl passend.

Anwendungsbeispiel[Bearbeiten]

HTML[Bearbeiten]

Beispiel: Zitat ohne CSS-Formatierung ansehen …
<p>Fülltext</p>

<blockquote>
  <p>Zitat</p>
  <p><cite>Autor</cite></p>
</blockquote>

<p>Fülltext</p>
Wenn Sie die Maus auf das blockquote-Element bewegen, sehen Sie, dass die browsereigenen Festlegungen es mit einem breiten margin darstellen, sodass das Zitat um ca. 3em (je nach Browser) in den Text eingerückt wird.
Für das cite-Element ist (derzeit) browserübergreifend in den Default-Stylesheets eine kursive Darstellung vorgesehen.

CSS[Bearbeiten]

Grundeinstellungen[Bearbeiten]

Beispiel ansehen …
main {
  padding-left: 3em;
}	
	
blockquote { 
  margin: 0;
  width: 90%
}

cite {
  display: block;	
  text-align: right;	
}
In diesem Beispiel wurde der gesamte Text etwas eingerückt, indem dem Elternelement main ein padding-left gegeben wurde. Für blockquote wurde margin aber auf 0 gesetzt, sodass das Zitat linksbündig ist.
Die Namensnennung wird rechtsbündig.

Anführungszeichen[Bearbeiten]

Beispiel ansehen …
blockquote::before, blockquote::after {
  position: absolute;	
  display: block;
  font-size: 10em;
  color: #c32e04;  
}

blockquote::before {
  content: '„';
  left: -0.33em;
  top: -0.7em;
}

blockquote::after {
  content: '“';
  top: -0.3em;
  right: -0.3em;
}
Die Anführungszeichen werden mittels der Pseudoelemente ::after und ::before dargestellt.
Die Schriftgröße ist mit 10em sehr groß gewählt, um das Zitat auffälliger zu gestalten. Bei einer Änderung der Schriftgröße müssen Sie die Positionierung mit left, top und right entsprechend anpassen.

Variante mit Anführungszeichen oben[Bearbeiten]

Ein Problem bei der Verwendung des Gänsefüßchen unten ist die passende Positionierung unterhalb der ersten Zeile. Hier sieht das englische Anführungszeichen oben besser aus:

Beispiel ansehen …
blockquote::before, blockquote::after {
  position: absolute;	
  display: block; 
  font-size: 10em;
  color: #c32e04;  
}
blockquote::before {
  content: '“';
  left: -0.33em;
  top: -0.2em;
}

blockquote::after {
  content: '— ”';
  bottom: -0.4em;
  right: -0.4em;
}
Als Anführungszeichen werden &ldquo; und seine Spiegelung verwendet. Zusätzlich dient ein Gedankenstrich als unterer Rand.

Sie könnten die Anführungszeichen mit Web-Fonts auch in einer anderen Schriftart darstellen:

Beispiel ansehen …
@import url(http://fonts.googleapis.com/css?family=Chewy);
	
blockquote::before, blockquote::after {
  position: absolute;	
  display: block; 
  font-family: 'Chewy', sans-serif;
  font-size: 10em;
  color: #c32e04;  
}


Quellen[Bearbeiten]

  1. W3C: the hanging-punctuation property
  2. css-tricks hanging-punctuation
  3. Typefacts: Anführungszeichen

Weblinks[Bearbeiten]