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

0

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 schemeparties , authority, path and query. 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.

https://en.wikipedia.org/wiki/WonderHowTo#WonderHowTo_Network
|___|   |______________||_______________||__________________|
  |             |               |                 |
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 of our guide to Harry Potter spells for Siri.

https://gadgethacks.com/how-to/potter-spells-0384951#jump-9heysirihomenumrevelio

These links are very useful when browsing the web, but not all websites use them. This is where text fragments come in, a specification proposed by the Web Incubator Community Group (WICG) which allows you to link or jump to a specific part of almost any web page without the need for embedded anchor tags.

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 is not currently supporting it, but Apple eventually jumped on board with Safari 16.1, which comes with the iOS 16.1 update of 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.

#:~:text=textStart
    Links to and highlights the first
    instance of an exact text match.

#:~:text=textStart,textEnd
    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.

#:~:text=prefix-,text
    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).

#:~:text=text,-suffix
    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).

#:~:text=prefix-,text,-suffix
    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)

#IDattribute:~:text=AnyOfTheAbove
    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 revealing spell of human presence” for the ninth spell.

Example of #:~:text=textStart
-----------------------------
#:~:text=the%20human%2Dpresence%2Drevealing%20spell

Link
----
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=the%20human%2Dpresence%2Drevealing%20spell

The following links highlight the entire paragraph of the ninth spell 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
--------------------------------------
#:~:text=%22Homenum,Friends%20app%2E
#:~:text="Homenum,Friends%20app.

Links
-----
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=%22Homenum,Friends%20app%2E
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text="Homenum,Friends%20app.

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 whole ninth spellfrom the section title to the last part of the last bullet.

Examples of #:~:text=textStart,textEnd
--------------------------------------
#:~:text=9,action.
#:~:text=9,action%2E

Links
-----
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=9,action.
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=9,action%2E

Now if I want to make the connection with 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
-----------------------------------------
#:~:text=chosen-,emergency%20contacts,-.
#:~:text=chosen-,emergency%20contacts,-%2E

Links
-----
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=chosen-,emergency%20contacts,-.
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=chosen-,emergency%20contacts,-%2E

Just using “chosen-” as a prefix- without specifying a suffix – will also take us there.

Example of #:~:text=prefix-,text
--------------------------------
#:~:text=chosen-,emergency%20contacts

Link
----
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=chosen-,emergency%20contacts
#:~:text=textStart,textEnd (left) | #:~:text=prefix-,text,-suffix or #:~:text=prefix-,text (right)

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

Examples of #:~:text=text,-suffix
---------------------------------
#:~:text=emergency%20contacts,-.
#:~:text=emergency%20contacts,-%2E

Links
-----
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=emergency%20contacts,-.
https://gadgethacks.com/how-to/potter-spells-0384951#:~:text=emergency%20contacts,-%2E

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 will take you directly to the ninth spell in our guide to Harry Potter spells for Siri and highlight the entire first paragraph under the title.

Examples of #IDattribute:~:text=textStart
-----------------------------------------
#jump-9heysirihomenumrevelio:~:text=%22Homenum,Friends%20app%2E
#jump-9heysirihomenumrevelio:~:text=%22Homenum,Friends%20app.

Links
-----
https://gadgethacks.com/how-to/potter-spells-0384951#jump-9heysirihomenumrevelio:~:text=%22Homenum,Friends%20app%2E
https://gadgethacks.com/how-to/potter-spells-0384951#jump-9heysirihomenumrevelio:~:text=%22Homenum,Friends%20app.
#:~:text=text,-suffix (left) | #IDattribute:~:text=textStart (right)

5. If text fragments aren’t working for you

Safari had a “Scroll to Text Fragment” experimental feature you could activate since iOS 15.4, but this was only 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 everything to defaults,” also available from 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. Obtain a lifetime subscription to VPN Unlimited for all your devices with a one-time purchase of new Gadget Hacks Storeand 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

Share.

Comments are closed.