{"id":45677,"date":"2024-11-05T14:17:06","date_gmt":"2024-11-05T19:17:06","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=45677"},"modified":"2026-04-17T08:31:12","modified_gmt":"2026-04-17T12:31:12","slug":"how-to-highlight-text-fragments-when-linking","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2024\/11\/05\/how-to-highlight-text-fragments-when-linking\/","title":{"rendered":"How to Highlight Text Fragments When Linking"},"content":{"rendered":"

Paul Kafasis<\/a>:<\/p>\n

\n

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!<\/p>\n

A quick investigation showed this is accomplished by appending a bit of code, #:~:text=<\/code> to the URL for a link. These are called Text Fragments<\/a>, 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<\/a> to be worth using.<\/p>\n

[…]<\/p>\n

By using this code in a bookmarklet, you can easily create links with helpful highlighting.<\/p>\n<\/blockquote>\n\n

Ahmad Alfy<\/a>:<\/p>\n

This feature is complemented by the ::target-text<\/code> CSS pseudo-element, which provides a way to style the highlighted text.<\/p>

[…]<\/p>

Here’s the basic syntax for a text fragment URL:<\/p>

\nhttps:\/\/example.com\/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]\n<\/pre><\/blockquote>\n\n
Via Nick Heer<\/a>:<\/p>\n
\n
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.<\/p>\n\n
Also, something I often forget is that you can link directly to specific pages of a PDF file by appending #page=<\/code> and then the page number.<\/p>\n<\/blockquote>\n\n
Avram Piltch<\/a>:<\/p>\n
\n
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.<\/p>\n<\/blockquote>\n\n
Jeff Johnson<\/a>:<\/p>\n
\n
StopTheMadness Pro 11.0 adds the ability to copy a text fragment<\/a> link from selected text in Safari, using a contextual menu item<\/a> on macOS or Show Menu on Tap<\/a> on iOS.<\/p>\n<\/blockquote>\n\n
Timothy Hatcher<\/a>:<\/p>\n
\n
This is actually in Safari 18.2 beta now as well.<\/p>\n<\/blockquote>\n\n
Jeff Johnson<\/a>:<\/p>\n
Sherlocked<\/a>: The phenomenon of Apple releasing a feature that supplants or obviates third-party software<\/p>
[…]<\/p>
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.<\/p><\/blockquote>\n\n
Previously:<\/p>\n