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.
- I’d prefer something that you don’t have to sign up to;
- Lightweight, without a server-based backend and database;
- Not reliant on a browser plugin or bookmarklet;
- Shareable and open-access;
- 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,
And, you can optionally scroll to the Nth occurrence of the text,
It makes use of some recent HTML5 and DOM/JS innovations, including:
The result uses pure HTML
URL, searches for the
and injects some markup wrapping the text in the HTML (
<mark .. > ... </mark>).
The HTML page is placed in a
srcdoc attribute on an
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.
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.
'SM' comments disabled.
'ID' comments disabled.