Perché le virgolette doppie vengono visualizzate solo per il primo elemento?


89

Mi chiedo perché il browser mostri doppie virgolette aperte solo per il primo elemento. Il secondo elemento ha invece virgolette singole.

a::before {
  content: open-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>


4
open-quotenon aprire un preventivo. Non si riferisce a virgolette doppie.
Bergi

5
In Internet Explorer 11, sono entrambe doppie virgolette aperte.

Risposte:


137

Le virgolette aperte non vengono terminate, quindi il browser presume "intelligente" che stai per annidare le virgolette, risultando in virgolette doppie esterne per il primo elemento e singole virgolette interne per il secondo. Ecco come funziona la punteggiatura delle virgolette nelle virgolette annidate. Vedi Wikipedia e i riferimenti alle citazioni annidate in esso.

In particolare, i confini degli elementi vengono ignorati, quindi non importa anche se il tuo secondo elemento è nidificato più in profondità o se entrambi gli elementi sono nidificati nei propri elementi padre, funzionerà comunque allo stesso modo, il che lo rende particolarmente utile nei paragrafi che potrebbero contenere diversi tipi e combinazioni di elementi fraseggio ( a, br, code, em, span, strong, ecc, così come qse stesso). Come le citazioni sono annidati dipende esclusivamente dal numero di open-quotes e close-quotes che sono stati generati in qualsiasi punto nel tempo, e l'algoritmo è dettagliato nel capitolo 12.3.2 delle specifiche CSS2 , che termina con la seguente nota:

Nota. La profondità della citazione è indipendente dalla nidificazione del documento di origine o dalla struttura di formattazione.

A tal fine, ci sono due cosiddette "soluzioni" a questo problema, entrambe implicano l'aggiunta di uno ::afterpseudo-elemento per bilanciare il primo insieme di virgolette aperte.

Inserendo virgolette chiuse utilizzando ::afterla citazione per il primo elemento viene terminata prima che venga incontrato il secondo elemento, quindi non vi è alcuna nidificazione delle virgolette.

a::before {
  content: open-quote;
}

a::after {
  content: close-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Se in realtà non si desidera visualizzare virgolette chiuse, è comunque possibile impedire al browser di generare virgolette singole per il secondo elemento utilizzando no-close-quote.

a::before {
  content: open-quote;
}

a::after {
  content: no-close-quote;
}
<a href="http://www.google.com">Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>


35

Questo perché non hai chiuso le virgolette precedenti, le virgolette successive rimarranno solo con una '.

quindi usa lo pseudo elemento afterconcontent: close-quote

Vedi sotto lo snippet:

Puoi anche modificare le virgolette primarie e secondarie su un tag utilizzando la proprietà CSS delle virgolette come segue:

a {
  quotes: "“" "”" "“" "”";
           ^   ^   ^   ^
           |   |   |   |
           |   |   |   |_ #secondary close quotes 
           |   |   |_____ #secondary open quotes 
           |   |_________ #primary close quotes    
           |_____________ #primary open quotes 
 }

vedi frammento di seguito:

a {
  quotes: "“" "”" "“" "”";
}

a::before{
    content: open-quote;
}
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>  <br>
<a href="http://www.google.com"> Google</a> <br>
<a href="http://www.amazon.com">Amazon</a>

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.