If you’re not already familiar with it, this feature allows you anchor link to any text on the web.
For example, anchor linking to a specific element in the document today requires a fragment in the URL and a matching ID in the DOM, e.g.
Will scroll the user to an element with the
my-heading ID, e.g.
<h2 id="my-heading">My Heading</h2>
That’s great when authors provide IDs, but in many cases they do not. Additionally, how do you anchor link to any arbitrary fragment of text like a sentence in the middle of a paragraph?
The text fragments specification details how.
Would scroll the user to the matching text “My Heading” and highlight it — no IDs required.
To make this easier for users, browsers like Chrome can supply a user action to help formulate these links, e.g. 1) highlight the text you want to link to, 2) right-click for a context menu, 3) choose “Copy Link to Highlight”, 4) share the URL.
I absolutely love this feature! It’s just oozing with web-iness.
There’s a whole lot more to this API. You can read Thomas’ excellent article on dev.to for more details.
Being a lover of URLs, what I was most curious about was the anatomy of this new API in the URL.
foois the path
baris the fragment
:~:is the fragment directive delimiter
text=bazis the fragment directive
The spec doesn’t say anything about why the string
:~: is the delimiter, but it does say
text=baz is only the first fragment directive, others may follow in the future.
The fragment directive is meant to carry instructions, such as
text=, for the UA rather than for the document…future directives could be added without introducing breaking changes to existing content. Potential examples could be: image-fragments, translation-hints
It’s interesting to read that thread and see how standards folks wrestled with introducing a new API for the URL that wouldn’t break all the crazy shiz we’ve done on the web over the years — like the SPA routing adventures of earlier years, anyone remember the Twitter hashbang
Ultimately, it looks like a Chromium engineer dug through “a sample of all URLs seen by Google crawlers over the last 5 years” with some delimiters in mind (e.g.
@@) and decided that
:~: struck the best balance of compatibility, as it wasn’t found in any existing URLs.
One other intriguing thing in that thread: there are a couple examples of other potential fragment directives (besides text). One was the idea of selecting any arbitrary node in the DOM via the URL, e.g.
I always love reading these threads and discovering wild ideas for the web I would’ve never considered.
Anyhow, that’s the backstory on scroll to text fragments I wanted to know. Figured I’d write it down and pass it on. Big thanks to all those people who worked on it!