{"id":203069,"date":"2025-04-24T16:58:04","date_gmt":"2025-04-24T16:58:04","guid":{"rendered":"https:\/\/peraltafinancing.com\/apple-2\/text-fragments-enable-deep-linking-on-web-pages\/"},"modified":"2025-04-24T16:58:04","modified_gmt":"2025-04-24T16:58:04","slug":"text-fragments-enable-deep-linking-on-web-pages","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=203069","title":{"rendered":"Text Fragments Enable Deep Linking on Web Pages"},"content":{"rendered":"


\n<\/p>\n

\n

Wouldn\u2019t it be nice if you could link to specific bits of text on a Web page rather than forcing people following your links to scan the page for whatever piece of information you\u2019re trying to convey? With full support from major browser manufacturers appearing late last year, the Web has finally caught up with hypertext theory from the previous century.<\/p>\n

The Long and Winding History of Text Fragment Linking<\/h2>\n

Sometime in the 1960s, hypertext pioneer Ted Nelson envisioned deep linking to specific pieces of text as a core feature of his proposed Project Xanadu<\/a> system. (My first exposure to Xanadu came in the 1987 edition of his Computer Lib\/Dream Machines<\/em><\/a> from 1974, when I was working on my degree in hypertextual fiction at Cornell University. You can download the book in readable formats<\/a> from the Internet Archive.)<\/p>\n

From the early 1990s until recently, the only way to link to a specific part of a Web page was through a named anchor. If the page author inserted #subhead1<\/code> into their HTML, a link like https:\/\/example.com\/#subhead1<\/code> would cause browsers to scroll directly to that spot. Although we, as users, could copy those links or examine the HTML source of a document for named anchors that we could use when creating our own links, the vast majority of links point to the top of the destination page.<\/p>\n

In 2020, to enable deep linking within pages, Google Chrome introduced the Scroll To Text Fragment<\/a> (STTF) feature. It allowed URLs with a #:~:text=<\/code> parameter to link directly to any visible text on a page, so a URL like https:\/\/example.com#:~:text=specific%20phrase<\/code> would highlight and scroll to the text \u201cspecific phrase\u201d on the page. The key benefit of the feature was that it didn\u2019t require cooperation from the page author, and Google began using it to enhance the user experience within Google Search results.<\/p>\n

Google also built the feature into the open source Chromium code. Over the next few years, that caused most Chromium browsers to adopt the feature, including Arc, Edge, Opera, Vivaldi, and others. The holdout was\u2014and remains\u2014Brave because its senior privacy researcher believes that STTF introduces some privacy risks<\/a>. In what I consider a misguided move, Arc\u2019s developers decided to encapsulate the long text fragment links in a custom shortlink redirected by a server at arc.net. Text fragment URLs may be long, but they allow users to preview the hostname of the destination and won\u2019t break if the arc.net redirection service disappears.<\/p>\n

Until late 2024, Mozilla and Apple chose not to support STTF due to additional privacy concerns and annoyance with Google\u2019s use of its control over Chromium and Google Search to effectively dictate Web standards via deployment rather than consensus. Eventually, though, Mozilla and Apple bowed to market pressure, with partial support appearing in Firefox 131 in October 2024 and full support showing up in Safari 18.2 in December 2024. Firefox will now recognize text fragment links, scrolling to and highlighting them, though an add-on is necessary to create the links. Safari can both recognize and create links.<\/p>\n

Following Text Fragment Links<\/h2>\n

As I noted, apart from Brave, all Web browsers that I\u2019m aware of now support following text fragment links. When you click one<\/a>\u2014and you likely won\u2019t realize that you\u2019re doing so ahead of time\u2014the specified page will load and scroll to the appropriate location, and the text included in the link will be highlighted. (In Brave, the page loads but doesn\u2019t scroll or highlight any text\u2014the link behaves like a regular link.)<\/p>\n

Precisely what the highlight looks like can vary because page authors can style the highlighted text<\/a> using the ::target-text<\/code> pseudo-element. It allows changing the color, background-color, text-decoration, text-shadow, stroke-color, fill-color, and stroke-width. However, most of the time, you\u2019ll just see the styling<\/a> used for the mark<\/code> HTML element: a purple (Chromium browsers), yellow (Safari), or orange (Firefox) highlight behind the text.<\/p>\n

\"Highlighted<\/a><\/p>\n

Creating Text Fragment Links<\/h2>\n

Making your own text fragment links is simple\u2014the hardest part is identifying the correct command in a contextual menu. First, you select the desired text, then you Control-click, and:<\/p>\n