Inizia a utilizzare le virgolette come corretto

Virgolette, segni del discorso, virgolette; qualunque cosa tu chiami queste forme di punteggiatura, potresti benissimo usarle in modo errato. Diamo una rapida occhiata a cosa è corretto, cosa no e cosa puoi fare all'interno del tuo CSS per assicurarti che le tue virgolette siano formattate correttamente.


Terminologia rapida

Iniziamo illustrando di cosa stiamo parlando qui. Esistono diverse forme di ciò che riconosciamo come virgolette e ognuna ha il suo scopo specifico. Quando si punteggia la scrittura, è necessario utilizzare "virgolette intelligenti" o "virgolette inglesi":


Questo vale sia per il doppio e virgolette singole.


E persino apostrofi:


Sul web, tuttavia, vedrai comunemente "citazioni stupide". Si tratta di versioni dirette, che vengono spesso utilizzate a causa di valori predefiniti impostati in CMS e applicazioni. Anche la tastiera di solito rende difficile l'uso di qualsiasi cosa tranne citazioni stupide.



Le citazioni stupide non devono essere confuse con "numeri primi"; glifi separati che sono usati per indicare la misurazione, come piedi e pollici, coordinate e anche unità più complicate usate nell'orologeria, per esempio.


I minuti sono di solito diversi da citazioni stupide, in quanto si inclinano leggermente, ma questo è ovviamente del tutto in giù per il carattere tipografico.

Quindi quali sono le citazioni stupide per allora?!

Codice. Questo è praticamente l'unico posto in cui dovresti tecnicamente usarli.


Utilizzo di virgolette appropriate

Come già detto, la tua tastiera non ti aiuterà molto quando stai cercando di usare virgolette corrette. Infatti, mentre scrivo questo, sto lanciando citazioni stupide in tutto il luogo - dovrò fare una ricerca e sostituirmi in seguito!

Se il tuo documento utilizza il set di caratteri utf-8

 

quindi sarai in grado di incollare direttamente le virgolette corrette. In alternativa, dovrai utilizzare le entità nominate o numeriche HTML o (per i CSS) i valori unicode sfuggiti:

glifo entità nominata entità numerica escape unicode

\ 201C

\ 201D

'

\ 2018

'

\ 2019

Citazioni in CSS

Possiamo usare il citazioni proprietà in CSS per essere sicuri che il nostro e

gli elementi sono decorati correttamente con le virgolette corrette. Il citazioni proprietà accetta quattro valori in sequenza, ognuno dei quali definisce quale personaggio utilizzare in ogni circostanza:

  • Preventivo di apertura
  • Citazione di chiusura
  • Apertura della citazione nidificata
  • Citazione annidata di chiusura

Potrebbe sembrare un po 'come questo:

 q, blockquote quotes: "\ 201C" "\ 201D" "\ 2018" "\ 2019"; 

Qui abbiamo come target sia le quotazioni in-line che i blockquotes. Stiamo usando i valori unicode con escape (menzionati nella tabella precedente) per dettare quali glifi verranno utilizzati per aprire e chiudere i nostri elementi di quotazione. Abbiamo dichiarato che vogliamo aprire una doppia virgoletta, quindi un doppio segno di chiusura per chiudere. Gli elementi di quotazione nidificati avranno un unico segno applicato.

Dai un'occhiata a questa demo. In esso vedrai a

senza uno stile applicato, quindi uno con uno stile corretto.

Nota: Queste virgolette sono inserite in pseudo elementi, quindi solo i browser di supporto visualizzeranno effettivamente le virgolette in questo modo.

Voglio più potere!

Ulteriori proprietà ci consentono un controllo ancora maggiore. Possiamo continuare a controllare in modo specifico quegli elementi pseudo, affermando se vorremmo che l'apertura o i segni di chiusura fossero visualizzati a tutti.

 q: before, blockquote: before content: open-quote;  q: after, blockquote: after content: no-close-quote; 

In questo codice abbiamo modificato il contenuto degli pseudo-elementi, dicendo che in realtà non vogliamo che venga visualizzata una citazione di chiusura.


Language Gap

Tuttavia, non tutti visualizzano le virgolette allo stesso modo. Dai un'occhiata a cosa usano i francesi, per esempio.


Questi sono chiamati "guillemets" (no, non "guillemots") e sono solo un esempio di virgolette alternative. Fortunatamente, siamo liberi di utilizzare le entità corrette per qualsiasi lingua di cui abbiamo bisogno. E possiamo mirare al Lang attributo sul html elemento specifico (grazie a fliptheweb per quel piccolo suggerimento).

  ... 
 html [lang = "fr"] q quote: "\ 00ab" "\ 00bb"; 

Scuse anche per mon français, se ho sbagliato ...


Conclusione

Fatti furbo, non ci sono scuse per usare citazioni stupide!


Ulteriori risorse

  • Quotazioni in linea su html5doctor.com
  • Citazioni dritte e ricce su typographyforlawyers.com
  • quotesandaccents.com
  • Tipografia Web tecnica: linee guida e tecniche di Harry Roberts
  • Variazione internazionale tra virgolette su Wikipedia
  • Citazioni intelligenti per persone intelligenti