Discovering URL Scroll-To-Text Fragment

Peter Rukavina

I thought my finger was on the pulse of significant browser developments, but this one I missed completely: URL Scroll-To-Text Fragment.

Here’s the URL for a post on Lisa’s blog, for example:

https://lisachandler.is/pressure-summer/

Down in the text there is the sentence:

To cherish every memory.

It turns out that I can link directly to that sentence, and have it highlighted to boot, like this:

https://lisachandler.is/pressure-summer/#:~:text=To%20cherish%20every%20memory.

Pulling this apart—it’s all documented here—I add these to the URL:

  • #:~:text=
  • the text I want to highlight on that page, with special characters, like spaces, %-encoded.

There’s more in the documentation about linking to, and highlighting, a range of text, with a start and end string; for example:

https://ruk.ca/content/asking-questions#:~:text=And%20what,something%20sticks.

will link to and highlight the paragraph that starts with “And what” and ends with “something sticks.”

This is a browser feature I wish had existed from off the top—and that I wish I’d learned about earlier—as referencing sentences or paragraphs in my blog posts is something I do all the time.

There’s a browser extension that helps with making these links easier; right now it doesn’t appear to work for the latest Safari, but there’s a bookmarklet that does.

(Note that this isn’t a universally-supported feature, and Firefox specifically doesn’t support it).

Browsers
Links

Comments

Submitted by oliver on

Permalink

I probably don’t understand this well enough to express a sound opinion about it, but I’ll just say anyway I noticed something like this arise in a recent optional interface for making new pages and such in Wordpress—and felt it was such an improvement I didn’t mind learning it, as I usually would.

Submitted by Paul on

Permalink

You state that Firefox doesn't support it, but there is a Firefox Extension that seems to work at least half the time! https://addons.mozilla.org/en-CA/firefox/addon/link-to-text-fragment/

Hello Peter,

I am happy to report that Firefox supports URL Scroll-To-Text Fragment as of version 131, released October 2024: https://caniuse.com/url-scroll-to-text-fragment

I made an open-source text fragment linker bookmarklet that (in my biased opinion) works slightly better than the Supple bookmarklet, because it can handle newlines as effortlessly as Chrome's context menu (which break links generated with Supple bookmarklet), and it also automatically expands/shrinks the selection to word boundaries (partial words don't seem to be valid in scroll-to-text fragment links).

I also made an accompanying JS widget for constructing more sophisticated scroll-to-text fragment links, with support for prefix and suffix notation, start/end notation, and multiple selections.

Bookmarklet and widget: https://www.curiositry.com/text-fragment-linker/

Accompanying blogpost: https://www.autodidacts.io/scroll-to-text-fragment-bookmarklet/

— @curiositry

Add new comment

About text formats

Plain text

  • Allowed HTML tags: <b> <i> <em> <strong> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

About This Blog

Photo of Peter RukavinaI am . I am a writer, letterpress printer, and a curious person.

To learn more about me, read my /now,  look at my bio, listen to audio I’ve posted, read presentations and speeches I’ve written, or get in touch (peter@rukavina.net is the quickest way). 

I have been writing here since May 1999: you can explore the 25+ years of blog posts in the archive.

You can subscribe to an RSS feed of posts, an RSS feed of comments, or a podcast RSS feed that just contains audio posts. You can also receive a daily digests of posts by email.

Search