An exploratory weblog, by

Hypsometry.

VIII.

HTML5 and Safari Reader.

As you know, Safari 5 came out last week. Two of its best features are the Safari Reader and much improved support for HTML5.

Reader you know about. You might not know, however, that Safari 5 now outscores all other browsers on the HTML5 test. That’s exciting. It’s not complete support, but it’s a lot of the essentials. And, after all, the spec itself isn’t even complete yet.

Another thing you might not know is that I’m working almost exclusively in HTML5 these days. If there’s a reason not to use it, I’m not; but it’s my default and my preference. That means that my photography portfolio site – Hypsography – is all HTML5 under the surface. And that, in turn, means that the news articles I write for Hypsography make appropriate use of the article element, along with many other semantic elements. One <article> equals one article. Simple and clear.

Let’s review what Apple says about Safari Reader:

As you browse the web, Safari detects if you’re on a web page with an article. Click the Reader icon in the Smart Address Field, and the article appears instantly in one continuous, clutter-free view. You see every page of the article — whether two or twenty.

Totally. And it works really well, at least when you’re reading the Times. When you’re reading Hypsography, however, it works a little less well:

That’s not ideal. The ice photograph that’s intruding in the middle of the text is enclosed in an aside, which should be considered “tangentially related to the content around” it, but Safari apparently doesn’t get that. But at least it’s readable, somewhat. And, looking under the surface with the Web Inspector, this misinterpretation looks fixable via CSS.

What’s worse is what happens when you scroll to the end of the article:

Safari has decided that the article ends there. Arbitrarily decided, it seems, since the article does not end there. In fact, of the five sections into which that article – An end of the year review, inspired by Mr. Dalton Rooney – is divided, Safari has chosen to include only two of them. The first and the third sections. Naturally.

Let me clarify this a smidge more: The five sections into which this article is divided are delineated by section tags, all of which are contained with the one parent article. This is semantic, this is simple, and this is clear. You might figure it’d be easy too.

Oh well.

If anybody out there has an understanding of what precisely Safari Reader looks for in an article, please let me know. Thanks, and good luck.