bblog beating the one-way web

So I’d like to put the correct typographical quote signs around my <q> tags. Of course, they depend on the language the quote is written in: English uses the double quotes “ and ”, while German uses double angles « and » (any others?).

The proper way to do this is the lang attribute, as in

<q lang="de">Dies ist ein Zitat<q>

This is easy to style in CSS 2 with a combination of the attribute selector and the pseudo :before and :after selectors:

/* German quotes get double angle quotes */
q[lang="de"]:before {
    content: "\AB";
}
q[lang="de"]:after {
    content: "\BB";
}

/* English quotes get double quote signs */
q[lang="en"]:before {
    content: "\201C";
}
q[lang="en"]:after {
    content: "\201D";
}

/* All quotes are in italic */
q {
    font-style: italic;
}

but this site is written in XHTML 1.1, which requires that I use the xml:lang attribute. How is a selector for a namespace attribute written? A little googling finds a CSS Namespace Enhancement proposal and a clear-text explanation by Anne van Kesteren.

The principle is simple: First you declare the used namespaces in the style sheet with a @namespace keyword:

@namespace url(http://www.w3.org/1999/xhtml); /* default namespace of XHTML */
@namespace xml url(http://www.w3.org/2002/xml); /* namespace of XML??? */

Then you can use these declared namespaces in your selectors like this:

/* english quotes get double quotation marks */
q[xml|lang="en"]:before {
    content: "\201C";
}

q[xml|lang="en"]:after {
    content: "\201D";
}

Note the xml| part in the attribute selector. The only remaining problem is that I don’t know the canonical URL of the implied xml namespace, and I can’t declare it in my web page. Plus the browsers don’t implement the namespace proposal yet, so I need another solution. Fortunately, the proposal itself mentions that

…the down-level client will view and match element type and attribute selectors based on their fully qualified name, not the local part as outlined in section 3.1. CSS selectors may be declared using an escaped colon “\:” to describe the fully qualified names, i.e. “html\:h1” will match <html:h1>. Selectors using the qualified name will only match XML elements that use the same prefix. Other namespace prefixes used in the XML that are mapped to the same URI will not match as expected unless additional CSS style rules are declared for them.

The xml namespace is always predeclared, so this last caveat doesn’t apply. My CSS finally looks like this:

/* english quotes get double quotation marks */
q[xml\:lang="en"]:before {
    content: "\201C";
}

q[xml\:lang="en"]:after {
    content: "\201D";
}

I’ll have time to look for the xml namespace URL until the browsers will implement this proposal…