Screenshots Author Feedback Download latest now
This page demonstrates a novel way to display hypertext and view documents, and provides free code with which beginners can easily create such displays in HTML. (To try, click once to open each highlighted link below, and a second time to close).

NEW in version 1.1: PHP4 (".php"), and autoscrolling with Netscape6 and Opera

PHP Programmers' synopsis

Tree-Style Documents

  1. Introduction

    A typical document is structured heierarchically, with a main body, sections, sub-sections, footnotes, and so on--like a "tree," with a root, some branches, and many leaves. Yet we don't read it that way on the Web; instead, we typically read documents either as one big long page with numbered subsections, or as a collection of separate web pages, each one completely erasing the other when a link is selected.

    Why not read a document in its native form, as a tree? Directory trees, for example, are best viewed and navigated with "tree controls" (like the Windows Explorer): you see a vertical list of top-level directories, and opening one inserts its contents below and indented. Items there can themselves be clicked to open their contents in place, and so on all the way down, without ever hiding the top-level stuff you started with. Everything appears in place, and nothing gets erased.

    The TreeDoc system gives documents and pages that same nested, open-in-place behavior, like this. TreeDoc is a new way of displaying hypertext, related to the Fluid Documents project, which visually distinguishes in-place commentary by indentation, font face, and color, while using that common color to highlight both the keyword and commentary.

    For illustration, this TreeDoc documentation is in TreeDoc form, so you should click the links below to explore further...AND DON'T FORGET TO CLICK EACH ONE A SECOND TIME TO CLOSE!

  2. Why TreeDoc?

    Summary: TreeDoc helps relate a link's content to its context; it relates what's inside the link to what's outside the link.

    1. Easier navigation
    2. Keeping context
    3. Nesting
    4. Visual Trickery
  3. Disadvantages

    Summary: A badly-designed TreeDoc page can look funny and make things harder (rather than easier) to read.

    1. Over-decoration
    2. Broken context
    3. Speed
  4. How to write TreeDocs

    Summary: Just put a simple tag like <?inlink("tabText", "href.php"); ?> into your HTML pages wherever you want an folder-tab inlink, or even a whole row of them.

    PHP Server language the inlink() function The tabRow() function Passing variables Remote links Topmost pages

    Quick Reference

  5. How to install it

    Summary: Make sure PHP works on Apache (they are often pre-installed together), copy over one small TreeDoc file, and start writing.

    1. Installing PHP
    2. Getting the TreeDoc code
    3. Customizing
  6. Legal and personal information

    Summary: The software components are free and Open Source, but your documents are your own. And TreeDoc still needs work...

    1. Public License
    2. Author(s)
    3. Help!