Bug 3234 – CSS2: Implement better quote support (for the q tag)

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Dave Hyatt]

1. When the <q> tag is used, Safari attempts to put quotes around the text. Unfortunately, it uses hash 
(') and double-hash (") marks instead of real quotes.

2. Safari should detect the language of the html block (like if the lang attribute is used in a containing 
tag) and use the linguistically correct quotes. However, it does not.

3. Safari does not appear to recognize the quotes selector. For example, the following has no effect on 
a Norwegian html page:

Q:lang(no) { quotes: "«" "»" "<" ">" }

In contrast, Gecko-based browsers and Opera have good quote support.

The full CSS 2 specification regarding quotes can be read here:
http://www.w3.org/TR/REC-CSS2/generate.html#quotes-specify

[Dave Hyatt]

Apple Bug: rdar://4119670/

[Nicholas Shanks]

Created attachment 2135 [details]
CSS implementation of quotes for q and blockquote>p+p+p+…

This is the same patch Alexander Clauss is using in iCab 3.0

[Dave Hyatt]

This would be good, but Safari doesn't support the :lang selector yet. :)

[Dave Hyatt]

:last-of-type is not supported either.

[Dave Hyatt]

Also don't recognize content: inhibit.  Is that CSS3?  I assume maybe it is.

[Nicholas Shanks]

Yeah, :empty, :last-of-type and content: inhibit; are CSS3, :lang() is CSS2. I've set a dependancy on bug 
3233 for this. Support for the quotes: "foo" "bar"; would be nice too :-)

A lame work-around is to use q[lang|="en"] instead of q:lang(en) but that isn't as good as it doesn't get 
inherited - the language attribute would have to be on the quote element itself, and be lang="en" rather 
than xml:lang="en" the [lang|=...] selector would also fail for Switzerland. I can supply an alternative patch 
using this instead of :lang() if you would prefer?

[Dave Hyatt]

A great first step might be to implement :lang support.  I think that's even more important than better 
quote handling. :)

[Nicholas Shanks]

I agree. Was this a request?
I'm not familiar with WebCore or WebKit, but I can look at it if you want. As it's 1:30am here I won't have 
anything before tomorrow your time.

[Dave Hyatt]

No rush.  I think having proper :lang support will open up multiple avenues for solving this (whether 
through a bunch of declarative CSS or just smarts in the C++ code that generates the quotes by 
examining the RenderStyle on an element).  It seems like a basic step to getting this right is to get :lang 
working.

[Alexey Proskuryakov]

Re: Russian data in the CSS implementation.

/* russian */
q:lang(ru)::before		{ content: "\00AB"; }
q:lang(ru)::after		{ content: "\00BB"; }
q:lang(ru) q::before	{ content: "\2039"; }
q:lang(ru) q::after		{ content: "\203A"; }

I've never seen U+2039 or U+203A used in Russian. Do I understand it correctly that q::before and q::
after are for nested quotes? Then, it should be 

q:lang(ru) q::before	{ content: "\201E"; }
q:lang(ru) q::after		{ content: "\201C"; }

See, for example, <http://www.artlebedev.ru/kovodstvo2/sections/104/> or <http://ru.wikipedia.org/
wiki/Кавычки>.

[Nicholas Shanks]

