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.
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";
}
