Back in October I posted an article on our first steps with HTML5. Unfortunately, since then we’ve tripped over a rather large stumbling block.

That article dealt with the reworking of our intranet. Luckily for me as a front-end developer no-one in the company uses Internet Explorer; this isn’t the case in the wider world. IE has problems with the new HTML5 elements: it can’t style them at all. There is a a solution though (courtesy of Sjoerd Visscher): create each element once using Javascript and IE suddenly understands that they exist. On the whole this is a very good solution, undercut by one fatal flaw.

Print stylesheets

At Kyan we view a print stylesheet as a common courtesy to users. With it we can strip out headers and footers and just leave the page content. While printing though (for obvious reasons) Javascript isn’t executed. This breaks our html5shiv script and means that the new elements are unstylable in all current versions of IE.

The workaround is to wrap all the new elements in wrapper <div>s and style those instead, but then you’re increasing the amount of markup compared to current HTML4 or XHTML1, and for the time being this isn’t really a tradeoff worth making. Of course, with the gradual reduction of IE in the marketplace this tradeoff is something we should keep on evaluating.

OK, this may sound a bit funny and it may be considered over-attention to detail, but it can really spoil a design and potentially hamper reading when a headline doesn’t quite fit on a single line and leaves you with one word hanging underneath. That’s what we mean by a 'widow'.

This is particularly relevant to newspaper sites or blogs where the headline may form a central feature to the look of a whole page. It’s not just headlines though, even in body copy widows are generally considered poor style and should be avoided. But how to control them in a content-managed site? Luckily for those of us that worry about such things there’s Widon’t.

Read on...