Zitate interessant gestalten

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.

Inhaltsverzeichnis

1 HTML
- 1.1 q - Zitate im Fließtext
  - 1.1.1 Quellenangaben
  - 1.1.2 Anführungszeichen
- 1.2 blockquote
2 CSS
- 2.1 quotes
3 Typographische Grundlagen
4 Anwendungsbeispiele
5 Quellen
- 5.1 Weblinks

HTML

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.

q - Zitate im Fließtext

Das Element q (quote, engl. „Zitat“) dient der Auszeichnung von Zitaten im Fließtext.

Quellenangaben

Verwenden Sie das Attribut cite um eine online-Quelle anzugeben.

Beispiel

<p>Die Einwohnerzahl Deutschlands ist wieder gestiegen. Wie das statistische Bundesamt mitteilt, 
  <q cite="https://www.destatis.de/DE/PresseService/Presse/Pressemitteilungen/2012/07/PD12_255_12411.html">
  stieg [...] die Einwohnerzahl Deutschlands im Vergleich zum Vorjahr um 92 000 Personen (+ 0,1 %)
  auf mehr als 81,8 Millionen.</q>
</p>

Alternativ können Sie auch das cite-Element verwenden:

Anführungszeichen

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.

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

blockquote

Mithilfe des Elements blockquote können Sie Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerückten) Absatz hervorheben. Die Bezeichnung des Elements ergibt sich aus quote, englisch für Zitat und der Tatsache, dass es sich um ein Blockelement handelt.

Sie nehmen dabei jedoch lediglich eine logische, inhaltliche Auszeichnung vor. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Web-Browser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen.

Beispiel ansehen …

    <h1>Franz Kafka</h1>
    <p>Über die Krähen und den Himmel schreibt Franz Kafka:</p>
    <blockquote>
        <p>
            Die Krähen behaupten, eine einzige Krähe könne den Himmel
            zerstören; das ist zweifellos, beweist aber nichts gegen
            den Himmel, denn Himmel bedeutet eben: Unmöglichkeit von
            Krähen.
        </p>
    </blockquote>

<blockquote> leitet einen eigenen Absatz für Zitate ein. </blockquote> beendet den Absatz.

Beispiel ansehen …

<!doctype html> <html> <head> <title>Zitate und Adressen mit CSS formatieren</title> <style> blockquote { padding: 10px; border: thin solid blue; } address { color: blue; } </style> </head> <body> <h1>Zitat und Adresse</h1> <blockquote> Klarheit ist, wenn man so will, nur die anschaulichere Variante der Wahrheit. </blockquote> <address>Brigitte Beispiel, beispiel@example.org</address> </body> </html>

Das blockquote-Element erhält einen dünnen durchgezogenen blauen Rahmen und der Text darin einen Innenabstand von 10 Pixeln. Das address-Element erhält eine blaue Schriftfarbe.

CSS

quotes

Die Eigenschaft quotes erlaubt es, verschiedene Darstellungsoptionen für Anführungszeichen festzulegen.

Folgende Angaben sind möglich:

none
string string: Die ersten zwei Werte geben an, welche Anführungszeichen verwendet werden sollen. Die nächsten 2 geben Anführungszeichen für Zitate innerhalb von Zitaten an, usw.
initial
inherit

Anführungszeichen mit quote festlegen ansehen …

<style>
q {
      quotes: "«" "»" "‹" "›";
}
</style>

<p><q>Dies ist ein Zitat.</q></p>
<p><q>Dies ist ein <q>Zitat</q> innerhalb eines Zitats.</q></p>

Ergebnis	Beschreibung	Hexadezimalnotation	Entity
"	Doppeltes Anführungszeichen	0022	"
'	Einfaches Anführungszeichen	0027	'
‹	Angewinkeltes einfaches Anführungszeichen, links	2039	‹
›	Angewinkeltes einfaches Anführungszeichen, rechts	203A	›
«	Angewinkeltes doppeltes Anführungszeichen, links	00AB	«
»	Angewinkeltes doppeltes Anführungszeichen, rechts	00BB	»
‘	Einfaches Anführungszeichen, links (single high-6)	2018	‘
’	Einfaches Anführungszeichen, rechts (single high-9)	2019	’
“	left quote (double high-6)	201C	“
”	right quote (double high-9)	201D	”
„	double quote (double low-9)	201E	„

Empfehlung: Diese Anführungszeichen lassen sich auf der Tastatur teilweise nur schwer darstellen.

Wenn Sie als Zeichenset UTF-8 verwenden, können Sie die Zeichen einfach kopieren.

Ansonsten verwenden Sie die Hexadezimalnotation mit einem Backslash (\) davor.

Typographische Grundlagen

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 (“, “) 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

Anführungszeichen

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.

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

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;

[1]

[2]

[3]

[4]