Stretchtext and Tinderbox

Saturday, February 7th, 2009

I’ve been bumming over things lately, springing from Yahoo’s javascript library (with Jim’s help), Actionscript 3.0, and a few other technologies to diddle with effects that appear to make sense in my poem “What I Saw on my Homeward Way.”

Moreover, completing the poem has been difficult as the “effects” I’m after are conceptually integrated into the poem’s structural narrative, meaning that how the text behaves on screen is tied to potential meaning. Additionally, I’m curious about how linking methods change the way a poet makes images.

I need Actionscript as a means of creating hypermedia interface, but this doesn’t mean I can make Actionscript do “whatever” I want it to. AS3 will allow for event manipulation of links but not for what I want at the moment. I use Tinderbox as my primary writing tool and so the work that I expect to pump out of Tinderbox should be effectuated in that medium.

Luckily, this weekend, I began digging around with jQuery. And things suddenly made sense. I’ve wanted to write link tools directly into a Tinderbox note that would translate onto the web via Tinderbox HTML templates. It’s a simple business. Write a document in Tinderbox, flush it through an existing HTML template, taking whatever information I want to display on the web, and then publish it. Just like that.

I have lots of experience with stylesheets and their logic. Once mastered, they’re powerful for thinking about interactions and relationships. In Tinderbox, therefore, if I could add a selector from a stylesheet directly into a note, this is a good thing, especially if the writer knows what they want the code to do with the target object. But what to do with the selector once it’s out of Tinderbox and on the web? Well, that’s where scripts come into the picture–at least for me. For many, this will be nothing knew, but for me it provides new creative paths for using Tinderbox.

In a Tinderbox note called “Stone,” for instance, I could add a tag around the word “stone,” like this <st>stone</st>, the “stone” element acting as a listener. In addition we add div code plus a class to indicate which part of the text we want to manipulate.   This text could be a paragraph division, a middle stanza, or an ending paragraph:

<div class=”stretchTarget”>some text</div>

The node logic goes like this in the HTML template:

<div id=”text”>The <st>stone</st>listens. <div class=”stretchTarget”>hidden text</div></div>

jQuery provides ready methods for moving through DOM elements and Tinderbox templates will render the above tags in the resultant HTML page no matter the size of the document. What’s required next is to write those tags into the linked css page as selectors:

#text st {
some code


.stretchTarget {
some code

All we have to do now is write the appropriate javascript inside the head tag of the HTML template to adjust or manipulate content. After the page has been readied, jQuery attached, we write:

the selector of the text we want to hide

$(‘#text st’).toggle();
the elements to read through to find the listener to which we can attach the target

Then we add two jQuery functions (they can be anon or named) inside toggle()

function() {

$(‘.stretchTarget’).fadeIn(); //or whatever other method is required, including animate() or show(), although next() would be inappropriate



And that’s basically it, thanks to the ready-baked jQuery methods. With jQuery and the css page attached, we can now easily blend stretch text functionality into Tinderbox directly by simply wrapping a listener with <st> and then wrapping target text inside a div and labeled appropriately with class=”stretchTarget”.

Thanks to Mark Bernstein for starter code and to James R for help with YUI.

Here’s a link to what the basic functionality looks like on a separate page: sonnet stretch.

The next quest will be to put together some methods for directly manipulating <a> items.

6 responses to “Stretchtext and Tinderbox”

  1. I’m a little worried about the tag.

    If one needs to get past a validator, and the validator won’t tolerate it, you could instead use




  2. I’m a little worried about the <st> tag.

    If one needs to get past a validator, and the validator won’t tolerate it, you could instead use

    <span class=”stretchtext”>…


    ^lt;a class=stretchtext”>….

  3. James Revillini says:

    Now I’m pissed because you’re making me want to switch to JQuery and I have SO MUCH CODE written for YUI. Sorry I don’t have much input … what you’ve done with so little code is awesome! I concur with Mark’s concern over using a proprietary tag. Not only will it not validate, but you could be looking at forward compatibility problems if, for example, JQuery starts doing a check to make sure the tag it searches for with the $() function is a true HTML element before it acts on it. These JS libs have been tested against HTML elements, not proprietary ones. Maybe Camino or Flock or Chrome will not even consider an ‘st’ tag in its DOM. Even if they do now, it’s not a safe bet for the future. So I would use [a class=”stretch-text-listener”]…[/a] around my listeners. Another interesting thing you can do if you use ‘a’ (link) tags is use the ‘rel’ attribute. ‘rel’ answers the question ‘relative to what?’ So you could have

    [a class=”stretch-text-listener”] rel=”one”]open first stretchy text[/a] … [a class=”stretch-text-listener”] rel=”two”]open second stretchy text[/a]

    Good work! Very promising. Tinderbox users are going to love this. I’m doing some work right now that maybe a Tinderbox-for-web clone could probably spring from. Keep in touch.

  4. Steve says:

    You all are of course right about the st tag. I’ve already switched back to the a in the closer to done prototype.

  5. jplum says:

    I like stretchtext, but before I take a closer look at your examples, could you say how it differs from the which I have in use.
    system? Is it smaller javascript, would you say? Anything else?