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">
<head>
...

First the language by default; English

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

Then cascading to the French and Spanish version

For your information, the translation of Quotation marks in French is Guillemets VS Comillas in Spanish. 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,
q:lang(fr)::before,
q:lang(fr-CA)::before,
.es q::before,
q:lang(es)::before,
q:lang(es-US)::before,
q:lang(es-ES)::before {
    content: "\00ab\0020";
}
.fr q::after,
q:lang(fr)::after,
q:lang(fr-CA)::after,
.es q::after,
q:lang(es)::after,
q:lang(es-US)::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";
}
Martin

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.