I was reading through a blog a while back and came across a reference to a book called “Computer Lib” by Ted Nelson (Wikipedia here). He wrote it back in 1974, before the internet was really going, and is one of the people who invented the term “hypertext.”
But the article mentions another idea that never really caught on–that of “Stretchtext,” which would allow users to expand text and read more info, in a way that wouldn’t interfere with the flow. I imagine it kind of like collapsible details and summary boxes, only they’re inline instead of block-level elements.
I’m thinking about putting together a page that implements the idea using JS and basic HTML. What do you think about the concept? Does it seem like it would be useful? Do you think it’s better that it never caught on? Do you hate it?
I personally think that it makes perfect sense for footnotes–skipping to the bottom of the page (like on Wikipedia) is a holdover from print media, and disrupts the flow of reading for me.
Something that immediately came to mind is ravel by Everest Pipkin, which allows you to create nested detail/summary elements. I’ve seen it used for interactive fiction/games, although examples are currently eluding me.
I like this idea because it means you can get an explanation of an idea or concept without leaving the page or, if you don’t neeed it, interupting what you are reading.
One site that does this well is Wikipedia. They seem to use a mixture of text attributes and popup page previews.
That’s a really neat tool! I haven’t ever seen it, but it kind of feels like using stretchtext, being able to open and close everything like that.
I agree–that jumped out at me as well. The only thing with Wikipedia is that for some reason the page previews don’t work for me on mobile, probably because I can’t “hover” over the footnote links. That does seem like the perfect case for it, though.
I’ve lost trust in my browser’s back button. Probably a lot of people have because you never know if it will take you back to where you were.
My preference in most cases would be to avoid doing anything that changes the length of the document, so I might prefer an “aside” or “info-box” like you see in printed media.
I think it is very similar, but the main difference is that they are inline, and don’t break the flow of text. it’s a subtle difference, yes, but I think the intention was to make it as easy as possible for the user, rather than the webmaster.
I think about this sometimes, I didn’t know it had a name! I’ve been really tempted to build something into my site that lets me endlessly elaborate on certain parts of the text without cluttering up the main body, so I can just ramble to my hearts content and have infinite ‘margins’ to write extra optional notes in.
I do wonder how accessible would be when used a lot like I’d intend though. I can’t imagine what wikipedia is like to navigate with a screen reader or tabcontrols, with the high volume of links and such.
So you mean… kind of like reddit comments when you click that “expand more” and it goes to the webserver, fetches the expanded lot of stuff and puts it in, inline?
So really it’s accordions for each “link”, but each “link” goes to the webserver, gets the content and puts it in, inline, without a page refresh?
Actually, I hadn’t really considered using dynamic text, but that would be really cool! I suppose it could either be used to expand existing text, or you could use AJAX to fetch relevant data. Like, for instance, if you’re writing an article or post about foreign cuisine, you could “stretch” the foreign name of a particular ingredient. A static expansion would display a translation of the ingredient word, or a dynamic one could show current prices for it from a grocery store.
I wasn’t able to get the example you linked to load, but I did search around for example TidlyWikis, and it seems similar, but maybe a little different. The main thing I noticed is that it’s difficult in some of the implementations to navigate back to where you were before.
Anyways, I got bitten by the creativity bug and decided to write up a page on how I envision it. There’s probably room for reinterpretation, though: My stretchtext example
I would consider HTMX for accomplishing this, since you just make a request to your backend, get the “HTML-ish” response for what that should look like and replace the element you requested with, with that new “HTML-ish” element you got from the backend. I’m butchering the explanation, but it should be pretty easy to implement
Oooh, that is cool. I’ve tried implementing AJAX before and struggled with it, so I’m going to have to check this out. I’ve never looked into HTMX before.
This is really cool! I like the way you’ve written things so the sentences flow regardless of whether the stretchtext is open or closed.
I tested it out briefly with TalkBack, and opening the sections works. It also skips over the closed ones as if they aren’t open. However I did run into issues when closing them using the links at the end, because focus gets lost (I think?). I’d have to test it out on desktop to get a better idea of how it’s working.
(Also maybe ARIA expanded/collapsed would also be worth looking into, to indicate something has changed… Or progressively enhancing details/summary with JavaScript and adding CSS to make it inline…?)
