Babylonian confusion of quotes

Yesterday (9 July 2012) I saw this tweet by Nathan C. Ford about Chicken Feet quotes. It made me remember the CSS I've been using for multi-language quote characters. Here’s the tweet quoted in a block-quote:

«These are not arrows. They’re quotation marks for lots of Europeans.» AKA Chicken Feet. Good resource here: http://en.wikipedia.org/wiki/Non-Engli

Update

From here on this article has been updated after Russell Baldwin made a valid point in a comment on Kirby's site here. The previous version was more of an example to show the foreign quotes, not something really usable in real documents.

This article was updated on 31 January 2013

The point Russell made is this: if your page or site's main language is English, the quote signs should be those for English – even when the quote is in French.

I am not sure yet what happens when you have a second-level quote in a different language. Does it use the quote signs of the document language? Is it a use case that makes sense or should one provide a translation of the foreign quote?

Example

<html lang="en">

Here’s the CSS part that is still the same:

blockquote, q {
    quotes: none;
}
q:before, blockquote:before {
    content: open-quote;
}
blockquote:before {
    margin-left: -0.5em;
}
q:after, blockquote:after {
    content: close-quote;
}

Specify the default quote signs for the default language. British English in this example.

q, blockquote { quotes: "‘\2009" "\2009’" '“\2009' '\2009”' }

If your page or site is in French, this would be:

q, blockquote { quotes: "«\2009" "\2009»" '‹\2009' '\2009›' }

Or if your site is multilingual you could specify all of them:

/* Specify pairs of quotes for two levels in multiple languages */

html:lang(en) q, html:lang(en) blockquote { quotes: "‘\2009" "\2009’" '“\2009' '\2009”' }
html:lang(en-us) q, html:lang(en-us) blockquote,
html:lang(th) q, html:lang(th) blockquote { quotes: '“\2009' '\2009”' "‘\2009" "\2009’" }
html:lang(de) q, html:lang(de) blockquote { quotes: "„\2009" "\2009“" '‚\2009' '\2009‘' }
html:lang(fr) q, html:lang(fr) blockquote { quotes: "«\2009" "\2009»" '‹\2009' '\2009›' }
html:lang(nl) q, html:lang(nl) blockquote { quotes: '“\2009' '\2009”' "‘\2009" "\2009’" }
html:lang(hu) q, html:lang(hu) blockquote { quotes: "„\2009" "\2009“" '»\2009' '\2009«' }
html:lang(jp) q, html:lang(jp) blockquote { quotes: "「\2009" "\2009」" '『\2009' '\2009』' }

In order to still show examples of foreign quote signs I added CSS that overrides the previous rules. On a normal page all these would have the English quote signs.


Here are a few quotes in different languages. If you know of better quotes for any of these languages or for Hungarian or Japanese, please let me know at info@nirusu.me

As long as the tools that are available to us enable us to make something that satisfies us, we’ll use it no matter how imperfect it is

Arnold Newmann – Photographer

Ohne Aufopferung läßt sich keine Freundschaft denken

Goethe

Les vrais paradis sont les paradis qu’on a perdus.

Proust

กรรมใดใครก่อ กรรมนั้นย่อมสนอง