Scroll-to-text

Are you active on social media? And, do you share and bookmark lots of links from the Web? I certainly do. One of the frustrations that I sometimes experience, is wanting to share a specific phrase or paragraph part way down a long article or page, and not being able to. (As there isn’t a convenient id nearby in the HTML.)

This frustration led me to look at different ways of ‘saving a place’ on a page.

Note, although what I’m talking about shares some similarities with web annotation, and social bookmarking, there are clear differences.

1. I’d prefer something that you don’t have to sign up to;
2. Lightweight, without a server-based backend and database;
3. Not reliant on a browser plugin or bookmarklet;
4. Shareable and open-access;
5. An approach that fully acknowledges and doesn’t distract from the source page **

The idea I’ve come up with encodes the URL of the source page, and the text to highlight like so,

https://scrolltotext.github.io/?url=http://example.org/page.html&text={Interesting+text}

And, you can optionally scroll to the Nth occurrence of the text,

https://scrolltotext.github.io/?url=http://example.org/page.html&text={Interesting+text}&occurrence=2

It makes use of some recent HTML5 and DOM/JS innovations, including:

• The Fetch API;
• The srcdoc attribute;
• scrollIntoView

The result uses pure HTML + Javascript (no server-side scripting), and acts as a filtering Web proxy.

The main Javascript fetches the page at the given URL, searches for the text, and injects some markup wrapping the text in the HTML (<mark .. > ... </mark>). The HTML page is placed in a srcdoc attribute on an <iframe>, with injection of a minimal quantity of CSS and Javascript (approx. 28 lines of JS).

The original page, plus highlighting is displayed in most modern browsers. The browser smoothly scrolls to the highlighted text, and there are links to view the original page, and to a disclaimer.

Examples

Here are some examples which hopefully demonstrate the utility of the ‘scroll-to-text prototype’:

• ‘To die, to sleep’, quote from Hamlet
• ‘catch sight …’, quote from an OU News article
• The 2nd occurrence of ‘très’ in Descartes ‘Les Principes de la Philosophie’ (French)

I envisage general use, plus application to things like e-learning. I’d love feedback on this prototype, and I’m sure people out there have great use-cases.

You can visit the site at :~ scrolltotext.github.io.

And, view and contribute to the source code (MIT License).

Update

24 February: I gather that Chrome is testing a ‘Scroll to text’ feature.