Friday 29 November 2013

The q element

The q HTML element is used to represent an inline quote. Now regular quotes ("") can represent this just fine, surrounding the quote in the q tag differs in that it explicitly indicates that the text is a quote, removing ambiguities that it could be emphasis, irony, etc.

In addition to explicitly stating that the text is a quote, it also provides a way to consistently style all quotes with minimal markup.

Usage

A quote

To use the q element, surround the quote with the tag. Ensure you do not add quotes in addition to the q tag or they will come through twice.

<p>Gandalf opened the doors to Moria by saying <q>Mellon</q>.</p>

A quote within a quote

It is also possible to specify a quote within a quote. The CSS quotes property let's us define what the outer and inner quotes look like as explained in the styling section.

<p>She told me <q>Paul said this morning <q>don't take that one.</q></q></p>

Styling

This is the default CSS for the q element.

q {
  display: inline;
}
q:before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

The pseudo-elements use the special values for content; open-quote and close-quote. These are used in conjunction with the quotes rule which can specify what quotes are used at varying levels of depth. This snippet will surround the first level of the q elements on a page with double quotes and the second level with single quotes.

body {
  quotes: '"' '"' "'" "'";
}

Combined with the lang pseudo-class, it's possible to use different quotes for different languages.

:lang(en) > q {
  quotes: '"' '"' "'" "'";
}
:lang(ja) > q {
  quotes: '「' '」' '『' '』';
}
:lang(fr) > q {
  quotes: '« ' ' »' '“' '”';
}

More advanced styling is possible, unicode characters can be specified using the '\xxxx' syntax.

See the Pen The <q> element by Daniel Imms (@Tyriar) on CodePen

Further reading

Read more on the q element from the following sources: