Rendering Quotes With CSS

57 comments so far | Add yours Digg del.icio.us

The W3C recommends that visual user agents render quotation marks according to the specified language attribute, since many languages adopt different styles for quotations. Yet no user agent I have tried will render quotations in a language-specific manner in their default style sheet. Let’s change that.

When building tripoli, one of the goals was to ensure language-specific quotation marks through CSS. But that turned out to be a difficult task to achieve, since many user agents either simply ignore the specs or make up their own way of rendering quotes. Even so called “modern” browsers like safari.

The correct way

CSS 2.1 includes a property called quotes. The quotes property specifies quotation marks for any number of embedded quotations. It’s a tricky property, so before continuing make sure you read the entire section at W3C and understand how the content property defines what type of marks to produce and the quotes property how they will look.

The HTML

Before getting on with the CSS, let’s start with some basic HTML for testing purposes:

  1. <p><q>Generic quote and <q>another quote</q> inside</q></p>
  2. <p lang="sv"><q>Swedish quote and <q>another quote</q> inside</q></p>
  3. <p lang="da"><q>Danish quote and <q>another quote</q> inside</q></p>
  4. <p><q lang="sv">Swedish quote and <q>another quote</q> inside with the lang attribute set in the parent <code><q></code> tag</q></p>
  5. <blockquote><p>This is a generic paragraph with a <q>quote element</q> inside a blockquote</p></blockquote>
  6. <div lang="sv"><blockquote><p>This is a swedish paragraph with a <q>quote element</q> inside a blockquote</p></blockquote></div>
  7. <div lang="da"><blockquote><p>This is a danish paragraph with a <q>quote element</q> inside a blockquote</p></blockquote></div>

All set. Now try rendering that in a user agent without any quotation CSS applied: Example 1

Judging from the results, we can make the following conclusions:

  • IE 6 and 7 simply ignores the quotes, no matter what. Probably due to that they do not understand the :before and :after selectors.
  • Opera, Safari 2 and Safari 3 render default double quotes (0022) in all languages, even for nested or inner quotes.
  • Firefox and other gecko browsers render correct US-EN quotes for all languages, regardless of the lang attribute.

Internet Explorer will be ignored from now on since they require a javascript to dynamically insert quotes. Instead, let’s focus on the “modern” browsers who supports proper CSS.

The CSS

W3C recommends the following CSS code to correctly render language-spceific quotations, in this example we focus on the danish and swedish quotes:

  1. :lang(sv) { quotes: '\201D' '\201D' '\2019' '\2019'; }
  2. :lang(da) { quotes: '\00BB' '\00AB' '\203A' '\2039'; }
  3. q:before { content: open-quote; }
  4. q:after { content: close-quote; }

Note: I used some ISO 10646 quotation mark characters for rendering.

Very well, let’s try that in your browser suite: Example 2. By looking at the results we can make the following conclusions:

  • Firefox now render language-specific quotations where specified and defaults US-EN quotations elsewhere
  • Opera also render correct quotations where specified but resorts to double quotes (0022) elsewhere
  • Safari 2 and 3 is unchanged since the quotes property is unsupported

The Safari Problem

Why is safari not following standards? Besides officially not supporting the quotes property, it is also worth taking a look inside the default style sheets when it comes to quotations. Opera and Firefox have the following rules:

  1. q:before { content: open-quote; }
  2. q:after { content: close-quote; }

… which is good enough, while safari has this:

  1. q:before { content: '"' /* FIXME: content: open-quote; */ }
  2. q:after { content: '"' /* FIXME: content: close-quote; */ }

My point exactly, FIX ME!. Obviously not yet.

Cross-browser Consistency

Let’s start with fixing Opera’s default quotes by adding the following CSS rule:

  1. q { quotes: '\201C' '\201D' '\2018' '\2019'; }

Ok, now Opera and Firefox gets it right. But what about Safari? Well, the problem is that Safari ignores the quotes property and manually inserts quotation marks via the :before and :after selectors. So we need to use them as well. But we cannot simply define generic quotes by using something like q:before { content: "\201C"; } for safari, since they will override the language-specific quotes properties in firefox. Instead, let’s try this CSS code:

  1. *[lang~='da'] q:before, q[lang~='da']:before { content: '\201E'; }
  2. *[lang~='da'] q:after, q[lang~='da']:after { content: '\201C'; }
  3. *[lang~='da'] q q:before, q[lang~='da'] q:before { content: '\2019'; }
  4. *[lang~='da'] q q:after, q[lang~='da'] q:after { content: '\2019'; }
  5. *[lang~='sv'] q:before, q[lang~='sv']:before { content: '\201D'; }
  6. *[lang~='sv'] q:after, q[lang~='sv']:after { content: '\201D'; }
  7. *[lang~='sv'] q q:before, q[lang~='sv'] q:before { content: '\2019'; }
  8. *[lang~='sv'] q q:after, q[lang~='sv'] q:after { content: '\2019'; }

