|go text: || - project - technical - [ examples ] - links -
||topics: || - horizontal - vertical - tabbed - multi section - [ printer style ] -

Printer-Friendly Layout Version

During recent developments I did create the magic option <!--mksite:printerfriendly--> (or select it on the commandline with `mksite.sh -print`). When selected the mksite.sh will use the sect/subsect information to create an alternative navigation site.print.htm file. This one places page references horizontally and per section.

The site.print.htm is actually an intermediate file used as the ~head~ for a cousin output file of your ~body~ - usually with a ".print.html" extension instead of the normal ".html" extension for formatted pages. The mksite.sh script has some additional "sed" that makes it so only those simplified navigation bars are visible that correspond to the current printer-friendly page.

The printer-friendly layout is all automatic and in parallel and not so much to be printer-friendly in fact. Instead it is targetted at text-mod readers and the "visually impaired" who may have a hard time to find the correct navigation controls when they are pushed all over the screen and its horizontal and vertical edges. There is even a special "WAI" w3c initiative to help spread awareness of the problem. This website has been of course layouted additionally in "-print" style, you can find a link on the side bar and under the tiny square image in the top left corner. (the "title=" should make for a little popup).

Note that with a text-mode browsers the alt="" will get visible - on the main html page saying "text mode version" and on the print-style version the first entry is named "go text:" jumping down to the main body area. Just imagine mobile phone with an html browser (or via web proxy) that can only show a few words at a time on the screen. That's almost similar to the linear way to read a text as is done by blind people using a text-to-speech engine.

  <html><head><title>common title prefix <!--$title?--></title>
  <style>
   a:link          { text-decoration : none ; color : #000080 ; }
   a:visited       { text-decoration : none ; color : #200060 ; }
   body            { background-color : white ; }
   .body           { background-color : white ; }
   .navtable       { background-color : #E0F0FF ; }
   .navsect        { background-color : #F8F8FF ; }
   .navlist        { width : 9em ; volume : soft ; }
   .navprint       { pause-after : 200ms ; speak : spell-out ; }
   H3              { text-align : right ; }
  </style>
  </head><body>
  
  <table cellspacing="0" cellpadding="4" width="100%" class="navtable"><tr>
  <td class="navsect" align="center"><a href="site.html"><b><!--$selected--></b></a></td>
  <td class="navsect" align="center"><a href="index.html">Overview</a></td>
  <td class="navsect" align="center"><a href="examples.html">Examples</a></td>
  </tr><tr> <td rowspan="2" class="navprint">
  <!--mksite:printerfriendly-->
  <a href="${printerfriendly:=site.htm}" title="printer friendly version">
  <img alt="printer / text mode version" width="8" height="8" border="0" /></a>     
  </td><td               colspan="2"></td></tr>
  <tr><td class="body"   colspan="2"></td></tr>

  <tr valign="top"><td class="navlist">       <!--mksite:multi-->
  <center><b>Example</b></center>
  <hr><a href="index.html">Overview</a>
  <br>-<a href="intro.html">Introduction</a>
  <br>-<a href="where.html">Related Work</a>
  <hr><a href="examples.html">Examples</a>
  <br>-<a href="loremipsum.html">Lorem Ipsum</a>
  <br>-<a href="nietzsche.html">Nietzsche</a>
      <hr><a href="impressum.html">Impressum</a>
  <br><a href="site.html">sitemap</a>
  </td><td class="body"  colspan="2">

  </td></tr></table></body></html>
- common title prefix - lorem ipsum -