Proprietà CSS quotes
Usa la proprietà CSS quotes per impostare le virgolette nel contenuto. Valori, caratteri e esempi pratici.
La proprietà CSS quotes definisce quali caratteri di virgolette il browser inserisce quando la proprietà content richiede open-quote o close-quote. In breve, consente di sostituire le virgolette predefinite con qualsiasi carattere desiderato — e persino di controllare quali segni vengono utilizzati a ogni livello di una citazione annidata.
Questa pagina illustra cosa fa la proprietà, la sua sintassi e i suoi valori, i caratteri di virgolette più utili (con i relativi codici Unicode), e esempi eseguibili per virgolette a livello singolo e annidate.
Come funziona quotes
La proprietà quotes non inserisce di per sé alcuna virgoletta nella pagina. Dichiara soltanto quali caratteri devono essere usati. I segni vengono effettivamente disegnati dagli pseudo-elementi ::before e ::after, il cui content è impostato sulle parole chiave open-quote e close-quote:
q {
quotes: "«" "»"; /* which marks to use */
}
q::before {
content: open-quote; /* draw the opening mark */
}
q::after {
content: close-quote; /* draw the closing mark */
}Quindi tre elementi lavorano sempre insieme: quotes fornisce i caratteri e i due pseudo-elementi li posizionano. Senza le parole chiave content non appare nulla, indipendentemente da ciò che specifica quotes.
È possibile dichiarare i caratteri sia in modo letterale ("«" "»") sia tramite il codice Unicode CSS per il codepoint ("\00AB" "\00BB"). La forma con codice è utile quando la codifica del foglio di stile è incerta o il segno è difficile da digitare.
Quando usarla
- Stilizzare i segni di citazione di
<q>o<blockquote>per adattarli alle convenzioni di una lingua (tedesco„…", francese« … », ecc.). - Applicare le virgolette a qualsiasi elemento — non solo
<q>— combinandoquotescon il contenutoopen-quote/close-quote. - Fornire segni distinti per le citazioni annidate (vedi l'esempio con quattro valori di seguito).
Le virgolette predefinite utilizzate da <q> e <blockquote> dipendono dallo user agent e dall'attributo lang del documento. Impostare quotes esplicitamente quando si desidera gli stessi segni su tutti i browser.
| Valore iniziale | none |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS2 |
| Sintassi DOM | element.style.quotes = "'\2018' '\2019'"; |
Sintassi
Sintassi CSS quotes
quotes: none | [<string> <string>]+ | auto | initial | inherit;Il valore è la parola chiave none (o auto), oppure una o più coppie di stringhe. Ogni coppia è un segno di apertura seguito da un segno di chiusura; la prima coppia rappresenta il livello di citazione più esterno, la coppia successiva il primo livello annidato, e così via.
Esempio della proprietà quotes:
Esempio di codice CSS quotes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
.example {
quotes: "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Risultato
Esempio della proprietà quotes con quattro valori:
Esempio CSS quotes con virgolette annidate
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
quotes: "\0022" "\0022" "\00AB" "\00BB";
}
.example::before {
content: open-quote;
}
.example::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Quotes property example</h2>
<p>
<q class="example">
Lorem Ipsum is simply <q>dummy</q> text of the printing and typesetting industry.
</q>
</p>
</body>
</html>Qui il <q> esterno usa le virgolette doppie dritte (\0022) e quello interno usa i segni angolari («»), poiché la seconda coppia di stringhe si applica al primo livello annidato.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| none | I valori "open-quote" e "close-quote" della proprietà content non producono virgolette. | Prova » |
[<string> <string>]+ | Specifica il segno di citazione. Il primo è il segno di apertura, il secondo è il segno di chiusura. La prima coppia rappresenta il livello esterno di citazione, la seconda coppia il primo livello annidato. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento padre. |
Caratteri delle virgolette
| Segno | Descrizione | Codice |
|---|---|---|
| " | virgolette doppie | \0022 |
| ' | virgoletta singola | \0027 |
| ‹ | virgoletta singola angolare sinistra | \2039 |
| › | virgoletta singola angolare destra | \203A |
| « | virgolette doppie angolari sinistre | \00AB |
| » | virgolette doppie angolari destre | \00BB |
| ` | virgoletta sinistra (singola alta-6) | \2018 |
| ՛ | virgoletta destra (singola alta-9) | \2019 |
| " | virgoletta sinistra (doppia alta-6) | \201C |
| " | virgoletta destra (doppia alta-9) | \201D |
| „ | virgolette doppie (doppie basse-9) | \201E |
Proprietà correlate
- content — imposta
open-quote/close-quote(e qualsiasi contenuto generato) sugli pseudo-elementi. - ::before — inserisce il segno di apertura prima del contenuto dell'elemento.
- ::after — inserisce il segno di chiusura dopo il contenuto dell'elemento.