Since Safari has pretty good support for the attribute selector we can use the [lang~=val] selector to target any element with the lang attribute whose value is a whitespace-separated list of language. If Safari was following the specs it would be enough with one simple line to define language-specific quotes. Now we need four heavy lines for each language. Anyway, now we only have one more thing to do for Safari to get this perfect: add some nice generic quotes if no language is specified:

  1. q:before { content: '\201C'; }
  2. q:after { content: '\201D'; }
  3. q q:before { content: '\2018'; }
  4. q q:after { content: '\2019'; }

Here is how it looks now: Example 3

Now Opera, Safari and firefox render the quotations correctly. Please be aware of that the CSS above will override the quotes property defined for firefox earlier, so you could simply remove those if you like. But it might be a good idea to keep them as a reference to what should have been the correct way to render quotes. In Tripoli, I did not bother to render language-specific quotes for Safari since it would require a lot of redundant CSS code. Instead, I would recommend to stick to the actual language you will use for the specific project.

What about blockquotes?

There are several ways to add quotation marks to the blockquote element. But first we need to ask ourselves: Should we add quotations to blockquotes? This is what the specs say:

We recommend that style sheet implementations provide a mechanism for inserting quotation marks before and after a quotation delimited by BLOCKQUOTE in a manner appropriate to the current language context and the degree of nesting of quotations. However, as some authors have used BLOCKQUOTE merely as a mechanism to indent text, in order to preserve the intention of the authors, user agents should not insert quotation marks in the default style. The usage of BLOCKQUOTE to indent text is deprecated in favor of style sheets.

So, W3C recommends that we add quotation marks to the blockquote, as long as we use it in a correct way (not to indent text). So let’s find out how we can do this. One way is to add double quotes around any element that is the first descendants of the blockquote and then single quotes around any q element inside by using some fancy selectors:

  1. blockquote * { quotes: ''; }
  2. blockquote > *:before { content: '\201C'; }
  3. blockquote > *:after { content: '\201D'; }
  4. blockquote q:before { content: '\2018'; }
  5. blockquote q:after { content: '\2019'; }

This should work in all modern browsers, including safari. The code will insert quotes before and after any element that is a direct child of the blockquote and then single quotes around any q element that are descendants to the blockquote. The first rule is necessary to reset the quotes in firefox before inserting them.

Now we just have to make language specific blockquote quotations! I didn’t bother to do it for all languages but you can go here and check out the source code to get an idea about how it can be done.

Wrapping it up

I have collected all the CSS and HTML into a complete final example file (source) that you can use as a reference when creating quotes. I only added support for swedish and danish quotations besides the generic EN-US ones. The main problem as I can see it is that it requires a lot of code to get the quotes right, and then I haven’t even begun with Internet Explorer yet. So a general advice: stick to the actual language for the specific project and be aware of browser glitches. Quotation marks is probably one of the least developed areas in web typography, but it might add that little extra attention to details in your designs.

Links:

57 Responses so far. Add yours.

Permanent link At 3:15 pm on April 14th, 2008 , Search wrote:

I have found two interesting sources and would like to give the benefit of my experience to you.
I am tuning my pc by the best software for free, with the file search engine http://fileshunt.com and http://filesfinds.com . May be you have your own experience and could give some useful sites too. Because this two social sites help me much.

Permanent link At 9:03 pm on May 16th, 2008 , :-: S€zæR -> wrote:

css template page examples - - http://css-lessons.ucoz.com/css-template-page.htm

Permanent link At 4:31 pm on August 9th, 2008 , Fiyat wrote:

Fiyat say it thanks you very much.

Permanent link At 3:19 pm on September 30th, 2008 , Bert wrote:

According to the W3C html4 spec, the tag is NOT allowed inside a tag.
http://www.w3.org/TR/REC-html40/struct/text.html#edef-BLOCKQUOTE

So blockquote q {…} is not a valid css selector. Unless I am very much mistaken.

Permanent link At 3:21 pm on September 30th, 2008 , Bert wrote:

Sorry about that, something went wrong with my last comment. I meant to say that a Q cannot be inside a BLOCKQUOTE

Permanent link At 3:31 pm on September 30th, 2008 , david (author) wrote:

@Bert: the Q tag is allowed in a P tag. And the P tag is allowed in a BLOCKQUOTE tag (requires block-level as a first descendant).

Permanent link At 4:51 pm on September 30th, 2008 , Bert wrote:

