--- /dev/null
+[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:
+
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <script type="text/javascript" src="outliner.0.5.0.62.js"></script>
+ <script type="text/javascript">
+ var createLinks = true;
+ var init=function()
+ {
+ var outline = HTML5Outline(document.body);
+ var html = outline.asHTML(createLinks);
+ document.getElementById('nav').innerHTML = html;
+ }
+ </script>
+ </head>
+ <body id="body" onload="init();">
+ <header>
+ <h1>PAGE TITLE</h1>
+ <nav id="nav">
+ <script type="text/javascript">
+ document.write('<h2 style="display: none">Table of Contents</h2>')
+ </script>
+ </nav>
+ </header>
+
+ <h2 id="s1">FIRST SECTION</h2>
+
+Important points:
+
+* The `<nav>` 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 `<nav>` 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 `<nav>` entry the table
+ of contents will end up with an automatically generated title. For
+ [Firefox][] 8.0, that means `Untitled NAV`.
+* The `<nav>` 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]]
projects / blog.git / commitdiff