Improve reader mode

[kristinashu]

I noticed that reader mode for https://foundation.mozilla.org/en/campaigns/regrets-reporter/findings/ only shows the Intro text and the end Recommendations but is missing most of the content.

• Update template so that it shows all the text in reader mode

Screen cap from prod:

[Pomax]

To my understanding, all reader mode does is throw everything except

away, using "mostly its own CSS" that you get zero control over because if you did you could sneak all sorts of things back in with crafty before/after code (edited). Looking at the site in FF on desktop I get all the content when entering reader mode, which platform and browser does the content go missing for?

[kristinashu]

I got this on my iPhone within Twitter (clicking on the link in Twitter opens the link within Twitter in Reader View). I don't really know how to test it more broadly.

[Pomax]

I may have to hand this over to whomever has an iPhone =S

[kristinashu]

@danielfmiranda let me know if I can help with anything!

[danielfmiranda]

Hi Everyone!

Here are my findings regarding this issue:

• I can confirm that for me as well, Firefox reader mode on both desktop and mobile render the content correctly.
• According to this article, google chrome removed the reader view functionality in late 2019, and it is now only available through 3rd party extensions. However, the content also displayed correctly with them.
• It appears that Safari is the only browser in which I can reproduce the bug in both mobile and desktop, and it appears that twitter is also using a safari based in-app browser, which is why it is not rendering correctly either.

After some more investigation, it appears that each browser implements its own algorithm for generating reader views (link to mozillas) If your page does not score high enough in this, the reader view button wont display at all. Which makes sense knowing that the content is rendering correctly on Firefox but not safari-based browsers.

From what I have read and tested, it looks as if firefox reader mode is rendering any P element on the page, where Safari is instead looking for P elements that are grouped together under items like headings, etc.

Below is a screenshot of the youtube-regrets code with some extra elements that I have added outlined in red:

Here it is rendered in Safari Reader Mode:

We can see that the items #1 and #2 are being rendered, however the 3rd and 4th elements are being skipped, I am assuming since they are not wrapped in a outer div with other elements like headings and such.

Taking a look at the youtube-regrets code, it seems like the items that are not being rendered are usually wrapped in multiple divs for bootstrap formatting, and then finally rendering a singular P tag.

My question for @benhohner @Pomax would be, should I create a follow up ticket for refactoring the code to work with safari reader mode? Or just wrap up this ticket?

Thanks!

Links to items I read for those interested:

• How does fire fox reader mode operate
• Firefox reader mode source code
• Article about safari reader mode
• More about safari reader mode

[kristinashu]

Expanding the scope of this to include the Publications template since there has been feedback that users are having issues.

Table of contents on Publications pages and the navigation arrows at the bottom of Article pages are not visible in Twitter on my iPhone.

Screen caps:

[kristinashu]

This is also the case with PNI product pages (can't see any info past the blurb).

[jamilasnell]

@kristinashu doesn't seem like the solution for this issue would make sense for the audience size of this problem. I think we should close this issue as it would take a large amount of resources to solve.

[danielfmiranda]

Spoke to Kristina and am closing the issue!