Yes, my fault. I was confused with blockquote > p {..}
Sorry.

Permanent link At 4:52 pm on September 30th, 2008 , Bert wrote:

lol, it’s just not my day today… I mean blockquote > q {..}

Permanent link At 11:15 pm on October 28th, 2008 , Music wrote:

Nice
thanks very much

Permanent link At 5:06 pm on November 28th, 2008 , EVO Design wrote:

This is fantastically complex and fantastic at the same time…

Permanent link At 4:22 pm on March 10th, 2009 , Best Movies wrote:

Whatever you want to install using the World Web this recourse SharesDigger can help you to save your time and efforts. All my friends who used it confirm that here is the most handy navigation for productive work.

46 Trackbacks & Pings:

Permanent link Trackback at 11:02 am on August 24th, 2007 by Bram.us » Rendering Quotes With CSS:

[…] “The W3C recommends that visual user agents render quotation marks according to the specified languag…” Spread the word! […]

Permanent link Trackback at 11:44 pm on September 13th, 2007 by am Design » Baabelin kirjasto » Artikkelikatsaus: Elokuu 2007:

[…] kitchenin CSS-artikkeli Rendering Quotes With CSS tarttuu rohkeasti yhteen webtypografian infernaalisimmista piirteistä: lainausmerkkeihin. Paitsi […]

Permanent link Trackback at 11:54 am on November 12th, 2007 by Fatih Hayrioğlu’nun not defteri » Alıntı: blockquote ve q etiketleri:

[…] http://monc.se/kitchen/129/rendering-quotes-with-css […]

Permanent link Trackback at 10:17 pm on May 12th, 2008 by tripoly:

[…] […]

Permanent link Trackback at 5:55 pm on May 31st, 2008 by film series safari trackback from your own closed:

[…] 0022 in all …. May be you have your own experience and could give some useful sites too. …http://monc.se/kitchen/129/rendering-quotes-with-cssReclaiming The F Word: Film… Church, film Permalink Comments 2 trackback 0 … Click Below To Get […]

Permanent link Trackback at 11:18 am on June 21st, 2008 by tripoli css:

[…] called quotes. The quotes property specifies quotation marks for any number of embedded quotations.http://monc.se/kitchen/129/rendering-quotes-with-cssFull Page Zoom Is For SissiesMy team have employed tripoli css on a few sites, and have succesfully […]

Permanent link Trackback at 9:51 pm on April 10th, 2009 by Sunshocked » The feed-readers lament:

[…] stylesheet to wrap any quotes (<q>) with the right quotation marks. It’s not hard to empower the stylesheet for this task and it would provide genuine value to cultures that don’t use double-quotes. […]

Permanent link Trackback at 8:52 pm on April 26th, 2009 by jQuelements — fixing <q> for IE @ Jacob Rask ( . net ):

[…] default. Fixing this for Firefox and Opera is relatively straight forward with a little bit of CSS. David Hellsing wrote a good article on this, and how to get it to work in (older versions?) of Safari as well. […]

Permanent link Trackback at 5:43 pm on June 10th, 2009 by Links LI • Peter Kröner, Webdesigner & Frontendentwickler:

[…] Rendering Quotes With CSS – Passend zum voherigen Punkt hier die Anleitung zur Umsetzung mit […]

Permanent link Trackback at 4:43 pm on June 13th, 2009 by Technikwürze – Web Standards Podcast » Blog Archive » Technikwürze 137 – Microsoft und Google:

[…] Rendering Quotes with CSS (David’s Kitchen) […]

Permanent link Trackback at 9:54 am on June 23rd, 2009 by Fotografia Ślubna Dąbrowa Gónicza:

Fotografia Ślubna Dąbrowa Gónicza…

Its always nice to read Yours articles….

Permanent link Trackback at 2:50 pm on June 25th, 2009 by Alıntı: blockquote ve q etiketleri / Fatih Hayrioğlu’nun not defteri:

[…] http://monc.se/kitchen/129/rendering-quotes-with-css […]

Permanent link Trackback at 11:51 am on August 3rd, 2009 by Mastering CSS: Styling Design Elements | CSS | Smashing Magazine:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 11:51 am on August 3rd, 2009 by Mastering CSS: Styling Design Elements | CSS | Smashing Magazine:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 11:51 am on August 3rd, 2009 by Mastering CSS: Styling Design Elements | CSS | Smashing Magazine:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 12:44 pm on August 3rd, 2009 by Mastering CSS, Part 1: Styling Design Elements:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 3:04 pm on August 3rd, 2009 by Mastering CSS, Part 1: Styling Design Elements « Tech7.Net:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 3:24 pm on August 3rd, 2009 by Wordpress Blog Services - Mastering CSS, Part 1: Styling Design Elements:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 10:07 pm on August 3rd, 2009 by Rendering Quotes With CSS:

