Home | Show TOC | Add to Favorites

Expandable "Treeview" Table Of Contents

You can quite easily implement a hierarchical table of contents type of navigation using HTML and hyperlinks. Each level has to be generated with hyperlinks pointing to the upper level and to each child level.
The parent level name can be displayed with a hyperlink to go up and "close" the current level. 

Recommendations : 

• Use clickable images to give visual indications about the item type (a node, a main level or a leaf item). You can simulate in this way a standard Windows treeview control
• Use <mbp:pagebreak> tags to page break between the different levels
• Display only one level of hierarchy at a time with only one indentation level (use blockquote or simple &nbsp;), because of the small width of PDA screens.
• Force left alignment for labels in the TOC (instead of the Reader defaut full justify alignment) for a better visual rendering on small screens.

How to generate it : From an XML description of the TOC, an XSL file can be written to automatically generate the hyperlinked TOC in HTML.

Navigation between articles and TOC

Inside an article, it is recommended to display in a top frame the sequence of all parent levels separated by a > sign to indicate the absolute position of an article in the content (similar to what one can find on the Yahoo Web site for displaying the categories for example).
Each level is an hyperlink, pointing to the corresponding part in the TOC. This way, the navigation back and forth between the content itself and the table of content is very easy.

Navigation within an article

If the article is too long, it is recommended to break it into multiple sub sections, separated by a horizontal rule and a <mpb:pagebreak/>.

On the main article page, two navigation options are possible for an easy access to the subsections :

• Use a simple list of hyperlinks ( a sub table of contents for the sections, with an optional image icon)
• Use a top frame with a combo box containing the sub sections. Next /previous subsection buttons can also be displayed.

If a list of hyperlinks is used, each section title must contain a link to this main article page to access other sub sections.

 Implementing Tabs

Tabs can be implemented using HTML standard tags to simulate the Windows tab control. A selected tab item can have a bolder font or be in a different tab color to indicate that it is selected. Other tab items simply have clickable hyperlinks and point to the corresponding page.
It is not recommended (for performance issues) to use tables to display the different tab items, but to simply use a list of span tags with different background colors.

These tabs can be placed in a top slave frame if they have to remain visible when the user turns to the next/previous page.

Use of Color for Headings

You can use both font color and background colors (inside a div tag for example) to have a nicer rendering of titles or headlines. 

<div bgcolor="gray"><span color="white">My Heading</span></div>

<div bgcolor="#CCCCCC"><span color="#FFFFFF">My Heading</span></div>

Boxes & Important information display

Use a <div> tag with e.g. a light red background color and a border="1" attribute to highlight a paragraph.

<div border="1">Boxed text</div>

You can also use a small visual indication (image icon) at the beginning of the paragraph.

Display Tooltips

It is recommended to use tooltips to give access to non important information and better utilize the small PDA screen.

Two options are available : either place the note content in a separate HTML section and add a hyperlink to the note in the main HTML content, so that the user can easily access the more detailed information, or if the information to be displayed is very simple and short (with no HTML formatting), use a tooptip window.

There are several ways to implement tooltips in HTML.

• The first option is to use the title attribute in a span tag. Clicking on text inside the span tag will display the tooltip. The drawback is that it is sometimes not obvious to the end user that he can click on the tag to display the tooltip, unless there is some text or image indication about this. Use for example an underline and hyperlink blue color to simulate a hyperlink.
  
  <span title="text of my tooltip, can not contain any tags" color="#000080"><u>Click here to display tooltip</u></span>
  
  
• The second option is the use the standard Javascript alert function : 
  
  <a onclick="alert('some tooltip text')">....</a>

Note :

• Tooltips can only display raw text (non formatted). No formatting tags can be used.
• There is no way to specify a carriage or line return.
• Tooltip background color & position cannot be changed.
• If the content to be displayed does not fit the screen, only the beginning of the text is displayed, with a visual indication that there is too much text ....

 Implementing Footnotes, and captions

Footnotes and captions can be implemented using tooltips (see tooltip section). A small icon or image, or hyperlink text can be used to indicate that the user can click to display the footnote or caption in a tooltip.

In case the footnote contains too much text or needs specific formating (like hyperlinks for example), the tooltip window is not suitable. Use a standard hyperlink pointing to a footnote section in the HTML content, with a Back hyperlink to return to the main content flow.

Decision Tree

It is easy to implement decision trees using a set of generated hyperlinked HTML pages, evetually combined with form widgets (see javascript).

It is recommended to displayed at each step the current status as step index.

Gold Letters

Can be implemented using the <font> tag specifying a different font size for the first letter.

Poetry alignment

The Reader includes support of alignment for lines of verse in poetry : <p align="poetry">To be or not to be..</p>

If the text of the verse runs on more than one line, the subsequent lines are displayed with right alignment.