Intended audience:
HTML coders (using editors or scripting), script developers (PHP, JSP, etc.), CSS coders, Web project managers, and anyone who is new to character encodings and needs an introduction to how to choose and apply character encodings.
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.
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 to explicitly define the 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.
For more details, read the remainder of this article.
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. (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.)
But Lucy replied: “Give George my love”
Translate this book into French, and you would expect to see the use of French quotation marks.
Mais Lucy répondit: «Embrassez George de ma part »
If we add a quotation inside a quotation, we would expect to see the inner quotation use different quotation marks in English.
But Lucy replied: “Give George my love and tell him, ‘Muddle’”
and in many other languages, including Swiss French (though not European French, according to the Unicode Consortium's CLDR).
Mais Lucy répondit: «Embrassez George de ma part et dites-lui, ‹Embrouille›»
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.
But Lucy replied: “Embrassez George de ma part”
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:
But Lucy replied: “Embrassez George de ma part et dites-lui, ‘Embrouille’”
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:
The passage in question was: “Embrassez George de ma part et dites-lui, ‹Embrouille›”
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 they also use different quotation marks for nested subquotes.
Let's assume you have the following markup, in a page where the language of the html tag is set to Swiss French using lang="fr-CH".
Mais Lucy répondit: <q>Embrassez George de ma part et dites-lui, <q>Embrouille</q></q>
By default, you can expect to see Swiss French quotation marks in Chrome, Safari, and Edge, but not in Firefox, since it doesn't take language settings into account for default quotation marks.
Mais Lucy répondit: «Embrassez George de ma part et dites-lui, ‹Embrouille›»
For browsers that do generate quotation marks per the language of the text, the quotation marks used follow the settings recommended by the CLDR repository. This is specified in the HTML standard.
However, support varies by language, and doesn't cover all languages si there may not be a default set for the particular language you are using.
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">Embrassez George de ma part</q>
The fact that Firefox isn’t language-sensitive actually helps here (as long as your document is mainly in English). With Firefox you would see what you'd expect:
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»
This is what the WhatWG version of the HTML spec currently requires.
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.
If, however, the page contains sections in different languages, each with quotations in another language, you will have problems when using the W3C model. The language declared in the html tag will apply throughout, so you'll need to use CSS styling to change the default for one or both sections.
If this is one of the special cases where you want the quotation marks inside a quote to remain true to the original, it would be possible to style this using CSS, but it is probably a lot easier, and more true to the actual intention, to simply use Unicode characters for the quotation marks, rather than using the q element.
The upshot of this is that currently the default choice of automatically supplied quotation marks works as expected in monolingual documents in some but not all browsers. And for multilingual text it mostly works incorrectly and is not sensitive to in-document changes in language context.
Therefore, until the specs and browser behaviour change, it makes sense to use CSS styling most of the time when you want to automatically generate quote marks for the q element, for blockquote, or any other element.
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.
One of the issues you face when using CSS in the way just described is that any additional styling associated with the language of the quotation is applied to the quotation marks. This is also true when using the browser defaults.
This can be problematic if, for example, the font used for the quotation is different from that used for the surrounding text. In the following image the top line shows the result of adding quote marks to the text outside of a span containing the Japanese text. The lower line shows that when the q element is used the quotation marks adopt the shape of the Japanese font.
This would not be ideal, since the quotation marks should be seen as belonging to the surrounding context, rather than the quotation itself.
Similarly, if the quotation was italicised, coloured, or styled in any other way, that styling would apply by default to the quotation marks.
