From: W. Trevor King Date: Wed, 11 Jan 2012 19:02:44 +0000 (-0500) Subject: Add HTML5 outlines post. X-Git-Url: http://git.tremily.us/?a=commitdiff_plain;h=caf1ca3bbdcf0ac297dab9a599a608f36bd278f6;p=blog.git Add HTML5 outlines post. --- diff --git a/posts/HTML5_outlines.mdwn b/posts/HTML5_outlines.mdwn new file mode 100644 index 0000000..5d0c931 --- /dev/null +++ b/posts/HTML5_outlines.mdwn @@ -0,0 +1,68 @@ +[HTML5][] has a well-defined [outline algorithm][algo] (there's a nice +overview at [html5 doctor][html5doc]). Since browsers don't seem to +support an [outline view][view] yet, I decided to embed an +automatically-generated outline in a webpage using JavaScript. Thanks +to the [HTML5 outliner (h50) project][h5o], this is fairly +straightforward. However, I couldn't find an example on their site, +so here's a recipe to get you started. + +Download the outliner javascript: + + $ wget http://h5o.googlecode.com/files/outliner.0.5.0.62.js + +or get the most recent version from the [h5o download page][download]. +Then, start your page off with something like: + + + + + + + + +

PAGE TITLE

+ +

FIRST SECTION

+ +Important points: + +* The `

` section is populated using JavaScript. If JavaScript is + available, we get a nice table of contents. If JavaScript is not + available, we go right from the page header to the first content + section. +* The `

` title (`Table of Contents`) is hidden using CSS + (`display: none`), since its role is fairly obvious. However, if + you leave out the nav header entirely, the `

` entry the table + of contents will end up with an automatically generated title. For + [Firefox][] 8.0, that means `Untitled NAV`. +* The `

` title is inserted using [document.write][], so that + browsers which support neither JavaScript nor CSS (e.g. [w3m][])âand + therefore cannot generate the table of contentsâwill not display the + `Table of Contents` header. + +[HTML5]: http://dev.w3.org/html5/spec/ +[algo]: http://dev.w3.org/html5/spec/headings-and-sections.html#outlines +[html5doc]: http://html5doctor.com/outlines/ +[view]: http://www.w3.org/TR/2002/REC-UAAG10-20021217/guidelines#tech-provide-outline-view +[h5o]: http://code.google.com/p/h5o/ +[download]: http://code.google.com/p/h5o/downloads/list +[Firefox]: http://www.mozilla.org/en-US/firefox/new/ +[document.write]: http://dev.w3.org/html5/spec/dynamic-markup-insertion.html#document.write +[w3m]: http://w3m.sourceforge.net/ + +[[!tag tags/web]]