Safari Reader Mode Questions

vermistrix · August 7, 2024, 12:17am

i am trying to get my site to work (well, at least appear in reader mode for phones), but i’m constantly running into a problem that certain pages have a reader mode on web (firefox) but on my phone i can’t access the page in reader mode.

i’ve done a little research into how reader mode works on safari/ios and it seems to be relatively the same as web: just wrap everything you want to appear in reader mode in an <article> tag, which i do religiously, but that’s not really working.

additionally, it appears that content in <span> or <div> elements don’t appear on ios reader mode either, even if those items are themselves contained within a <p> inside an <article>.

for example, with this page: August 5, 2024 | Blog on firefox, those numbered sidenotes appear inside the text when in reader mode; but on ios, those sidenotes are completely gone. i can’t quite get a clear answer on how best to optimise my html for reader mode, so i’m just wondering if anyone else has had similar issues or thoughts on this topic?

Jay · August 7, 2024, 4:16pm

I use firefox on mobile as well, and one thing I’ve encountered is reader mode (especially on phones) requires some nonspecific but ‘significant’ amount of words before it will allow you to use it, if you’re having issues with reader mode appearing. Like my index page won’t load in reader mode, even though I put it in article tags, but my blog posts work fine.

Checking out the page you linked on mobile, I can’t see the side notes at ALL on mobile, reader mode or not. It might purely be a mobile-optimization thing, rather than a reader mode thing.

vermistrix · August 7, 2024, 6:41pm

hmm, that actually does make sense. when creating pages for my blog, for instance, i couldn’t get firefox’s reader mode to appear unless i pasted in a bunch of lorem ipsum–so it tracks.

as for the sidenotes, they are actually optimised for mobile, but you just have to click the little superscript numbers to get them to appear. i based them off how tufte.css does sidenotes, but it seems it’s not 100% obvious how to access them. is it that the numbers were too small or the fact that they could be clicked wasn’t clear?

Jay · August 7, 2024, 9:56pm

Not clear enough that it can be clicked, IMO; I read over it and assumed it was a footnote- that is, I would see the further context at the bottom.

vermistrix · August 9, 2024, 12:08am

thank you for the tip–i decided to retool the sidenotes entirely to make them more obvious and did a little something to clarify that they can be clicked on!

as for the reader mode issue, it ultimately seems that no matter how properly i use semantic html, the size of the content is all that the browser takes into consideration on if to display reader mode or not. i wish there was a way to fix this as there are text-only pages on my site with not too small amounts of text, yet still not enough to display the mode. or in some cases reader mode won’t display all the text on the page because one article doesn’t have enough to reach whatever arbitrary threshold it’s counting by :sigh:

vermistrix · August 13, 2024, 9:02pm

Bumping this thread as I’m having yet another reader mode-related issue on two more pages.

I have two bookmarks directories that are just pages full of links, which should work just fine in reader mode, but aren’t.

On the first page reader mode works on desktop (firefox) and you can see all the content on the page, including the site button links. But on my phone (ios safari) you can only see the content of the first article box and literally nothing else.

On the second page reader mode only shows the content of the first article box both on desktop (firefox) and mobile (ios safari).

I’m pretty sure my semantic elements are all correct, plus it’s just lists and links so there should be more than enough content to make them appear in reader mode.

Can anyone help me figure out what I’m missing here? I’ve been trying to solve this for a few days now and just can’t figure out what I’m doing wrong.

memo · August 13, 2024, 9:14pm

Hard to say for sure for Safari, but Mozilla’s Readability is open source and we can see it measures link density.

github.com

mozilla/readability/blob/87ceb71a0e916194e40ccf77e50aead678796565/Readability.js#L2085


      
            }
          },
          
          /**
           * Get the density of links as a percentage of the content
           * This is the amount of text that is inside a link divided by the total text in the node.
           *
           * @param Element
           * @return number (float)
           **/
          _getLinkDensity(element) {
            var textLength = this._getInnerText(element).length;
            if (textLength === 0) {
              return 0;
            }
          
            var linkLength = 0;
          
            // XXX implement _reduceNodeList?
            this._forEachNode(element.getElementsByTagName("a"), function (linkNode) {
              var href = linkNode.getAttribute("href");

vermistrix · August 13, 2024, 11:21pm

Could you elaborate on what this means? Sorry, I don’t get all the technical side of webweaving, but does this indicate that there are too many links and not enough text (p) on the page?

memo · August 13, 2024, 11:40pm

The heuristic is something like an element with mostly or only links is probably navigation or a chumbox and should be excluded from the reader view.

Similarly, an element will be removed from reader view if it doesn’t have enough commas and the ratio of paragraphs to other elements is too low.

An article must have 500 characters. Lists can’t be too long.

The intended use is to get a distraction-free view of an article. Links pages probably were not contemplated by the designers.

vermistrix · August 14, 2024, 9:06pm

huh, well then i think can just fix the second writerly bookmarks page by adding some descriptions beside the links so it’s not just a page of straight links with literally nothing else.

alas, i don’t think this will solve the safari reader mode issue unfortunately, though :/