iEFdev

Code, Computers & Random Junk

Quote With <q>

<q> is a kind of underestimated kind of half forgotten tag, but a great HTML tag to use. I like it, and use it a lot. All browsers support it, but some doesn’t render it, or render it nice.

Normally <q> wraps the word with a basic ". But with a few lines in you CSS file you can control it. Some countries have different quote-styles (eg “ “ ” „)

For general quoting.

/* For "q" to render nice in all browsers */
q { quotes: '"' '"'; } 
q:before { content: open-quote; }
q:after { content: close-quote; }

Now, take a few 2-digit country codes and make a stack. With the use of :lang(xx) (xx = like sv, no, de, fr, nl etc.) you can control the quoting style.

/* Country based quotes */
q:lang(en) { quotes: '“' '”'; }
q:lang(xx) { quotes: '"' '"'; }
q:lang(xx) { quotes: '‘' '’'; }
q:lang(xx) { quotes: '“' '”'; }
q:lang(xx) { quotes: '”' '”'; }
q:lang(xx) { quotes: '″' '″'; }
q:before { content: open-quote; }
q:after { content: close-quote; }

The content is controlled by the html tag. (eg <html lang="en">), or you can set it inline <q lang="en">some text</q>.

Comments