Como exibir citações específicas do idioma em CSS

Digamos que você esteja lidando com um site multilíngue que cita declarações em diferentes idiomas usando o blockquoteelemento.

<ul>
  <li lang="de">
    <blockquote>
      Hallo!
    </blockquote>
  </li>

  <li lang="fr">
    <blockquote>
      Salut!
    </blockquote>
  </li>
</ul>

Então, você descobrirá que as folhas de estilo padrão do agente do usuário do navegador não incluem estilo para o blockquoteelemento.

Mas as nossas citações devem se destacar; vamos adicionar algumas aspas adequadas.

Exibir cotações usando ::beforee::after

Como primeiro passo, vamos exibir blockquotecitações grandes e em negrito com pseudoelementos CSS ::beforee ::after.

blockquote::before, blockquote::after {
  content: '"';
  font-size: 2.5em;
}

blockquote {
  display: flex;
  align-items: center;
  /* more styles */
}

E isso funciona bem, mas…

… aqui está uma curiosidade.

Os caracteres de cotação são específicos do idioma . O francês, por exemplo, usa «e ». Apostar tudo com aspas duplas não é correto e irritará alguns nerds da tipografia (e franceses).

Felizmente, podemos deixar o CSS escolher as citações corretas para nós!

CSS suporta cotação dependente de idioma

Use open-quotee close-quotecomo contentvalores e deixe o navegador fazer o trabalho pesado!

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

blockquote::after {
  content: close-quote;
}

Esses dois valores levam em consideração a localização e a cotação específica do idioma. Sucesso!HTML

CSS

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

blockquote::after  { 
  content : close-quote ; 
}

VISUALIZAÇÃO

O qelemento exibe as cotações corretas por padrão

Se você estiver lidando com cotações mais curtas e inlináveis, o qelemento já vem com estilos padrão do navegador precisos para exibir as cotações corretas.

<div lang="de">
  <p>Er sagte <q>Das wird nichts!</q>.</p>
</div>

A curta frase em alemão acima é exibida com as aspas corretas.

open-quotee close-quoteaté considere aspas aninhadas e use os caracteres corretos (em alemão são „ “e ‚ ‘).

Maravilhoso!

Quer você confie nos padrões do navegador qou implemente suas próprias cotações, você estará seguro com content: open-quote;e content: close-quote;. Muito legal!

Mas e se você quiser usar estilos de cotação personalizados?

Substituir open-quoteeclose-quote

Para substituir os caracteres de aspas aplicados automaticamente, a quotespropriedade ajuda.HTML

< div  lang = " de " > 
  < p > 
    Er sagte < q > Das wird nichts! </ q > .
   </ p > 
</ div >

CSS

div  { 
  aspas :  "__"  "__" "_  "  "_" ; 
}

VISUALIZAÇÃO

O padrão é herdar os caracteres de aspas corretos quotes: auto;, mas se você precisar desabilitar e desligar open-quote/ close-quotepseudo-conteúdo, use quotes: none;.