Understanding Google’s Scroll and Highlight Feature

There are several usability goals of this spec:

  • Search engine results could direct users to the answer they are looking for on a web page rather than just linking to the top of the page.
  • Adding a method to specify a non-unique text on the page. Not only the first occurrence.
  • Users could highlight text that spans multiple paragraphs, list items, table entries, and other structures
  • The feature could be run on all kinds of web pages. It must be compatible with the vast majority of existing and future websites.

In the future, browsers are also expected to implement “Copy URL to here” when users right-click on a highlighted text so that they can share a link with the point of interest indicated immediately.

Without this, users can only link to the closest anchor or element with ids, and recipients need to do a bit of skimming to find the point of interest.

The scrolling to specific text is triggered when a special text directive that starts with #:~:text is included in the browser URL, here’s an example:

https://blog.bitsrc.io/web-component-why-you-should-stick-to-react-c56d879a30e1#:~:text=HTML%20template%20allows%20you,dynamic%20data

If you open the URL in Chrome or Edge, you’ll find that the HTML template section is highlighted yellow.

New text highlight feature

The feature spec leaves out the implementation of what the browser should do once it finds matching content. The yellow highlight is implemented by Chrome itself, so there’s no way for web developers to change this.

But don’t worry yet, a discussion to add new CSS pseudo-element for styling text fragment is currently ongoing.

The fragment directive itself is made of four parameters:

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

context |-------match-----| context

prefix, textEnd and suffix are optional parameters. Because the directive will match the first occurrence of the text, you can use prefix or suffix to highlight the next occurrence instead of the first one. A prefix must end with a dash, while suffix must start with it.

Here’s another example of a link with a suffix to highlight a certain occurrence of the word Yugoslavia:

https://en.wikipedia.org/wiki/UEFA_European_Championship#:~:text=Yugoslavia,-England
Highlighting Yugoslavia next to England

You should remove the -England to compare it with the non-suffix directive.

You can also specify multiple text directives by adding more than one text directive. The following URL highlights two separate sentences of a paragraph:

https://en.wikipedia.org/wiki/UEFA_European_Championship#:~:text=Sixteen%20teams%20progressed%20to%20the%20final%20tournament%20for%20the%202012%20tournament&text=The%20groups%20were%20drawn%20up%20by%20the%20UEFA%20administration,%20again%20using%20seeding
Highlighting separate sentences

For privacy and product compatibility reasons, web pages may wish to disable scrolling to a text fragment. To allow web pages to opt-out, browsers need to add a new Document Policy named force-load-at-top.

Web developers could then add the Document Policy to the HTTP header:

Document-Policy: force-load-at-top

With the ability to scroll and highlight any part of a web page, search engines could now direct users immediately to the interesting point of a document instead of just linking to the top of the page.

Browsers could also help users share interesting information by adding a new context menu to copy URL to the currently highlighted text. You can find more detail about the scroll to text fragment on its GitHub page.

Author: admin

Leave a Reply

Your email address will not be published.