One of the missing features of digital print is the ability to leave traces of your reading. Physically, you can leave coffee stains or your fingerprints on the book.

Since text selection is the most common action in web browsing and reading, I chose to make it a trace of reading.

Feasibility

I can get the selected text and highlight it using the window.getSelection and CSS Custom Highlight API.

getSelection returns a Selection object which have the anchorNode and focusNode properties for the start and end of the elements. And your can get the selected text by call the Selection.toString() method.

To shake the scope, I choose to save only the selection of a single element and ignore the selection of multiple elements, avoiding the select all opration and the selection of the whole page.

Design

My first instinct is to stack the selection string and make the highlight background colour deeper as more are selected and highlight different colours separately.

I will store the string and how many times it has been selected without the position and related elements. {text:String,count:Number}

The problem is it will fragment the sentence and highlight all the individual words.

After exploring, I decide to set the granularity to word level and only deepen the highlight when the selected string matches, leaving the highlight overlap to the view rather than the model.

And different users should leave different traces. It could be different depending on the user's device, browser, operating system or even the time of day. But I choose to to identify the user by mobile/desktop only, because user behaviour is different on mobile and desktop. And when it comes to less text selection, you get more tranceparency.

You can now try selecting some text inside the paragraph. Then reload the page.