quotes

Probieren Sie es aus

quotes: none;

quotes: initial;

quotes: "'" "'";

quotes: "„" "“" "‚" "‘";

quotes: "«" "»" "‹" "›";

<section id="default-example">
  <q id="example-element"
    >Show us the wonder-working <q>Brothers,</q> let them come out publicly—and
    we will believe in them!</q
  >
</section>

q {
  font-size: 1.2rem;
}

Browser fügen Anführungszeichen an den Öffnungs- und Schließstellen von <q>-Elementen und für die Werte open-quote und close-quote der content-Eigenschaft hinzu. Jedes Öffnungs- oder Schließanführungszeichen wird durch einen der Strings aus dem Wert von quotes ersetzt, basierend auf der Verschachtelungstiefe, oder, wenn quotes explizit auf auto gesetzt oder anderweitig darauf aufgelöst wird, sind die verwendeten Anführungszeichen sprachabhängig.

Syntax

/* Keyword value */
quotes: none;
quotes: auto;

/* <string> values */
quotes: "«" "»"; /* Set open-quote and close-quote to use French quotation marks */
quotes: "«" "»" "‹" "›"; /* Set two levels of quotation marks */

/* Global values */
quotes: inherit;
quotes: initial;
quotes: revert;
quotes: revert-layer;
quotes: unset;

Werte

none

Die Werte open-quote und close-quote der content-Eigenschaft erzeugen keine Anführungszeichen, als ob no-open-quote bzw. no-close-quote setzen würden.

auto

Anführungszeichen, die typografisch für die vererbte Sprache geeignet sind (z.B. über das lang-Attribut, das am übergeordneten oder anderen Vorfahren gesetzt ist).

<string>

Definiert ein oder mehrere Paare von Anführungszeichenwerten für Öffnungs- und Schließanführungen. In jedem Paar werden die ersten Anführungszeichen jedes Paares als Werte für open-quote verwendet, und die zweiten jedes Paares sind das close-quote.

Das erste Paar repräsentiert die äußere Ebene des Zitats. Das zweite Paar, falls vorhanden, repräsentiert die erste verschachtelte Ebene. Das nächste Paar wird für doppelt verschachtelte Ebenen verwendet und so weiter. Wenn die Verschachtelungstiefe größer ist als die Anzahl der Paare, wird das letzte Paar im quotes-Wert wiederholt.

Welches Anführungszeichenpaar verwendet wird, hängt von der Tiefe oder Verschachtelungsebene der Anführungen ab: die Anzahl der Vorkommen von <q>-Anführungen oder open-quote (oder no-open-quote) im gesamten generierten Text vor dem aktuellen Vorkommen, abzüglich der Anzahl der Vorkommen von Schließanführungen, entweder als </q>, close-quote oder no-close-quote. Wenn die Tiefe 0 ist, wird das erste Paar verwendet, wenn die Tiefe 1 ist, wird das zweite Paar verwendet usw.

Formal definition

Formal syntax

quotes = 
  auto                    |
  none                    |
  match-parent            |
  [ <string> <string> ]+  

Beispiele

Standardzitate und Überschreibungen

Dieses Beispiel vergleicht die Standardanführungen, die durch das semantische HTML-<q>-Element bereitgestellt werden, mit denen, die wir mit der CSS-quotes-Eigenschaft definieren.

Der Standardwert von quotes ist auto. In diesem Beispiel hat das erste Listenelement quotes: auto gesetzt, sodass es die Standardanführungen für die angegebene Sprache erhält; dasselbe als ob keine quotes-Eigenschaft gesetzt wäre. Das zweite Listenelement definiert, welche Anführungszeichen für Zitate und verschachtelte Zitate verwendet werden sollen; diese Anführungszeichen werden für Nachkommen eines Elements mit der specialQuotes-Klasse verwendet, unabhängig von der Sprache (wie jeder über das lang-Attribut gesetzte Wert).

HTML

<ul>
  <li>
    Default quotes:
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
  <li class="specialQuotes">
    Defined by <code>quotes</code> property :
    <p lang="ru">
      <q
        >Митч Макконнелл - это человек, который знает о России и ее влиянии
        меньше, чем даже Дональд Трамп, и <q>я ничего не знаю</q>, сказал
        Трамп</q
      >, - писал Раджу.
    </p>
  </li>
