Building a Browser

WARNING: This blog entry was imported from my old blog on blogs.sun.com (which used different blogging software), so formatting and links may not be correct.

My biggest challenge is to make the Creator page designer properly display "real" web pages, and more importantly, display them the way browsers do. It should be simple, right? I thought I'd start with the Google page -- that's a very small, simple HTML page. But even that page exposed a problem in the designer: it surrounds its main table with a <center> tag (an inline tag containing a block tag, something which shouldn't be valid) - but browsers actually use this to not just center text via the CSS property text-align: center, they actually center block tag children like the table as well. Grrrrr... I'll have to work on that; looks like Mozilla is using clever vendor specific CSS properties to handle <center> right.

But I've spent some time the last couple of days trying to improve rendering of various pages. The Sun home page renders pretty well now as you can see from the screenshot on the left; my blog page does too (bottom right).

I'm definitely not done in this department. Various bugs in my handling of floating boxes means that the Amazon page (which relies heavily on them) looks terrible. I'll attack that next.

I spent some time trying to get the MSDN page to look okay. It looked terrible and I couldn't figure out why: all the fonts were microscopically small!! Turns out Microsoft were using percentages for the CSS font-size property, and not only that, if the page is rendered correctly (as in following the CSS standard) the fonts SHOULD be small. But they're relying on a quirks mode behavior (which Mozilla supports) where if a document doesn't specify a modern DOCTYPE, font size inheritance is turned off when you go through a table tag. I had a really hard time figuring this out, and in the end I resorted to using Mozilla's DOM inspector (I love that tool!) to compare notes for their computed effective styles and my effective styles, and that's when I discovered how CSS properties are inherited in quirks-mode processing of documents. In the end I decided not to worry about this (supporting quirks mode in the designer): we already require you to write XHTML compliant markup, so you should be relying on standard CSS handling.

P.S. Notice how in the third screenshot (you can click on the thumbnail images) the output window has opened and told me that my CSS property value for "font-weight", "medium", is not a valid value for font-weight. The intended value is "normal", not "medium". I hadn't noticed that until loading the page into Creator just now! I guess I should use Creator to edit my blog from now on... we just need to integrate Creator with Roller...