Safari 16.1 Update for iPhone Includes Hidden Feature Every Web Browser Needs « iOS & iPhone :: Gadget Hacks

Safari just got a major new feature on your iPhone – something that will change the way you share, receive and interact with links.

1. The Basics of URL Fragments

You’ve probably come across it many times: a webpage with a table of contents that links directly to specific parts of the webpage. Wikipedia is famous for this and makes it easier to find information when you know what you are looking for. Just tap or click on a link to get to the right place without having to scroll down and find it yourself.

Without going into too much detail, these jump links are, thanks to fragments, an optional part of a URL that comes after the schema, authority, path and query parts. The pound sign or pound sign (#) is the identifier of the fragment, and the following refers to a specific section of the web document. These are coded into the web page, with a deep link to a particular “id” attribute, so just typing a # followed by a word or phrase won’t do anything unless you use the assigned anchor tag.
|___|   |______________||_______________||__________________|
  |             |               |                 |
scheme      authority          path            fragment

Gadget Hacks also uses URL fragments to direct you directly to important parts of an article when you tap or click the hyperlink. For example, the link below takes you directly to the ninth spell in our Harry Potter Spells for Siri guide.

These links are very useful when browsing the web, but not all websites use them. This is where Text Fragments come in, a specification offered by the Web Incubator Community Group (WICG) that allows you to link or jump to a specific part of almost any web page without the need for tags. built-in anchors.

2. Text Fragments Make Life Easier

The proposed text fragments specification has already been adopted by Google Chrome since early 2020, and it also works with Microsoft Edge. Mozilla Firefox doesn’t currently support it, but Apple finally jumped on board with Safari 16.1, which ships with the iOS 16.1 update on October 24. (It’s also available on iPadOS 16.1 and macOS 13 Ventura, which will also be available soon.)

The syntax of text fragments is quite simple as shown below. It starts with the # like all fragments, then uses :~:text= (the fragment directive) to indicate that the following percent-encoded text should be found, highlighted, and immediately auto-scrolled. There are also a few other options to help you highlight an entire block of text or search for specific text instead of where it first appeared.

It is reserved for user agent statements, such as text=, and is stripped from the URL on load so that authoring scripts cannot directly interact with it. User agent instructions are also called directives. In the concrete case, text= is therefore called a text directive.

—Thomas Steiner/WebDev
    Links to and highlights the first
    instance of an exact text match.

    Links to and highlights a block of
    text that starts with the word(s)
    before the comma and ends with the
    word(s) after the comma.

    Links to and highlights the text
    after the comma, with the
    prefix- word(s) helping to
    find the right text (when the text
    appears multiple times).

    Links to and highlights the text
    before the comma, with the
    -suffix word(s) helping to
    find the right text (when the text
    appears multiple times).

    Links to and highlights the text
    between the commas, with the
    prefix- and -suffix word(s) helping
    to find the right text (when the
    text appears multiple times)

    Links to an anchor tag embedded
    on the document and highlights
    whatever fragment text style
    you choose; The anchor tag acts
    as a backup against future
    text changes by the author.

3. Text fragments on iOS 16.0.3 and earlier compared to iOS 16.1

The page loads on iOS 16.0.3 and earlier when a URL formatted with text fragments is opened, but nothing special happens (GIF left below). With Safari on iOS 16.1, the unique URL formatted to highlight specific text on the web page jumps directly to that part of the article, highlighting the text (GIF right below).

Doesn’t work on iOS 16.0.3 and earlier (left) vs. iOS 16.1 (right).

4. Examples of using text fragments

The link below to our list of Harry Potter spells for Siri takes you directly to the words “the telltale human presence spell” for the ninth spell.

Example of #:~:text=textStart


The following links highlight the entire ninth spell paragraph before the bulleted actions. While the ampersand (%26) and comma (%2C) characters should be percent-encoded, the period (%2E), dash (%2D), and quotation mark (%22) need not be in most scenarios.

Examples of #:~:text=textStart,textEnd


For example, if you copy a link below that ends with a period (.), you can paste it into Safari and make it work fine. However, if you share it via Messages, the app will recognize and separate the dot as part of your message text, removing it from the URL.

#:~:text=textStart (left) | #:~:text=textStart,textEnd (right)

And the following link highlights the entirety of the ninth spell, from the section title to the last part of the last line of bullet points.

Examples of #:~:text=textStart,textEnd


Now if I want to link to the words “emergency contacts” in the 14th spell instead of the 12th spell where they first appear, I can use the prefix and suffix parts to jump from the first instance to the second. For that, the following link does the trick.

Examples of #:~:text=prefix-,text,-suffix


Simply using “chosen-” as a prefix without specifying a -suffix will also get us there.

Example of #:~:text=prefix-,text

#:~:text=textStart,textEnd (left) | #:~:text=prefix-,text,-suffix or #:~:text=prefix-,text (right)

But skipping the prefix – and using “.” because the suffix – will bring us to the 12th spell since it is the first case where “emergency contacts” is followed by a period.

Examples of #:~:text=text,-suffix


Text snippets also work with regular site-coded snippets. So if the text changes in the text snippet, it will always direct you to the section with a matching “id” attribute on the page. The links below take you directly to the ninth spell in our Harry Potter Spells for Siri guide and highlight the entire first paragraph below the title.

Examples of #IDattribute:~:text=textStart

#:~:text=text,-suffix (left) | #IDattribute:~:text=textStart (right)

5. If text fragments aren’t working for you

Safari has an experimental “Scroll to Text Fragment” feature that you can enable since iOS 15.4, but it’s only been beneficial to developers so far. Before iOS 16.1 it was disabled by default, but now it is enabled by default.

If you messed up in Safari’s WebKit Experimental Features menu and accidentally disabled “Scroll to Text Fragment”, you can re-enable it by going to Settings -> Safari -> Advanced -> Experimental Features -> Scroll to text fragment. Instead of enabling it, you can also scroll down the list and tap “Reset All Settings to Default”, also available since iOS 15.4.

6. Formatting text fragments to share

As you can see from the syntax above, formatting a text snippet for highlighting is relatively straightforward if you’re used to percentage-encoding URLs. Otherwise, it’s a little tricky to remember.

Unfortunately, there’s no easy way to copy a URL for a section you want to highlight in Safari like there is in Chrome. On Google Chrome for iOS, you can highlight text and then choose “Create Link” from the pop-up menu that appears. This option does not appear in Safari.

Create a text fragment link in Chrome and share it with WhatsApp.

You can try highlighting text in Safari and then hitting the share button, but that doesn’t do anything special with the URL, although it will give it a rich text preview for Apple apps like Messages, Mail and Notes with highlighted text in a quote block. Using “Share” in the context menu will only copy the text.

A workaround until Apple implements an easy way to copy and share text fragments is to use a shortcut. You can try the Share Text Fragments shortcut, which formats URLs using the #:~:text=textStart encoding seen above. Any prefix, suffix or textEnd you want to add you’ll have to do manually for now until a better shortcut comes up.

Keep your connection secure with no monthly bill. Get a lifetime subscription to VPN Unlimited for all your devices with a one-time purchase from the new Gadget Hacks store, and watch Hulu or Netflix without regional restrictions, increase security when browsing public networks, and more.

Shop now (80% off) >

Other great deals to check out:

Cover photo, screenshots and GIFs by Justin Meyers/Gadget Hacks

Comments are closed.