Today I learned that Firefox finally implemented these! They don't mention this in the article, but that's new this month—for the longest time Chrome supported it but it isn't in the standard and Firefox didn't include it. Safari got it 2 years later, but Firefox held out for a while.<p>I'm normally not a fan of Chrome unilaterally adding something to the platform, but this has been a long time coming.
In all honesty, I've hated this feature with a passion ever since it appeared.<p>If it was simply a matter of being used in the way outlined in the article, when someone creates a a link that references a particular piece of text, then fine, someone has deliberated intended the link to behave like that.<p>And then we have the lovely folk at Google search... who think it's fun to drag my attention off to a random part of a page that isn't where I want to be, forcing me to right-click, remove annotation and scroll back up to the top of the page.<p>That doesn't seem like a massive hardship, but it gets quite frustrating when multiplied over the many searches done in a day/week/month.
Unsurprisingly this is something you could do in Plan 9:<p><pre><code> /path/to/file:/from.*to
</code></pre>
opens the file and sets the selection to the range of text between "from" and "to". Bonus: you can use regular expressions.<p>It pains me to see the web having strayed so far from its focus on interlinking. It's easy to make a parallel when on one side device makers have taken control back by removing access to files and putting applications first (this is the only model on mobile), to the point that those makers have enormous control over apps' existence, and the web where applications are now the only way to access content, to the point that content may or may not available if the right API exists.
Programmatically what can a developer do with this?<p>I see that there is a method and an object to see if its enabled or not. And there is a way to get the whole fragment which can be parsed.<p>Are there methods to see whether some text in the fragment was actually highlighted or not? Are there methods to programmatically select text?<p>Could there be a way to, for example, draw a rectangle around the highlighted section, to get the coordinates of the text, to read out the selected text, to store what words people select and link to etc<p>Maybe it's an external link about headline news and the news title got changed by the editor. Maybe the developer may want to change the selection to the edited title so the user isn't surprised. Maybe its a multi lingual blog post and the user links using another language... etc etc
I use these for footnotes, eg in [1] which had a lot of footnotes. Ghost and other blogs don't support footnoting well afaict. Sometimes I miss restructured text, which did this quite well, markdown alas does not.<p>[1] <a href="https://blog.paulbiggar.com/i-cant-sleep/" rel="nofollow">https://blog.paulbiggar.com/i-cant-sleep/</a>
I built something like this for <i>The New York Times</i> and it was one of the more fun projects I did there.<p>The thing I really hoped this "new" version would account for is when text changes and having links survive minor edits/changes. Perhaps I missed it and it does.<p>- <a href="https://github.com/NYTimes/Emphasis">https://github.com/NYTimes/Emphasis</a><p>- <a href="https://open.nytimes.com/emphasis-update-and-source-6ffac5e69fd8" rel="nofollow">https://open.nytimes.com/emphasis-update-and-source-6ffac5e6...</a> (2011)
It would be nice to have similar feature like this, but to highlight rectangle (instead of text) on the page to focus viewer on some specific area. I send screenshots with highlight quite often.
Looks like Firefox is lagging behind. It understands the url but there doesn't seem to be a way to create it from the UI. Chromium has "Copy link to highlight" in the right click/context menu but Firefox 131.0.3 doesn't. There is an add-on though: <a href="https://addons.mozilla.org/en-US/firefox/addon/link-to-text-fragment/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/link-to-text-...</a>
Is there a specified / supported way to include other parameters in the URI fragment if the fragment part of the URI starts with :~:text=?<p><pre><code> https://example.com/page.html#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
https://example.com/page.html#:~:text=...
https://example.com/page.html#:~:text=...&param2=two&:~:param3=three
</code></pre>
w3c/web-annotation#442: "Selector JSON to IRI/URI Mapping: supporting compound fragments so that SPAs work" (2019): <a href="https://github.com/w3c/web-annotation/issues/442">https://github.com/w3c/web-annotation/issues/442</a><p>WICG/scroll-to-text-fragment#4: "Integration with W3C Web Annotations" (2019): <a href="https://github.com/WICG/scroll-to-text-fragment/issues/4#issuecomment-464485999">https://github.com/WICG/scroll-to-text-fragment/issues/4#iss...</a>
> Text fragments are currently supported in all the browsers.<p>All meaning all the browsers listed in the linked table. These may be the major browsers, but not all of them.
I wonder whether it was a mistake to separate this feature from a standard selection.<p>I don't know how to design it separately. The default is that selections are blue and fragments are purple, but if you choose different colors for both, in line with your color scheme, how will people know which is which? I guess you can still choose different tones of blue and purple.<p>Why shouldn't selecting text automatically update the address?
This is the ultimate time saver feature when sharing. I built a web layer that does this, but goes further with multiple highlights, navigation, and rich inline communication with humans and AI, which is integrated with a web app to save, organize, and share with humans and AI. It’s <a href="https://www.kontxt.io" rel="nofollow">https://www.kontxt.io</a>
With a addon this is much more usable, not sure why there isn't a selection-to-text-fragment-link functionality builtin to Firefox...(same for other browsers?)<p><a href="https://addons.mozilla.org/firefox/addon/text-fragment/" rel="nofollow">https://addons.mozilla.org/firefox/addon/text-fragment/</a>
It’s really cool but it seems rather convoluted for the typical user. We should perhaps start making good use of the ID attribute and linking to that first before we start trying to use ~:text=
Very nice! Hopefully Firefox developers have the bandwidth to implement this as well, and not let Google Chrome have this feature as an "embrace and extend" differentiator.
As for MS-Edge, well I guess it must be funny for Microsoft to see they're getting a taste of their own sweet old medicine...
Is it just me or whenever I open a link with a text fragment, the page is loaded just fine but it takes one or two seconds to actually scroll down to the highlighted text?<p>Usually in Chrome and when visiting sites that are not 100% pure text (e.g., bloated Confluence docs)
This also works perfectly in Microsoft Edge and has for a long time. Pointing this out because the post makes several references to things being exclusive to Chrome, when really it's probably just Chromium.<p>(I'm still puzzled why so many more people choose to use a browser distributed by the world's largest ad network over one with all the same features plus a few nice add-ons, made by a software company.)