How To: Your iPhone's Safari App Includes a Hidden Feature Every Web Browser Needs — And No One Is Talking About It!

Your iPhone's Safari App Includes a Hidden Feature Every Web Browser Needs — And No One Is Talking About It!

Safari has a major new feature for your iPhone, something that will change how you share, receive, and interact with links — and nobody is talking about it. The feature works on the latest iOS software, as well as the latest iPadOS and macOS versions. Still, you won't find any information about it in Safari's app or settings, so it's pretty hidden if you haven't seen it by accident yet.

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 it, making hunting for information more accessible when you know what you're looking for. You just tap or click a link to jump to the right spot 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 scheme, authority, path, and query parts. The number sign or hash mark (#) is the fragment identifier, and what follows it links to a specific section of the web document. These are coded into the webpage, deep linking to a particular "id" attribute, so just typing a # followed by a word or phrase won't do anything unless you're using the assigned anchor tag.

https://en.wikipedia.org/wiki/WonderHowTo#WonderHowTo_Network
|___|   |______________||_______________||__________________|
  |             |               |                 |
scheme      authority          path            fragment

Gadget Hacks also uses URL fragments to jump you straight 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 guide on Harry Potter spells for Siri.

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

These links are very helpful when navigating the web, but not every website uses them. That's where text fragments come in, a proposed specification by the Web Incubator Community Group (WICG) that lets you link or go to a specific part of almost any webpage without the need of 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 jumped on board with Safari 16.1, which came with the iOS 16.1 update on Oct. 24, 2022. (It's also available on iPadOS 16.1 and later and macOS 13.0 and later.)

Text fragments' syntax is pretty simple, as seen below. It starts with the # as do all fragments, then uses :~:text= (the fragment directive) to indicate the following percent-encoded text should be found, highlighted, and immediately scrolled to automatically. There are also a few other options to help you highlight a whole block of text or find specific text instead of its first appearance.

It is reserved for user agent instructions, such as text=, and is stripped from the URL during loading so that author 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 vs. 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 (left GIF below). With Safari on iOS 16.1, the unique URL formatted to highlight specific text on the webpage jumps right to that part of the article, highlighting the text (right GIF below).

Not working on iOS 16.0.3 and earlier (left) vs. working on iOS 16.1 (right).

4. Example Uses of Text Fragments

The below link to our list of Harry Potter spells for Siri takes you directly to the words "the human-presence-revealing spell" 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, period (%2E), dash (%2D), and quotation mark (%22) do not have to 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 in a period (.), you can paste it into Safari and get it to work just fine. However, if you share it via Messages, the app will recognize and separate the period as part of your message's text, removing it from the URL.

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

And the following link highlights the entire ninth spell, from the section's heading to the last part of the last bullet line.

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 link to the words "emergency contacts" in the 14th spell instead of in the 12th spell where they first appear, I can use the prefix- and -suffix parts to jump over 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 the prefix- without indicating a -suffix will also get 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 the -suffix will take us to the 12th spell since it's the first instance 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 fragments also work with regular site-coded fragments. So if the text ever changes in the text fragment, it will still point you to the section with a matching "id" attribute on the page. The links below take you directly to the ninth spell in our guide on Harry Potter spells for Siri and highlight the entire first paragraph below the heading.

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 has had a "Scroll to Text Fragment" experimental feature you could activate since iOS 15.4, but it was only beneficial to developers until now. Before iOS 16.1, it was disabled by default, but now it's enabled by default.

If you went messing in Safari's experimental WebKit features menu and accidentally turned off "Scroll to Text Fragment," you can toggle it back on by going to Settings –> Safari –> Advanced –> Experimental Features –> Scroll to Text Fragment. Instead of toggling it on, you could also scroll to the bottom of the list and hit "Reset All to Defaults."

6. Formatting Text Fragments to Share

As you can see from the syntax above, formatting a text snippet to be highlighted is relatively simple if you're used to percent-encoding URLs. Otherwise, it's a bit complicated to remember.

Unfortunately, there isn't an 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 the text, then choose "Create Link" from the contextual menu that appears. That option doesn't appear in Safari.

Creating a text fragment link in Chrome and sharing it with WhatsApp.

You can try highlighting text in Safari, then hit the share button, but it doesn't do anything special with the URL, though it will give it a rich text preview for Apple apps like Messages, Mail, and Notes with the highlighted text in a quote block. Using "Share" from the contextual 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 it manually until a better shortcut comes along. I may update my shortcut when I have the time to dig in, but you're more than welcome to take a crack at it.

Just updated your iPhone to iOS 18? You'll find a ton of hot new features for some of your most-used Apple apps. Dive in and see for yourself:

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

Be the First to Comment

Share Your Thoughts

  • Hot
  • Latest