Highlight Text With Text Fragments

New API for navigating to the specific part of the webpage is slowly starting to be part of the browsers. In many cases, it may replace anchor linking, which has been part of the web development for decades.

Lately, I noticed some new behavior of StackOverflow in my browser. The answer I was looking for was highlighted as if I had used the browser’s search functionality. However, this highlighted text was produced by Google Search, …or not?

https://twitter.com/rmnvsl/status/1268259255418839042

This functionality is called Text Fragments and its specification was published by WICG¹, which means it is de facto only a proposal, not a standard. Regardless of that, it seems it’s not a problem to implement such a feature into a browser now.

I will explain this new functionality, check the browser support, and also provide a working example further in this article.

Text Fragments

Text Fragments adds support for navigating and highlighting specified text snippet in a page and so immediately brings user’s attention to it.

The main uses cases are:

• search engines - they serve links to the pages you are looking for. With text fragments, they can lead you to the exact searched content rather than linking to the top of the page.
• sharing from the browser - let’s say you want to share some text from the web page with a friend. You select that part of the text and from the browser’s context menu you choose “Share this text” - and browser puts the URL with correct text fragment to your clipboard. Now your friend is navigated to the same part of the page. (e.g. Wikipedia article).

How a browser should respond to the text fragment is purposely not defined. While my browser highlights the text and scroll to that part of the page, it may also active search functionality on that text or show a notification with some “click to scroll to the text” message.

So, how does a text fragment look?

It’s defined with :~:text= after the # (hash) in the URL, e.g.:

https://romanvesely.com/text-fragments/#:~:text=How a browser should respond,with some "click to scroll to the text" message.

Specifically, it consists of four parts:

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

Text to highlight is defined by textStart, which is also the only required parameter of fragment directive. If it’s too long, it can be split into two shorter parts. The second one defines the end of the snippet (textEnd). The browser will highlight everything in between those parts.

prefix and suffix define a context, so the browser knows which text to select if there is more than one occurrence of it. They represent the text immediately preceding (prefix) and following (suffix) the text that should be highlighted. It means, context is not part of the text snippet.

Some Notable Characteristics

Whole words have to be specified, just a portion of a word will not work.

Some characters have to be percent-decoded, namely, dash -, comma , and ampersand &, to avoid being interpreted as a part of the text directive syntax.

Fragment (anchor) can be used together with text fragments. It may happen that text on the page has changed since text fragment was created, so the browser can still point at least to the appropriate section of the page.

Highlighting more text snippets is possible by adding more text fragments to the URL. Just join them with the ampersand(s).

Unfortunately, as of the time of writing this article, there is no way to customize the style of highlighted text snippets.

Is Your Browser Ready?

Let’s look at what browsers currently support this new feature:

Not that much. But, if you have one of the supporting browsers, you can…

See It in Action

Select any text on this page and open it again to see the highlighted text snippet.

For the simplicity and purpose of this example, the selection range expands across the whole selected elements.

You can use the same functionality on any page with this new Link to Text Fragment Chrome extension.

Privacy Concerns

As we all do know, not everything is bright and shiny. This new feature, which has already rolled out to hundreds of thousands of devices, might be misused against their users without their knowledge.

I was pointed to the article elaborating further on this matter. I would also recommend you to check this tweet thread by Pete Snyder, which should give you a better picture. I couldn’t explain it better.

I would like to learn more about this security topic, so if you know about any related resource, please, ping me.

Footnotes

1. W3C Web Platform Incubator Community Group. I was not aware of this group before. How could I, there are many of them. ↩