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

Read more on the q element from the following sources: