Browsers and the HTML specification

We're all told that browsers differ in their interpretation and rendering of HTML but sometimes it's hard to find a simple concrete example. Recently I decided to remind myself of everything HTML has to offer and re-read the HTML 4 specification. The HTML 4 specification was published in 1999 so you'd think that all current modern browsers would support it fully, but you would be very wrong.

The example here uses the Q or quote element, a very simple HTML element designed to put quotation marks around text, here's the description from page 93 of the HTML 4 specification PDF:

"Visual user agents must ensure that the content of the Q element is rendered with delimiting quotation marks. Authors should not put quotation marks at the beginning and end of the content of a Q element."

Now I'll agree that the Q element isn't the most exciting in the world, but you'd think that because it's so simple, all browsers would have no trouble with it. What I found though was that none of the browsers where consistent in rendering the Q element correctly. As reference, for this experiment I was using the following Windows browsers:

Browser	Version
Internet Explorer	7.0.6001.1800
FireFox	2.0.0.14
Opera	9.63
Google Chrome	1.0.154.36

Simple Test

The first test was just a simple insertion of a Q element, for example <Q>This is a quote</Q>, the expected output is that the browser would render it as "This is a quote". The following shows the results :

Rendering of a simple Q element

Browser	Image of rendered text
Internet Explorer
FireFox
Opera
Google Chrome

As you can see, there are differences already, but almost all browsers render what we would expect, all except one, Internet Explorer. That isn't a mistake, IE really does just ignore the Q element and no amount of massaging could get it to work. Lets remember that the HTML 4 specification was published in 1999, and Internet explorer has had several versions since then, you'd think it would be able to render something as simple as a quotation mark. Anyway, lets move on to test two.

Embedded Quotations

The HTML 4 Specification makes it quite clear how browsers should render quotations within quotations:

"User agents should render quotation marks in a language-sensitive manner (see the lang attribute). Many languages adopt different quotation styles for outer and inner (nested) quotations, which should be respected by user-agents."

and the following statement

Since the language of both quotations is American English, user agents should render them appropriately, for example with single quote marks around the inner quotation and double quote marks around the outer quotation.

The following table shows how each browser handles this requirement of rendering the inner quotation marks correctly:

Rendering of inner and outer Q elements

Browser	Image of rendered text
Internet Explorer
FireFox
Opera
Google Chrome

Here we can see that not all browsers fare equally, and we can also see that the lazy Internet Explorer doesn't even attempt to render anything. The only browser that renders this text exactly as expected in the HTML 4 specification is FireFox, the rest use the same quotes for inner and outer quotation marks which is wrong.

Style Sheets

The final test uses the CSS2 quotes property in order to modify the quotes used and see how the browsers fare. The follwing is the CSS style we're going to use is here, and just so it doesn't effect all Q elements, it has an ID selector.

Q#QuoteTest { quotes: "«" "»" "<" ">" }

This example is taken direct from the CSS2 specification and specifies that << and >> should be used on outer quotes, and < and > should be used on inner quotes. The table shows the results.

Rendering of Q with quotes property

Browser	Image of rendered text
Internet Explorer
FireFox
Opera
Google Chrome

As usual IE didn't even bother to try, and strangely Chrome ignored the property all together. It's nice to see that FireFox and Opera did render the text exactly as the specification says

CSS before and after properties

Whilst we're on the subject of CSS selectors, it's probably worth just trying out the before and after CSS properties which the CSS2 specification suggests can be used on BlockQuote (the block element version of Q) to provide quotation marks. The actual CSS looks like this :

BlockQuote:before { content: open-quote }
BlockQuote:after { content: close-quote }

Rendering of BlockQuote with open-quote close-quote content

Browser	Image of rendered text
Internet Explorer
FireFox
Opera
Google Chrome

Here we can see that once again FireFox is the only browser to correctly render the text. Opera made a good stab and obviously recognised the open-quote, close-quote content properties, but was let down by the fact it doesn't change the inner quotes. Surprisingly Chrome doesn't appear to have recognised the open-quote, close-quote properties and not very surprisingly, IE ignored everything!

I did perform one other test to see if the browsers do actually support the before and after pseudo classes using the following rules:

BlockQuote#extraTest:before { content:"{"}
BlockQuote#extraTest:after { content:"}" }

Every browser correctly added { and } around the block quote, except one, yep Internet Explorer, the Web's most popular browser still refused follow any standard.

My aim here wasn't really to test the Quote capabilities of the browsers, but really to highlight how different each browser is with something as simple as adding quotation marks. If browsers can't even render something this simple consistently, what chance is there that they will all render much more complex things correctly? What IS surprising to me is that Internet Explorer is just so damn bad, it refuses to render elements that have been in the HTML specification for 9 years as well as any standard CSS rules.

If you want to see how your browser works with these tests, I've put my test page up here.