For those viewing this page in UTF-8, AP's second link was http://ru.wikipedia.org/wiki/Кавычки 
(Kav'chki)

[Alexey Proskuryakov]

*** Bug 10453 has been marked as a duplicate of this bug. ***

[Trevor Harmon]

When <q> elements are nested, the rendering of the marks changes from double-quotes to single-quotes (by default). The spec on this is here:

http://www.w3.org/TR/html4/struct/text.html#h-9.2.2.1

And an example can be found on section 2 of this page:

http://www.seomoz.org/blogdetail.php?ID=1282

WebKit incorrectly renders the inner marks as double-quotes. Confirmed on the r15924 build.

Note that I had filed this nested quote issue as a separate bug (bug 10453) because it wasn't mentioned in this one, which is too general and ambiguous anyway. (What does "better" mean?) Bugs reports should be as specific and as narrow as possible IMHO. However, it was marked as a duplicate of this one, so I'm adding the issue as a comment here.

[David Latapie]

I attach two additionnal test cases; one with UTF-8 characters and the other with Unicode values.

[David Latapie]

Created attachment 10823 [details]
Three-level deep quotation, in French.

 I only know the French typography rules so I had to do it in French

[David Latapie]

Created attachment 10824 [details]
Three-levels deep quotations. FR, Unicode

The same, with Unicode values.

[David Latapie]

Created attachment 12557 [details]
Three-levels deep quotations. FR, UTF-8, updated

This new version uses another sorting (1 /1 2 /2 3 /3 instead of 1 2 3 /1 /2 /3).

[Orlando Agostinho]

(In reply to comment #0)
> 1. When the <q> tag is used, Safari attempts to put quotes around the text.
> Unfortunately, it uses hash 
> (') and double-hash (") marks instead of real quotes.
> 
> 2. Safari should detect the language of the html block (like if the lang
> attribute is used in a containing 
> tag) and use the linguistically correct quotes. However, it does not.
> 
> 3. Safari does not appear to recognize the quotes selector. For example, the
> following has no effect on 
> a Norwegian html page:
> 
> Q:lang(no) { quotes: "«" "»" "<" ">" }
> 
> In contrast, Gecko-based browsers and Opera have good quote support.
> 
> The full CSS 2 specification regarding quotes can be read here:
> http://www.w3.org/TR/REC-CSS2/generate.html#quotes-specify
> 

Hi,

Everybody! I would like to help, but i'm newcomer, and i would like to know where is the code that process this? More, specically, where i need to look at?

I got the source code!

thanks!

[Eric Seidel (no email)]

:lang support is supposedly implemented (bug 3233 is closed) so it should be possible to make a patch for this now, no?

[Alexey Proskuryakov]

With bug 9454 still not fixed, the existing support for :lang is IMHO not very useful, unfortunately.

[Dave Hyatt]

Yes, although I don't want a giant CSS implementation.  This should be done in code.

[Vincent Ricard]

Created attachment 20368 [details]
Same patch with the correct using of css 'quotes'

This file is based on (and aims to replace) the 'CSS implementations of quotes'. Hence it provides nice default values for the quotes.
I replace the double quotes by single quotes to ease the integration in html4.css

[Jon@Chromium]

Also reported against Chromium, see http://code.google.com/p/chromium/issues/detail?id=4426

[Daniel Upstone]

This bug has still not been resolved and is a serious browser inconsistency issue for CSS2 implementation.
It may be worth noting that IE8 is the only browser to do this correctly (yes, you read that correctly). Firefox does render correctly, but c&p of the output shows that it's still using forced quotes on the q element rather than providing the rendered result or a no-generated-content result. Opera seems to have it's own issues (eg. a stray " sneaking in) but is otherwise fine. Webkit still lacks full support and renders incorrectly.

Test Case: http://www.zealous-studios.co.uk/content-quotes.xhtml
The test case shows the following issues.
1. quotes are not changing when nesting. This is because webkit has the defined the defaults in an incorrect way.
2. quotes are not effected by language. This is for the same reason as above.
3. *-quote values for the content property are still not supported (as shown in https://bugs.webkit.org/show_bug.cgi?id=6503). This breaks any attempt to correctly fix this bug with correct css defaults such as the attachment Vincent Richard provided. It also prevents designers from using the values to override the incorrect defaults in webkit.
4. The second issue creates the illusion of a lack of support for the quotes property on anything but blockquote and quote (CSS2 states it applies to all elements). Because of all of the above issues, correct support can't be tested easily.

Bug 6503 needs to be fixed first, then Vincent's patch applied for this bug.

[Oli Studholme]

Currently http://trac.webkit.org/browser/trunk/WebCore/css/html.css reads:

97 q:before {
98	    content: '"'
99	    /* FIXME: content: open-quote; */
100	}
101	
102	q:after {
103	    content: '"'
104	    /* FIXME: content: close-quote; */
105	}

Workaround for authors until this is fixed:
http://monc.se/kitchen/129/rendering-quotes-with-css

[Carol Szabo]

I am almost done working on a patch for this. My patch implements quotes similar to CSS 2.1 counters.
At this point I have the Qt implementation ready, I am working on updating project files for other ports to include the extra 2 files where I put the bulk of my implementation.

[Carol Szabo]

I am going to commit my patch proposal on 6503 since I find it more closely matching what I am trying to do.

[MetaEd]

This bug, as reported against Chromium (http://code.google.com/p/chromium/issues/detail?id=4426), has the following test case:

He said, <q>I said, 
<q>Meh.</q> And then I stopped.</q> And then he stopped.

Using this test case, I can no longer reproduce the problem in Chrome 16.0.899.0 dev-m.

[Elliott Sprehn]

Meta bug 92061 tracking the new quotes implementation is complete so this is resolved.

WebKit now support quotes, and has defaults for 148 languages.