Web & graphic design notes

Different quote symbols in HTML

Sometimes we need to set up the appearance of quotes in a different way depending on what quote you want to use and where in the content it needs to appear. We’ve already wrote about the quote tag <q> in our blog which gives the opportunity to identify small quotes in the text. Let’s see how you can change the look of quotes using CSS.

<q> tag allows using nested <q> tags, which is why modification of the quote appearance may be necessary. Moreover in different languages quote symbols are different.

Using CSS for <q> tag and applying property quotes will give the desired effect.

Two-level quote pairs definition:

/* css */
q {quotes: "<<" ">>" "<" ">"}

So the code:

<q> In one of his articles, Jacob Nielsen, stated that <q>Animation is used 
as a blunt weapon…</q> </q>

will look like this:

To specify the language for a quote use the following:

/* css */
q:lang(en) {quotes: "<<" ">>"}
q:lang(ru) {quotes: '””’ ‘””’}

A full list of abbreviations of ISO 639-1 for lang pseudo-class can be found here.
Here is a table of Unicode codes for the quotes you can use with quotes property preceded by \ sign:

q {quotes: "\0027" "\0027"}