Using the q element for multilingual quotations

Question

What do I need to know about using the q element in multilingual text?

There are those who think that the q element shouldn’t automatically produce quotation marks around the text it surrounds, and that therefore it shouldn’t be used. Others think that it can be useful if used judiciously. This article doesn’t take a stand on that choice: it just provides information for those who want to use it.

The q element exists in HTML, and all browsers automatically provide quotation marks if you use it. However, the HTML specification says that Content inside a q element must be quoted from another source … The source may be fictional, as when quoting characters in a novel or screenplay. It’s probably fair to say that quoted speech in novels may use very different mechanisms than those the q element supports, and that the element is most safe to use when quoting text from another written source.

This article sets out to describe some of the things you should be aware of if you choose to use the q element in a multilingual context. It reflects the situation at the time of writing. That situation may change soon, at which point the article will be updated.

answer

Readers expect to see a quote surrounded by quotation marks appropriate to their language. For quotes in a different language than the surrounding text, readers expect the quotation marks to be those of the language outside the quotation.

Currently, although all major browsers add quotation marks around the q element, not all choose those marks, by default, according to the language of the text. Where the quote is in a different language than the surrounding text, most browsers don't, by default, produce the correct quotation marks.

It is more effective to use CSS and to explicitly define which quotation marks you expect the browser to use around the q element, but the CSS selector has to be carefully composed. For example, for Swiss French text you might use:

:root:lang(fr-CH), :not(:lang(fr-CH))>:not(q):lang(fr-CH) 
      { quotes: '«' '»' "‹" "›"; }

You should always identify the language of the page, and that of the quotation if the language differs.

How quotation marks are used

Let’s begin by examining some use cases and establishing some ground rules, using an example to illustrate what most people would expect to see when using quotation marks.

Take the following sentence from the book Room with a View. (Whether or not the final period belongs inside or outside the quotation marks depends on your preference. We’ll omit it to keep the example simple.)

Translate this book into French, and you would expect to see the use of French quotation marks.

If we add a quotation inside a quotation, we would expect to see the inner quotation use different quotation marks in English.

and in many other languages, including Swiss French (though not European French, according to the Unicode Consortium's Common Locale Data Repository).

So far so good. Now let’s look at what happens if we start mixing languages. Let’s suppose that the book is in English, but Lucy speaks in French.

Note that the quotation marks remain in the English form. The rationale for this is that the quotation marks are part of the surrounding context, and don’t depend on the language of the quoted text.

In fact, if we were to add the subquote, publishers would expect to see that use English quotation marks too, unless we specifically wanted to reproduce the text being quoted exactly as it looked in the original. So we’d normally expect to see:

Occasionally, it may be important to retain the original quotation marks for embedded quotes. This would normally be when you want to show what the text looked like in the original source. In such a case, you might expect to see:

How browsers apply default quotation marks

If you want complete success, you should probably use CSS to override the browser defaults and ensure that the q element produces quotation marks in the way you prefer. More on that later.

This section looks at what browsers currently do if you use the q element without any styling.

Before we start we should note that all major browsers do automatically add a default set of quotation marks, and that they also use different quotation marks for nested subquotes.

Multilingual text

But what if the quotation is in a different language than the surrounding text? This is where we begin to run into difficulties.

Here's our source code.

But Lucy replied: <q lang="fr-CH">Embrassez George de ma part</q>

You would expect to see English quotation marks around the French quotation.

But Lucy replied: “Embrassez George de ma part”

However, Chrome, Safari and Edge add quotation marks based on the language of the quoted text, which is not what would be expected. So in an English ebook you would see

Bad result. Don't copy!

But Lucy replied: «Embrassez George de ma part»

In the early days of the WhatWG version of the HTML, this incorrect approach was what the spec said should happen, and browsers tended to follow suit — producing incorrect results. Now, however, that section of the HTML Standard has been removed, and the onus is placed on the CSS styling built into the browser defaults to produce the right results.

The upcoming W3C version of HTML specifies that the version of the quotation marks should be set according to the language indicated on the html tag, and not according to the language of the quoted text. This would remove the unexpected result in a page that contains quotes in another language.

Gecko and Blink based browsers do produce the expected result, but currently WebKit doesn't.

Output in your browser:

But Lucy replied: Embrassez George de ma part

Unfortunately, however, if the French quotation contains an embedded quote, Gecko, Blink, and WebKit browsers all apply French quotation marks instead of the English quotes you would expect to see.

Output in your browser:

But Lucy replied: Embrassez George de ma part et dites-lui, Embrouille!

Using CSS to style quotation marks

Unfortunately, however, if the French quotation contains an embedded quote, Gecko, Blink, and WebKit browsers all apply French quotation marks instead of the English quotes you would expect to see.

You can style quotation marks for a Swiss French, monolingual document using the following CSS.

* { quotes: '«' '»' "‹" "›"; } 
q::before { content: open-quote; }
q::after { content: close-quote; }

Although they should already be in the browser's default stylesheet, it's worth including the ::before and ::after lines in order to ensure that your code it bulletproof.

For pages containing quotations in other languages, or sections in other languages, however, you'll want something a little more complex, such as the following:

:root:lang(fr-CH), :not(:lang(fr-CH))>:not(q):lang(fr-CH) 
      { quotes: '«' '»' "‹" "›"; }
:root:lang(en), :not(:lang(en))>:not(q):lang(en) 
      { quotes: '“' '”' "‘" "’"; }

The above CSS will prepare you to display quotations in Swiss French or English text. You'll need a line like this for every language in the document.

The selector says:

• Set the selected quotes for the whole document if language X is set in the html tag.
• If the language changes away from X for any element except q, set the quotes as specified.

Further reading

• Default styling for multilingual quotes & quotation marks in HTML

• Summarized test results: The q element

• Related links, Authoring web pages

  • Markup & styling