StretchText

I ran across the idea for StretchText from The New Media Reader excerpt on Computer Lib/Dream Machines by Ted Nelson.

Ted's StretchText idea allows a reader to adjust the "depth" of a piece of writing. It would a reader to control how much information is on screen as a complement to scrolling.

As you adjust the depth on a piece of text, or "stretch" it, more words appear in between the initial words to expand upon the ideas in the text.

I thought it would be fun to try and craft a piece of StretchText. The header to my site seemed like an easy place to start. 🙈

Hi, I make games and websites

Thoughts

Reader's controls

The controls for global depth don't really make sense in practice to me as a reader. I don't want to just broadly increase the depth of the entire section. I want to drill into specific topics I care about.

It's especially hard to follow when words show up in different places in the section at once. This feels like a roller coaster ride. Where is new stuff going to pop up next? 🤔

This sort of depth based stretching might make more sense if it only affected an area of text focused by the mouse for example. Then a reader would have more control over expanding only parts of the text that interested them.

Stretching and shrinking text is really fun though. I wonder about a simpler version of this with just a single shrink/stretch level that you use per topic. It could be a fun way to create an outline.

Some of the other stretch text related ideas in this post seem interesting as well. They offer the reader a lot more control than a global depth gauge. Ideas like killing specific nodes or expanding others from a seed into a full idea.

Authoring the text

I found it really challenging to choose when to expand each section of text as an author.

It makes sense that each depth level should expand on my background. So, I expanded a broad overview of various topics first. But, then I wanted to drill into each of those topics. So I added expansions to those sections in the next depth layers.

So, now the expansion jumps back up and down the text and it feels hard to follow. I originally wrote several more short paragraphs that I cut because this already started to feel unwieldy.

Authoring ergonomics

I just wanted to focus on the user experience for this test. How does it feel to read StretchText? But I was surprised how confusing it was trying to keep this small amount of text making sense in my head.

This is a snippet from the StretchText above. I used React components for this since my site is already React-based.

<StretchText.Item level={1}>or TypeScript</StretchText.Item>
<StretchText.Item level={3}>
{" "}on new projects these days.
</StretchText.Item>
<StretchText.Item level={3}>
{" "}I've worked with a bunch of different front end tech like Next.js, Storybook, Electron, Phaser,
</StretchText.Item>
<StretchText.Item level={0}> and React</StretchText.Item>
<StretchText.Item level={2}>.</StretchText.Item>

The level prop on each item controls at which level of depth the text will be shown. I authored the full text linearly in my notes and sliced it up into this structure.

This is obviously a pretty confusing way to write. You cannot read the React components above and easily picture the output text at different levels. Or at least I could not!

This article has some better ideas about what authoring might look like, but I didn't want to implement for my mock up. I do think this would have been a lot easier to work with though.

Kill text {and grow text} can make reading easier

I am still curious how it would feel with the nested blocks though. It felt really challenging to write many levels of nested content. Writing smaller thoughts that can be meaningfully expanded into longer thoughts without just adding fluff feels really tricky!

Extra jank

I also had to add some extra jank stuff if I wanted to make existing components of the text change. This hideAt prop got the job done, but was not very elegant to author with.

<StretchText.Item level={4}>I'm u</StretchText.Item>
<StretchText.Item hideAt={4} level={0}>
U
</StretchText.Item>
<StretchText.Item level={0}>sually</StretchText.Item>
<StretchText.Item level={4}>
{" "}working on web apps with complex front ends professionally.
</StretchText.Item>

This is the ugly code needed to allow Usually to be lowercased to usually as the text stretches. So, at depth level `4` we hide the uppercase U and show the lowercase I'm u instead.

I think you might just have to let go of this sort of thing if you were going to author a lot of StretchText. I wanted to expand one line of text into many paragraphs though, and there were many cases of this sort of sleight of hand.