Language specific styling: quotation marks

Posted
June 10 2005

Cascading Style Sheets (css) provides a selector for language specific styling: [t]he language pseudo-class: :lang. In this article, which is the first in a series, I show some use case examples of how authors may use this tool to apply quotation marks to quotations on a language specific level.


Default

First of all, we need to specify that quotation marks are to be applied to all instances of the element q. Secondly, we need a fall-back mechanism for when an unspecified language is encountered by making QUOTATION MARK (U+0022) the default ... well ... quotation mark for first level quotations, and APOSTROPHE (U+0027) the quotation mark for nested quotations.

q {
	quotes: '"' '"' "'" "'"
}
q::before {
	open-quote
}
q::after {
	close-quote
}

Now for the language specific stuff...

Afrikaans, Dutch, and Polish

My native language [Dutch] -- aswell as Afrikaans, and Polish -- (often) use a DOUBLE LOW-9 QUOTATION MARK (U+201E), and a RIGHT DOUBLE QUOTATION MARK (U+201D) for first level quotations, and their singular equivalents (U+201A and U+2019) for nested quotations.

:lang(af), :lang(nl), :lang(pl) {
	quotes: '
ACJ

Comments

27 comments so far.

1/27

One note: the lower apostrophes etc. are incorrect in Dutch. It once was okay to do it like that, but right now only crappy newspapers and old people do it wrong ;) Officially, we're all supposed to use the upper, inward bound quotation marks.

Nice write-up though. I couldn't be assed to look all these conventions up myself ;)

Posted by: Rob Mientjes on June 13, 2005, at 03:49

2/27

Very nice article, thanks (we do need better typography on the web), and I'm sure it will be fine-tuned by silly comments like this one:

As far as I know, in French (fr-FR) there is no single chevron quotation. Double chevron is for normal quotation (kudos on the space thing BTW) but the nested quotation is the normal double-quotes (").

Which gives you :

q:lang(fr) {quotes:'\AB\A0' '\A0\BB' "\201C" "\201D";}

I am actually French (and I have read a book, once, almost from cover to cover).

Posted by: sg on June 30, 2005, at 02:46

3/27

Ah, thanks, S

Posted by: ACJ on June 30, 2005, at 08:40

4/27

Hello, very nice article. It is quite a strange rule you have here for Switzerland. I actually live in Switzerland and didn't notice this being very much used. On the other side I don't know much about typography so it is possible I just didn't notice. There are of course many french people living and working in the french part of Switzerland, many german in the german part, and so on, so we are quite influenced by other rules and habits.

Posted by: Nicolas Chachereau on July 1, 2005, at 17:16

5/27

As far as I am aware of de-CH uses the French quotation marks reversed like you have it for Danish and Croatian. At least this is said by the

Posted by: Christian Juner on July 10, 2005, at 10:15

6/27

I'd like to confirm Christian Juner's Statement (5/5). Just have to add this: Using the

Posted by: Boris on July 11, 2005, at 12:03

7/27

I guess there's a mistake here:

:lang(fr) { quotes: '\ab\2005' '\2005\ab' '\2039\2005' '\2005\203a' }

The second element should be \2005\bb, otherwise you're writing two

Posted by: Fran�ois on July 22, 2005, at 12:56

8/27

You

Posted by: ACJ on July 22, 2005, at 19:01

9/27

About zooming, there's some interesting comments about line length and zooming over there:

http://www.simiandesign.com/blog-fu/2005/07/zoomingandlin.php

Posted by: Fran�ois on July 23, 2005, at 18:56

10/27

yes Francois it is good

Posted by: praca on August 12, 2006, at 07:46

11/27

Hello, very nice article. It is quite a strange rule you have here for Switzerland. There are of course many french people living and working in the french part of Switzerland, many german in the german part, and so on, so we are quite influenced by other rules and habits.

Posted by: Pozycjonowanie on October 22, 2006, at 13:29

12/27

Very nice article, thanks Francois!

Posted by: CYsterny on November 14, 2006, at 00:37

13/27

Thanks for your collection, it is an easy way to get an overview. Usefull for everyone who has to work around with different languages. Go on working in 2007 and all the best for you an your visitors here .

Posted by: Brautmode on January 3, 2007, at 17:56

14/27

very nice article. It is quite a strange rule you have here for Switzerland. I actually live in Switzerland and didn't notice this being very much used

Posted by: ???? on January 11, 2007, at 02:01

15/27

it`s very interesting

Posted by: auto gielda on January 16, 2007, at 23:10

16/27

Francois - Can I add link to this article on my site? In my opinion is very helpful article

Posted by: tanie linie lotnicze on February 19, 2007, at 14:31

17/27

A very helpful tutorial. Thanks for it.

Posted by: symantec news blog on April 9, 2007, at 14:57

18/27

Great and very helpfull article. But a point keeps me wondering. (Ortho)typography is a way of correctly formatting text according to a given language. Like it is told above, rules vary much. But typography is also a way of expression. A quick example : if I (was able to) read a german text, would'nt I expect to meet german quotation marks ? Typography, like syntax, grammar... reflects a way of thinking, expressing, telling ideas. And even local, country-dependant, particularities ? Caps for german nouns, reversed

Posted by: Julien on May 8, 2007, at 12:09

19/27

Hello, very nice article.

Posted by: nawadnianie on May 14, 2007, at 13:44

20/27

Good article

Posted by: budowa dom�w on May 29, 2007, at 13:05

21/27

I think there are typos in some CSS examples: In the very first CSS two closing }-s are missing. In the American English CSS the double quotation marks should come first.

BTW, I would be curious if in practice how safe it is to use these typographically correct characters. I mean, what are the chances that a visitor will see a little box or question mark in place of them. Especially if a page doesn't use the default serif or sans serif font.

Posted by: ddekany on May 31, 2007, at 10:31

22/27

Also, in the first CSS example again, it should be not ::before, but :before, and the same with ::after.

Also, it looks like IE 6 doesn't support the q element at all. It doesn't put quotation marks around it, not even if I use CSS like yours (q:before, etc). So it would be good to mention that in practice this q + CSS thing can't be used on Web pages.

Posted by: ddekany on May 31, 2007, at 10:56

23/27

yeah, i have been having problem with quotation marks since i remebmer. Thanks for some useful info

Posted by: Craig on June 5, 2007, at 23:19

24/27

Thank you very much for this clever tip!

Posted by: Ksi?gowy on July 2, 2007, at 19:37

25/27

ddekany: They

Posted by: ACJ on July 24, 2007, at 10:25

26/27

yoyoyoyoyoyoyooy

Posted by: bobby on October 14, 2008, at 01:11

27/27

I need a driver for my phillips snn6500 wireless netcard or smc2632 wireless net card. I can`t make them run on linpus linux lite.

Please help.

Regards, pextberrenBed

Posted by: Ceaxgyday on April 8, 2009, at 17:29

Comment

Identify
Remember Me?
Note
Markup allowed. Linebreaks and paragraphs are automatically converted. Email and ip addresses are logged but never shared with third parties. Comments are not moderated on opinion or use of language, but on relevance. I hate spam with a passion.