[…] View original post here: Rendering Quotes With CSS […]

Permanent link Trackback at 1:16 am on August 4th, 2009 by Mastering CSS, Part 1: Styling Design Elements - Programming Blog:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 1:16 am on August 4th, 2009 by Mastering CSS, Part 1: Styling Design Elements - Programming Blog:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 10:32 am on August 4th, 2009 by AMB Album » Mastering CSS, Part 1: Styling Design Elements:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 12:03 pm on August 4th, 2009 by Shopping Mall » Mastering CSS, Part 1: Styling Design Elements:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 6:26 am on August 6th, 2009 by Myfreepedia.com » Blog Archive » Mastering CSS, Part 1: Styling Design Elements:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 12:52 am on August 9th, 2009 by Advertisers Blog » Mastering CSS, Part 1: Styling Design Elements:

[…] Rendering Quotes With CSSA guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 1:51 pm on August 10th, 2009 by Mastering CSS, Part 1: Styling Design Elements | YABIBO.COM - YOUR WEB WORLD:

[…] Rendering Quotes With CSS A guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 1:33 pm on August 15th, 2009 by 精通 CSS 造型设计元素:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 11:37 am on September 6th, 2009 by » Mastering CSS, Part 1: Styling Design Elements endo – luxury coding:

[…] Rendering Quotes With CSS A guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 11:18 am on October 12th, 2009 by Korrekte Web-Typografie mit HTML:

[…] Typografische anführungszeichen mit CSS – Erlaubt ist was gefällt. […]

Permanent link Trackback at 9:31 pm on October 16th, 2009 by Aino | David’s kitchen:

[…] around here, like the lightweight image gallery, Scalable CSS buttons, cascading order in CSS and rendering quotes with CSS. They will still be here as an […]

Permanent link Trackback at 10:37 am on January 10th, 2010 by 精通CSS-1: 常用设计元素的高级CSS技巧 | 帕兰映像:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 8:05 am on January 12th, 2010 by 精通CSS造型设计元素:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 5:06 pm on January 18th, 2010 by 精通 CSS 样式设计元素 - 菠菜博:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 5:06 pm on January 18th, 2010 by 精通 CSS 样式设计元素 - 菠菜博:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 4:10 am on January 20th, 2010 by 精通 CSS 造型设计元素 Mastering CSS - E@生活在别处:

[…] 使用 CSS 的文字阴影属性结合 JavaScript 技术，来创建一个发光效果实例。 Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) […]

Permanent link Trackback at 11:08 am on January 23rd, 2010 by 精通 CSS 样式设计元素 - 木牛工作室:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 9:13 am on January 28th, 2010 by 精通 CSS 样式设计元素 « 前端设计:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 3:54 am on February 3rd, 2010 by Dream step » Blog Archive » 精通 CSS 样式设计元素:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 9:28 pm on March 1st, 2010 by 精通 CSS 样式设计元素- CSS 教程 | TechTrack- 科技追踪:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 1:21 am on March 26th, 2010 by Mastering CSS, Part 1: Styling Design Elements | Top Web Hosts Review Best Web Hosting 2010:

[…] Rendering Quotes With CSS A guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

Permanent link Trackback at 6:40 am on May 2nd, 2010 by 精通 CSS 造型设计元素 | 芒果:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 5:26 am on June 8th, 2010 by 常用设计元素的高级CSS技巧:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 5:27 pm on June 30th, 2010 by 精通 CSS 样式设计元素- CSS 教程 | TechTrack - 专注前端设计，分享科技资讯:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 7:08 am on July 12th, 2010 by Các kỹ thuật thiết kế CSS trong thiết kế web | VNWordPress.com:

[…] Rendering Quotes With CSS Hướng dẫn sử dụng dấu ngoặc kép trong CSS, bao gồm làm thế nào để tạo các quote tiêu chuẩn trong những lĩnh vực khác nhau […]

Permanent link Trackback at 11:46 am on July 12th, 2010 by 精通CSS造型设计元素前沿资料:

[…] Rendering Quotes With CSS 一份关于在 CSS 中使用引号 (quotes) 标记的指南，包括如何创建适合不同语种的标准引号。 […]

Permanent link Trackback at 8:23 pm on July 13th, 2010 by Master CSS Typography Techniques:

[…] Rendering Quotes With CSS A guide to using quotation marks in CSS, including how to create standard quotes for different countries. […]

This entry was posted on Tuesday, August 21st, 2007.

React

Categories

RSS Feeds

Bookmark

Translate

Recently Posted

Both comments and pings are currently closed.