How to Highlight Text Fragments When Linking
In recent months, I’ve begun to notice that results from web searches often highlight specific text on the page to which they’re linking. The web page is also scrolled to the relevant content. It’s quite helpful!
A quick investigation showed this is accomplished by appending a bit of code,
#:~:text=to the URL for a link. These are called Text Fragments, and they’ve been supported by Chrome since back in 2020. It took a couple more years for support to come to Safari, but at this point, the element is well-supported enough to be worth using.[…]
By using this code in a bookmarklet, you can easily create links with helpful highlighting.
This feature is complemented by the
::target-textCSS pseudo-element, which provides a way to style the highlighted text.[…]
Here’s the basic syntax for a text fragment URL:
https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
Via Nick Heer:
As someone who writes essays containing citations, this is one of the nicest additions to the web that I wish was easier to use in Safari. What I, like Alfy, want to be able to do is highlight a specific phrase and copy a direct link.
Also, something I often forget is that you can link directly to specific pages of a PDF file by appending
#page=and then the page number.
Note that you should use the page number within the PDF (as seen in the page list), not whatever number it says on the top of the page itself.
StopTheMadness Pro 11.0 adds the ability to copy a text fragment link from selected text in Safari, using a contextual menu item on macOS or Show Menu on Tap on iOS.
This is actually in Safari 18.2 beta now as well.
Sherlocked: The phenomenon of Apple releasing a feature that supplants or obviates third-party software
[…]
The good news is that this feature is available now in StopTheMadness Pro, whereas Safari 18.2 is not scheduled for release by Apple until December. Also, it’s available in StopTheMadness Pro to users of older versions of Safari. And from what I’ve seen, Apple’s feature is available only in macOS Safari, not in iOS Safari. So my efforts weren’t totally wasted.
Previously:
Update (2024-11-06): Vítor:
There’s also an Alfred workflow for this.
Update (2024-11-07): See also: Keyboard Maestro.
4 Comments RSS · Twitter · Mastodon
Having just created a ton of these highlighted text links, I found that on Chrome on iPad/iOS lets you create these links very easily.
https://support.google.com/chrome/answer/10256233?hl=en&co=GENIE.Platform%3DiOS&oco=0
Prior to discovering this, I was able to use CopyAsLink (https://apps.apple.com/us/app/copy-as-link/id1332308912) to get close but still needed manual tweaking (I created my own output template: “%u#:~:text=%s”and then manually converted spaces to %20 (you can paste into Safari URL bar and sometimes it’ll do that conversion fro you).
This would be ripe for a better Safari extension, though that extension probably wouldn’t be able to create the prefix/suffix part, which is necessary if the text string you’re highlighting is repeated in multiple places on the target web page.
Oh, and Mobile Safari can do these highlight links, but only if you’re sharing to iMessage. It’s pretty nice, especially when you want to point someone to some particular piece of text.
I’m pretty sure that text fragment bit is how Messages creates the text snippet preview.
Unfortunately, copying the URL from iMessage doesn’t keep the text fragment highlight part of the URL in my experience.
Text fragments works as expected using iOS 18.2 (22C5125e) which is the latest developer beta as of 2024-11-06. I was able to paste a text fragment into Notes and it worked fine.
