project
- summary
- tutorial (2) (3)
(4) (5) (6) (7) (8) (9)
- usage (2)
technical
- reasoning
- two passes
- still tiny
- sitemaps
- variables
- accessibility
WAI SubSects
examples
- horizontal
- vertical
- tabbed (2)
- multi section
- printer style
links
- some hints
- faq&issues
- all features #
- about me
- our sitemap
- download
(C) 2004-04-24
Guido Draheim
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 | - |
| Lorem Ipsum | Overview | Examples |
|
| ||
|
Examples -Lorem Ipsum -Nietzsche Impressum sitemap |
Lorem Ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. | |