CSS/Tutorials/Zitate interessant gestalten

Aus SELFHTML-Wiki
< CSS‎ | Tutorials
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Zitate sind eine wörtlich oder inhaltlich übernommene Stelle aus einem anderen Text oder ein Hinweis auf eine bestimmte Textstelle. Sie dienen in Webseiten auch als Blickfang und Auflockerung der "Bleiwüste".[1] In diesem Tutorial lernen Sie, wie Sie Zitate mit CSS individuell gestalten können.

HTML[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.

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 (, &bdquo;). Das Ende wird durch Anführungszeichen oben (, &ldquo;) 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.[2]

Anwendungsbeispiele[Bearbeiten]

Anführungszeichen[Bearbeiten]

Beachten Sie: Setzen Sie Zitate nicht in Zitatzeichen wie beispielsweise Anführungszeichen. Diese ergänzen die Browser ggf. automatisch.

Dabei berücksichtigen Browser auch die Sprachangabe und verwenden die jeweiligen Anführungszeichen:

Beispiel ansehen …
<p lang="en">Martin Luther King said: <q>I have a dream!</q></p>
<p lang="de">Martin Luther King sagte: <q>Ich habe einen Traum!</q></p>
<p lang="de-CH">Martin Luther King sagte: <q>Ich habe einen Traum!</q></p>
<p lang="pl">Martin Luther King powiedział: <q>Mam marzenie!</q></p>
<p lang="ru">Мартин Лютер Кинг сказал: <q>У меня есть мечта!</q></p>
Die meisten Browser rendern die für die Sprachangabe passenden Anführungszeichen.

Q-Zitate-mit-sprachabhängigen-Anführungszeichen.jpg

Beachten Sie: Der Firefox unterscheidet nicht zwischen `de` und `de-CH`.

Sie können dies aber auch mit CSS mithilfe des :lang-Selektors nachbauen.

Blockzitat mit Zierelementen[Bearbeiten]

Blockzitat.jpg

Im Forum wurde gefragt, wie man dieses Blockzitat ohne zusätzliche Elemente realisieren könnte. Schnell kam der Vorschlag, die Anführungszeichen in Pseudoelemente zu packen.[3]

Ich hatte erst im Sinn, die Höhe des Pseudoelements auf eins, zwei Pixel festzulegen und die Linien mit border-left und border-right zu erzeugen. Das Anführungszeichen wird in seiner vollen Pracht auch außerhalb der Box des Pseudoelements dargestellt. Mir ist es nur nicht gelungen, das Ding vertikal passend zu den Linien auszurichten.

SVG zur Hilfe! Damit kriegt man schnell zwei Linien hin und auch das Anführungszeichen dazwischen:

Gunnar Bittersmann
Zitat mit Zierelement
<svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 0 12 4'>
  <text x='0' y='2' text-anchor='middle' font-size='3' fill='hsl(224, 60%, 60%)'></text>
  <g stroke-width='0.1' stroke='hsl(224, 60%, 60%)'>
    <line x1='6' x2='1.5' y1='2' y2='2'/>
    <line x1='-6' x2='-1.5' y1='2' y2='2'/>
  </g>
</svg>

Diese SVG-Grafik können Sie nun mittels background-image als Hintergundgrafik verwenden. Sie müssen die Grafik nicht auf dem Server hinterlegen und extern referenzieren, sondern können sie auch direkt einbinden. Dazu müssten Sie jedoch den XML-Text URL-encodieren, damit alle Leer- und Sonderzeichen maskiert werden. Wenn man im XML einfache anstatt doppelte Anführungszeichen verwendet, müssen Sie nicht alle Zeichen URL-encodieren; insbesondere Leerzeichen können als solche bleiben. [4]

Zitat mit Zierelement ansehen …
blockquote::before,
blockquote::after {
  content: '';
  display: block;
  height: 2em;
  width: 100%;
  background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 0 12 4'%3E%3Ctext x='0' y='2' text-anchor='middle' font-family='Georgia' font-size='3' fill='hsl(224, 60%, 60%)'%3E„%3C/text%3E%3Cg stroke-width='0.1' stroke='hsl(224, 60%, 60%)'%3E%3Cline x1='6' x2='1.5' y1='2' y2='2'/%3E%3Cline x1='-6' x2='-1.5' y1='2' y2='2'/%3E%3C/g%3E%3C/svg%3E');
  /* <svg xmlns='http://www.w3.org/2000/svg' viewBox='-6 0 12 4'><text x='0' y='2' text-anchor='middle' font-family='Georgia' font-size='3' fill='hsl(224, 60%, 60%)'>„</text><g stroke-width='0.1' stroke='hsl(224, 60%, 60%)'><line x1='6' x2='1.5' y1='2' y2='2'/><line x1='-6' x2='-1.5' y1='2' y2='2'/></g></svg> */
  background-position: center;
  background-repeat: no-repeat;
  align-self: center;
}

blockquote:lang(en)::before,
blockquote:lang(de)::after {
  transform: rotate(.5turn);
}

Das unmaskierte SVG-Markup ist (noch) als Kommentar vorhanden, kann aber später entfernt werden.

Die Anführungszeichen werden entsprechend der Sprachangabe im lang-Attribut gedreht: „“ für Deutsch, “” für Englisch.

Hängende Interpunktion[Bearbeiten]

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[5], wird diese bislang nur (teilweise) von Safari unterstützt[6]. In diesem Tutorial lernen Sie, wie sie Zitate ansprechend formatieren, sodass die Anführungszeichen außerhalb des Blocksatzes erscheinen.

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.
Die Namensnennung wird durch die browsereigenen Einstellungen für das cite-Element kursiv dargestellt; dies ist aber nicht garantiert.

CSS -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. Wikipedia: Zitat
  2. Typefacts: Anführungszeichen
  3. SELF-Forum: Komplexes Layout ohne zusätzliches Markup von Heinetz am 12.01.2018
    Lösung von Gunnar Bittersmann
  4. Optimizing SVGs in data URIs von Taylor Hunt
  5. W3C: the hanging-punctuation property
  6. css-tricks hanging-punctuation

Weblinks[Bearbeiten]