As a writer, I often struggle with whether to write a tutorial or document to beginners or experts. What if there's some interesting tangent that some readers might find informative but others want to ignore? What if you want to drill down deeply into a subject while just skimming the surface in other areas?
Digital screens can accordion open and closed and change their shape depending on the needs of the reader.
Traditional paper forces writing to be static and fixed: either you target beginners or experts. You can't provide tangents that readers can choose to follow or not. The reader and writer are both stuck in a single gear-shift.
Web pages are not paper and shouldn't mindlessly mimic dead pulp. Digital screens can accordion open and closed and change their shape depending on the needs of the reader.
I've created an implementation of Stretchtext in JavaScript which gets around these problems. You can mix in bits of Stretchtext into your page to allow readers to drill down into specific areas based on their interests and background. Whenever you see a dashed box around text, a reader can click it to open that area up and get more info; more importantly, these can be nested, so a reader can drill down to their heart's content. For example, learn more about the history of Stretchtext.
Stretchtext was invented by Ted Nelson, the co-inventor of hypertext, in 1967. See Ted Nelson's original Stretchtext writing in 1967
Stretchtext is an extremely simple but powerful form of hypertext. It is probably the easiest possible hypertext to understand. It would be hard for a reader of stretchtext to become confused.
Stretchtext consists of ordinary continuous text which can be "stretched", or made longer and more detailed. By pointing at specific areas and pulling the throttle in the "magnify" direction, the reader may obtain a greater detail on a specific subject, or area of the text. The text stretches, becoming longer, with replacement phrases, new details and additional clauses popping into place.
The good of this structure should be evident. The reader remains oriented. If he loses track of where he is, he "shrinks" the text to a higher, shorter level; if he wants to study a topic in more detail, he magnifies it.
An important editorial constraint on stretchtext, then, is that details and narrative arrangements must remain fixed in their relative order through different levels of stretchtext. However, in one respect it appears to be easier to write than ordinary text: rather than deciding what details to "put in" and "leave out," the author merely assigns altitudes (or "fineness"?) to topics and details, thus determining at how great a magnification they will be seen.
High performance dynamic consoles may be preferable for stretchtext, but ways are possible to present it on a static display-- if the display can support a moving cursor and a user pointing device.
Editorially, the stretchtext is (1) always the same unit, and (2) always a continuous narrative. Thus it is unlike hypertexts with discrete chunks and breaks.
The project is hosted on GitHub and is open source under the Apache 2 License. Simply grab the JavaScript and CSS files and drop them into your web page.
Stretchtext consists of two parts: the summary, which is what will show inside the dashed box, and the detail, which is what will show when the summary is clicked and expanded. You specify both by mixing in epub-type (why epub-typeSeveral reasons. First, I think this feature should get folded into ePub so that it can show up in reading systems; I think it would be perfect for long form content, and this blog is all about exploring new directions for next generation eBooks. Second, I think the IDPF should have used epub-type instead of using the epub namespace, since tag soup HTML5 has thrown away XML namespaces and XML namespaces are very problematicTag soup HTML5 simply doesn't parse them, for starters; in addition, things like querySelector don't support namespaces at all in HTML; they should have followed ARIA's example, which uses aria-.) or using special CSS classes (what classesYou can use stretchsummary and stretchdetail Example):
<p data-uuid="d321241819d2492d9869a11e39937515">
There once was a <span epub-type="stretchsummary">girl</span><span epub-type="stretchdetail"> Her name was Nancy</span>
</p>In the sample above, the stretchsummary girl is followed by the stretchdetail that will be shown when it is opened up, Her name was Nancy.
<p data-uuid="d321241819d2492d9869a11e39937515">
There once was a <span class="stretchsummary">girl</span><span class="stretchdetail">Her name was Nancy</span>
</p>This is good for creating inline stretchtext. However, sometimes you want the summary to be inline while the details should show an entirely new block. You can achieve this by using a hyperlink for the summary, pointing to a details that is somewhere else.
Here's an example first, followed by the code to achieve this.
Most scientists accept global warming.
Note how in the sample code that stretchtext is arbitrarily nested; you can nest these things however you want. I've also bolded the <a> tag summary and its details:
<p>Most scientists accept <a href="#global-warming-details" epub-type="stretchsummary">global warming</a>.</p>
<aside id="global-warming-details" epub-type="stretchdetail">
<p>More details on global warming. <a epub-type="stretchsummary" href="#evenmore">More supporting evidence</a></p>
<ol id="evenmore" epub-type="stretchdetail">
<li>Greater degrees of CO<sub>2</sub></li>
<li>Evidence of warming <span epub-type="stretchsummary">trend</span><span epub-type="stretchdetail"> It's the truth -- accept it!</span>.</li>
</ol>
</aside>Subscribe to my RSS feed and follow me on Twitter to stay up to date on new posts.
Please note that this is my personal blog — the views expressed on these pages are mine alone and not those of my employer.