Comece a usar aspas da maneira “correta”

Vamos começar ilustrando o que estamos falando aqui. Existem várias formas do que reconhecemos como aspas, e cada uma tem seu propósito específico. Ao pontuar a escrita, você deve usar “aspas inteligentes” ou “aspas curvas”:

Isso se aplica a ambos os duplos e aspas simples.

E até apóstrofes:

“As aspas curvas são as aspas usadas na boa tipografia.” – tipografia para advogados.com

Na web, no entanto, você normalmente verá “aspas idiotas”. Essas são versões diretas, que são frequentemente usadas por causa dos padrões definidos em CMSs e aplicativos. Até o seu teclado geralmente dificultará o uso de qualquer coisa, exceto aspas idiotas.

As aspas não devem ser confundidas com “primos”; glifos separados que são usados ​​para denotar medidas, como pés e polegadas, coordenadas e unidades ainda mais complicadas usadas na fabricação de relógios, por exemplo.

Os primos geralmente são diferentes das aspas idiotas, pois são ligeiramente inclinados, mas é claro que isso depende inteiramente do tipo de letra.

Então, para que servem as citações idiotas?!

Código. Esse é praticamente o único lugar onde você deveria usá-los tecnicamente.

Usando citações adequadas

Como mencionado, seu teclado não ajudará muito quando você estiver tentando usar as aspas corretas. Na verdade, enquanto digito isso no teclado inglês do Mac OS, estou usando o estranho:

Ao escrever HTML, se o seu documento estiver usando charset utf-8

1

 charset="utf-8" />

então você poderá colar as aspas corretas diretamente. Como alternativa, você precisará usar o HTML nomeado ou entidades numéricas ou (para CSS) os valores unicode com escape:

Citações em CSS

Podemos usar o quotes propriedade em CSS para garantir que nosso os elementos estão devidamente decorados com as aspas corretas. O quotes A propriedade aceita quatro valores em sequência, cada um definindo qual caractere usar em cada circunstância:

• Citação de abertura
• Citação de fechamento
• Abrindo cotação aninhada
• Fechando citação aninhada

Com valores unicode com escape (mencionados na tabela anterior), pode ser mais ou menos assim:

1

q {

2

    quotes: "201C" "201D" "2018" "2019";

3

}

Ou isso, se preferir ver o que está fazendo com mais clareza:

1

q {

2

    quotes: '“' '”' "‘" "’";

3

}

Curiosamente, o CSS quotes propriedade não terá nenhum efeito sobre

(embora eu tenha certeza de que costumava?).

Estamos usando valores diferentes para ditar quais glifos serão usados ​​para abrir e fechar nossos elementos de citação. Afirmamos que queremos uma aspa dupla para abrir e, em seguida, uma marca de fechamento dupla para fechar. Elementos de cotação aninhados terão marcas únicas aplicadas.

Essas aspas são inseridas usando pseudoelementos.

Controlando Diretamente os Pseudo Elementos

Outras propriedades nos permitem ainda mais controle. Podemos controlar especificamente esses pseudoelementos, informando se queremos que as marcas de abertura ou fechamento sejam exibidas. Isso vale até para

tag, que os navegadores exibem sem aspas por padrão.

1	q:before,
2	blockquote:before {
3	content: open-quote;
4	}
5	q:after,
6	blockquote:after {
7	content: no-close-quote;
8	}

Neste código, alteramos o conteúdo dos pseudo-elementos, dizendo que na verdade não queremos que uma aspa de fechamento seja exibida.