</ul>

CSS

li {
  quotes: auto;
}

.specialQuotes {
  quotes: "“" "”" "‘" "’";
}

Ergebnis

Standardmäßig stellt der Browser sprachspezifische Anführungszeichen bereit, wenn das <q>-Element verwendet wird. Wird die quotes-Eigenschaft definiert, überschreiben die bereitgestellten Werte die Standardeinstellungen des Browsers. Beachten Sie, dass die quotes-Eigenschaft vererbt wird. Die quotes-Eigenschaft wird auf das <li>-Element mit der Klasse specialQuotes gesetzt, aber die Anführungszeichen werden auf die <q>-Elemente angewendet.

Beachten Sie, dass jedes open-quote und close-quote durch einen der Strings aus dem quotes-Wert ersetzt wird, basierend auf der Verschachtelungstiefe.

Automatische Anführungszeichen

Der Standardwert von quotes ist auto. Dieses Beispiel funktioniert, ohne dass es explizit gesetzt wird.

HTML

<ul>
  <li lang="fr">
    <q>Ceci est une citation française.</q>
  </li>
  <li lang="ru">
    <q>Это русская цитата</q>
  </li>
  <li lang="de">
    <q>Dies ist ein deutsches Zitat</q>
  </li>
  <li lang="en">
    <q>This is an English quote.</q>
  </li>
</ul>

CSS

q {
  quotes: auto;
}
li:not(:last-of-type) {
  border-bottom: 1px solid;
}

li {
  padding: 0.5em 0;
}

Ergebnis

Beachten Sie, dass das lang-Attribut auf einen Vorfahren des <q> gesetzt wurde, nicht auf das <q> selbst. Wenn ein Zitat in einer anderen Sprache als der umgebenden Sprache steht, ist es üblich, den Text mit den Anführungszeichen der umgebenden Sprache zu zitieren, nicht mit den Anführungszeichen der Zitatsprache selbst.

Mit generiertem Inhalt

In diesem Beispiel fügen wir anstelle des <q>-Elements Anführungszeichen über die ::before- und ::after-Pseudo-Elemente vor und nach dem Inhalt jedes Elements mit einem bestimmten Klassennamen hinzu.

HTML

<p>
  <span class="quote">I should be using quotes</span>, I thought,
  <span class="quote"
    >But why use semantic HTML elements when I can add classes to
    <span class="quote">ALL THE THINGS!</span>?
  </span>
</p>

CSS

.quote {
  quotes: '"' '"' "'" "'";
}
.quote::before {
  content: open-quote;
}
.quote::after {
  content: close-quote;
}

Ergebnis

Text als Anführungszeichen und leere Anführungen

Dieses Beispiel demonstriert die Verwendung von etwas anderem als Anführungszeichen als <string>-Werten. Das open-quote gibt den Sprecher an, und da kein öffnendes Anführungszeichen vorhanden ist, ist das close-quote leer. (Das Mixen eines <string> mit einem aufgezählten Schlüsselwort zur Erstellung eines Paares wird nicht unterstützt). Wir setzen auto für die verschachtelten Anführungen. Diese verschachtelten Anführungen werden von dem umrahmt, was die Sprache als normal für verschachtelte Anführungen vorgibt.

HTML

<ul>
  <li><q data-speaker="karen">Hello</q></li>
  <li><q data-speaker="chad">Hi</q></li>
  <li><q data-speaker="karen">this conversation is not interesting</q></li>
  <li>
    <q data-speaker="pat"
      >OMG! <q>Hi</q>? Seriously? at least <q>hello</q> is five letters long.</q
    >
  </li>
</ul>

CSS

[data-speaker="karen" i] {
  quotes: "She said: " "";
}
[data-speaker="chad" i] {
  quotes: "He said: " "";
}
[data-speaker="pat" i] {
  quotes: "They said: " "";
}
[data-speaker] q {
  quotes: auto;
}

li {
  padding: 0.5em 0;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS generierter Inhalt Modul
• contain
• content