Styling from Quotation marks to Guillemets & Comillas

International quotation marks

Today’s CMS (Content Management System) rely on web text editor APIs, like CKEditor or TinyMCE, to generate, edit and style their post’s contents based on HTML tags. But if those HTML tags are not style properly site editors can generate more bad than good by generating typos in their text.

Inline quotation marks from CKEditor

Here is my handy CSS method to style an HTML quote <q> tag that meets the 3 main North-American languages (culture).

This method is based on the HTML5 language declaration required on the <html> tag.

<!doctype html>
<html lang="fr-CA">

First the language by default; English

English quotation marks characters are double-quotes .

q {
    font-style: italic; /*personal design decision*/
q:lang(en-US)::before {
    content: "\201c";
q:lang(en-US)::after {
    content: "\201d";

Then cascading to the French and Spanish version

For both French and Spanish language, quotation marks characters are Guillemets, refered as Comillas in Spanish. Despite the different syntaxes both use the opening and closing guillemets « … » characters.

To simplify my code and since I never integrated an HTML page for a Spanish customer, I decided that both FR and EN version will benefit of the white space character (unicode \0020) within the <q> tag content.

/* First level of FR and ES quotes */
.fr q::before,
.es q::before,
q:lang(es-ES)::before {
    content: "\00ab\0020";
.fr q::after,
.es q::after,
q:lang(es-ES)::after {
    content: "\0020\00bb";
/* Second level: FR and ES quotes within quotes */
.fr q q::before,
q q:lang(fr)::before,
q q:lang(fr-CA)::before,
.es q q::before,
q q:lang(es)::before,
q q:lang(es-US)::before,
q q:lang(es-ES)::before {
    content: "\201c";
.fr q q::after,
q q:lang(fr)::after,
q q:lang(fr-CA)::after,
.es q q::after,
q q:lang(es)::after,
q q:lang(es-US)::after,
q q:lang(es-ES)::after {
    content: "\201d";

Why use Apostrophe, not Single Quote as left single quotation mark in text

While we are in the character subject, I encourage writers, editor and programmers to use the (real) curved apostrophe in text content instead of the strait single quote from your computer keyboard device. I know this practice is time consuming because the strait single quote key is the only character available on our 7-bit encoded (default) ASCII keyboards. But you get two benefits at once when you make the effort of copy & pasting the real curved apostrophe quotation mark in your document:

Curved quotation mark from serif typography layout used as apostrophe in traditional printed books
Curved quotation mark used in traditional printed books.
Strait quotation mark from non-serif typography layout from computer’s 7-bit ASCII keyboards
Strait quotation mark from computer’s keyboards
  1. Curved apostrophe typography IS the proper character used in written languages. If you open a book printed with a serif font type you usually see curved apostrophe not strait ones. The strait single quote is a mathematical sign to be used with numbers not letters.
  2. Curved apostrophe does NOT break a script when used within a string of JavaScript, PHP or any other programming language. So programmers, no need to pollute your code with all those not human readable escaping backslash in your strings.

Unicode references

You can find the complete list of unicode characters to use in your CSS go on Andrew Marcuse’s website or on the American Standard Code for Information Interchange for ASCII encoded characters.

  • \201c = – ASCII code 34
  • \201d = – ASCII code 34
  • \00ab = « – ASCII code 174
  • \00bb = » – ASCII code 175
  • \0020 = space – ASCII code 32
  • \02bc = – ASCII code 39

Author: Martin

As an internet artisan I like to deepen my mastery of this medium to better translate the beauty of the present moment with you … While making a living out of it.