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?
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.
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
<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.