Hypermedia Production, Fall 1998
A Simple Method for Managing Stretchtext

The concept behind stretchtext is straightforward: write a text that is amenable to transformation: a story, a technical manual, a poem, etc. This is the text your reader will see in the initial state (when your page first loads). To this main text add annotations, digressions, contradictions, complications -- but enclose each bit of secondary material in <SPAN> containers set for no initial display. (Don't use the visibility property, as that will creeate awkward blank space in your layout.) For each non-displayed span, create at least one span somewhere, either in the main text or another secondary span, that will trigger display of the hidden span.

Here's an example of this simple stretchtext implementation from our demo page: 

    <p>
Your unit will give you 

<span onClick="stretcher(4)" style="color: CC0000">many hours</span>

<!-- I'm invisible! -->
<span id="insert4" style="display: none">
[no warranty, expressed or implied, is intended or established 
by the preceding approximation]</span>

of trouble-free use.
</p>

The first span you see here is the "trigger." As you can see, it has no ID attribute, since it is never referred to by name. Its onClick handler refers to a JavaScript routine that we'll discuss below. The color styling is optional. You could omit it if you wish, but remember that this will force your reader to guess about the location of trigger spans. On the other hand, if you wish to make your trigger spans very clear, you could use an ordinary link anchor tag -- in this case <A HREF="javascript: stretcher(4)">many hours</A>, though this might be confusing if your page contains link anchors that serve the traditional page-to-page function.

The span immediately following the trigger span is the hidden or insert material. It does not appear in the initial layout because its style attribute is set to no display. In this case the insert text is a parenthetical observation that follows immediately after the trigger phrase, but you could put the insert anywhere in your document. Likewise, the action triggered might affect more than a single insert, and it might even hide or modify text (in the latter case, with an innerHTML replacement) instead of or in addition to showing it.

Now all you need is the relevant part of a JavaScript function called stretcher(which). The line in question looks like this: 

    function stretcher(which)
	{
		...
		if(which==4) insert4.style.display="";
		...	
	}

The ellipses (...) in the above example indicate that there are other lines preceding and following this one. For the complete code, view the source for the demo page. The stretcher(which) function goes into a conventional <SCRIPT> container in the head of the document.

This is the simplest, "brute force" way to manage stretchtext. It has two limitations, both stemming from the fact that you have to write all the textual variations into one HTML file. This makes the markup even harder to read than usual, since it can involve spans embedded within spans whose effects may involve still other spans. Also, in the case of deeply complicated text, it might require a rather large file.

There are more elegant ways to do stretchtext, but these are best left for a separate explanation.