{"id":1004,"date":"2020-10-16T05:51:12","date_gmt":"2020-10-16T12:51:12","guid":{"rendered":"https:\/\/www.ghosh.com\/blog\/?p=1004"},"modified":"2023-08-28T08:53:43","modified_gmt":"2023-08-28T15:53:43","slug":"how-to-create-a-url-link-that-highlights-and-scrolls-to-a-text-fragment-on-a-web-page","status":"publish","type":"post","link":"https:\/\/www.ghosh.com\/blog\/how-to-create-a-url-link-that-highlights-and-scrolls-to-a-text-fragment-on-a-web-page\/","title":{"rendered":"Highlight Text Fragments"},"content":{"rendered":"

Highlight<\/span> Text Fragments<\/p><\/h1><\/div>

A whole new dimension to URL links<\/p><\/h3><\/div>

[playht_player width=”100%” height=”175″ voice=”Noah”]<\/p>\n<\/div>

The Google Chrome browser (Chromium<\/a> to be more precise) and thus many popular browsers based on Chromium including Microsoft Edge,\u00a0 Opera, et. al. (*see full list below) have a really cool, useful, but surprisingly underutilized feature.\u00a0 As we all know, you can create a web URL link that refers to a specific web page. But did you know that you can also create a URL link that refers to a page and highlights specific text on that page, and automatically scrolls to that text fragment without any required extensions?!<\/p>\n

Maybe you’ve clicked on some search engine results where relevant text on a results page is highlighted without realizing that text was actually dynamically highlighted.\u00a0 So why not provide that same specificity when you share web info with others?<\/p>\n

Use Cases<\/h2>\n

For example, rather than sending a friend a link to a long article, having to explain why it’s relevant and which parts to read, why not just send one link that also takes the visitor to the appropriate section on the page and highlights it.\u00a0 For content creators, rather then send readers to another reference page where they’re likely to get lost and forget to come back, you can navigate them to the specific reference and highlight it so they’re more likely to return to your page.<\/p>\n

Once you start doing this more, you may wonder how you lived without it.<\/p>\n

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

Highlight A Short Text Fragment<\/h2>\n

The concept is actually pretty simple, especially for anyone used to adding parameters to a URL.\u00a0 After the web page URL, simply add the text to highlight in the URL, separated by “#:~:text=”, in the form of:<\/p>\n

[WebpageURL]#:~:text=[TextToHighlight]<\/p><\/blockquote>\n

For example, if we want to link to highlight “Text Fragments” on a WICG page like this:<\/p>\n

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

…then the web page URL is “https:\/\/wicg.github.io\/scroll-to-text-fragment\/<\/a>” and we want to highlight “Text Fragments”, so we pass that as a parameter at the end of the URL, separated with a special string: “#:~:text=”.\u00a0 However, not all characters (e.g., spaces) are allowed in the URL; those unsupported characters must be “% encoded” first.\u00a0 Thus, the URL would be:<\/p>\n

\n

https:\/\/wicg.github.io\/scroll-to-text-fragment\/#:~:text=Text%20Fragments<\/p>\n<\/blockquote>\n

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

Highlight Longer Text Fragment<\/h2>\n

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

Pretty cool, right?!<\/p>\n

This browser feature has more capabilities such as disambiguating (if there are multiple similar phrases) by providing a prefix and\/or suffix, and highlighting multiple text fragments on a page.\u00a0 If you’d like to create your own URLs, here’s the general URL syntax:<\/p>\n

[webpageURL]#:~:text=[prefix-,]textStart[,textEnd][,-suffix]<\/p>\n

I wanted to use this capability more, but found it cumbersome enough to deter me.\u00a0 Thus, I created a simple “Text Fragment Linker<\/a>” form for my own use, which I’m happy to share with you.\u00a0 It uses Javascript (on the browser), so no data is submitted back to the server (and thus can’t be saved anywhere):<\/p>\n

\n

https:\/\/ghosh.com\/tfl<\/a><\/p>\n<\/blockquote>\n

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

Text Fragment Linker<\/a><\/p>\n

Please let me know if this is useful.<\/p>\n<\/div>

*Partial List of Chromium-based browsers (from ZDnet<\/a>): Google Chrome Browser<\/a>, Google Chrome OS<\/a>, Microsoft Edge<\/a>,\u00a0 Opera<\/a>, Vivaldi<\/a>, Brave<\/a>, Blisk<\/a>, Colibri<\/a>, Epic Browser<\/a>, SRWare Iron<\/a>, Ungoogled Chromium<\/a>, Avast Secure Browser<\/a>,\u00a0Amazon Silk<\/a>,\u00a0Samsung Internet Browser<\/a>,\u00a0Yandex Browser<\/a>,\u00a0Qihoo 360 Secure Browser,<\/a>\u00a0Torch Browser<\/a>, Comodo Dragon<\/a>, \u00a0Coc Coc<\/a>,\u00a0Falkon<\/a>,\u00a0Xvast<\/a>,\u00a0Polarity<\/a>,\u00a0TheWorld Chrome<\/a>,\u00a0Naver Whale<\/a>,\u00a0Kinza<\/a>,\u00a0Iridium<\/a>,\u00a0Tungsten<\/a>,\u00a0Ghost Browser<\/a>,\u00a0Superbird<\/a>,\u00a0Lulumi<\/a>,\u00a0Chedot<\/a>,\u00a0Orbitum<\/a>,\u00a0Cent Browser<\/a>, …<\/p>\n<\/div>

<\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":1126,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,12],"tags":[],"class_list":["post-1004","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general","category-salesandmarketing"],"_links":{"self":[{"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/posts\/1004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/comments?post=1004"}],"version-history":[{"count":30,"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/posts\/1004\/revisions"}],"predecessor-version":[{"id":1163,"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/posts\/1004\/revisions\/1163"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/media\/1126"}],"wp:attachment":[{"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/media?parent=1004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/categories?post=1004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ghosh.com\/blog\/wp-json\/wp\/v2\/tags?post=1004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}