CSS: Better Quotes

Dec 7, 2023
2 minutes to read

Although the naming is inconsistent, similarly to <code> and <pre>, HTML also provides us both a block-level quote (you guessed it, <blockquote>) and also an inline version – <q> (read more).

What makes the inline quotation element useful, is that CSS allows us to target its quotes with pseudo-selectors:

q {
  quotes: "“" "”" "‘" "’";
}
q::before {
    content: open-quote;
}
q::after {
    content: close-quote;
}

My work here is ‘done’.

The second pair of characters (optional) that we define in the quotes property allows us to dictate which symbols are used in a nested-quote scenario. The nested quote has to be another <q> element. And the symbols can be anything! Check this out for some silly-points

q.example1 { quotes: "👉" "👈" "🥕" "🥕"; }
q.example2 { quotes: "«" "»" "‹" "›"; }

Last week's highlight was my time debugging Rabbit MQ

Last week's highlight was my time debugging Rabbit MQ

If quotes are set to auto, the quotation marks are dependent on the site’s dictated language (slightly varies by browser). A thing I was unaware of is that you can define the language also for a specific element, and browsers will usually get the quotes right:

<ul>
  <style>q { quotes: auto }</style>
  <li lang="fr">
    <q>Ceci est une citation française.</q>
  </li>
  <li lang="ru">
    <q>Это русская цитата</q>
  </li>
  <li lang="de">
    <q>Dies ist ein deutsches Zitat</q>
  </li>
  <li lang="en">
    <q>This is an English quote.</q>
  </li>
</ul>

You can read more about it here: MDN CSS/quotes