How to display language-specific quotes in CSS
- Published at
- Updated at
- Reading time
- 4min
Will Boyd's excellent article Diving into the ::before and ::after Pseudo-Elements includes nifty details about CSS quotes.
Let's say you're dealing with a multi-lingual site that quotes statements in different languages using the blockquote
element.
<ul>
<li lang="de">
<blockquote>
Hallo!
</blockquote>
</li>
<li lang="fr">
<blockquote>
Salut!
</blockquote>
</li>
</ul>
Then, you'll discover that the browser's default user agent stylesheets don't include styling for the blockquote
element.
But our quotes should stand out; let's add some proper quotation characters.
As a first step, let's display big and bold blockquote
quotes with CSS pseudo-elements ::before
and ::after
.
blockquote::before, blockquote::after {
content: '"';
font-size: 2.5em;
}
blockquote {
display: flex;
align-items: center;
/* more styles */
}
And that works all fine, but...
... here's a fun fact.
Quotation characters are language-specific. French, for example, uses «
and »
. Going all in with double quotes isn't correct and will anger quite some typography nerds (and French people).
Luckily, we can let CSS choose the correct quotes for us!
Use open-quote
and close-quote
as content
values, and let the browser do the hard work!
blockquote::before {
content: open-quote;
}
blockquote::after {
content: close-quote;
}
These two values take localization and language-specific quotation into consideration. Success!
HTML
CSS
If you're dealing with shorter and inlinable quotes, the q
element already comes with accurate browser default styles to display the correct quotes.
<div lang="de">
<p>Er sagte <q>Das wird nichts!</q>.</p>
</div>
The short German sentence above is displayed with the correct surrounding quotes.
open-quote
and close-quote
even consider nested quotes and use the correct characters (in German they're „ “
and ‚ ‘
).
Wonderful!
Whether you rely on browser defaults with q
or implement your own quotations, you'll be on the safe side with content: open-quote;
and content: close-quote;
. Very cool!
But be aware that when using quotes in pseudo content (no matter if you do it via quotes
, open-quote
, close-quote
or the <q>
element), the quotes won't make it into your clipboard correctly if you copy the text.
If you copy the sentence above you'll get:
Er sagte Sie sagte Okay! und ich freute mich
in Chromium and Webkit.. . Er sagte "Sie sagte "Okay!" und ich freute mich
in Firefox.." .
But what if you want to use custom quote styles?
To overwrite the automatically applied quote characters the quotes
property helps out.
HTML
CSS
To default to inherit the correct quote characters is quotes: auto;
, but if you need to disable and turn off open-quote
/ close-quote
pseudo content use quotes: none;
.
And there we have all the options to make your quotes stand out! Happy quoting.
Join 5.5k readers and learn something new every week with Web Weekly.