How can I optimize my pages for reader view?
I have a website, a typical three column design, with NAV, MAIN and ASIDE elements. A reader view option appears in Firefox, but ironically, only the ads in my ASIDE element show up when I click it.
The MAIN content uses SUMMARY/DETAILS to group things. Personally, I would think this combination would scream reader view content, yet MAIN is ignored entirely. It has some links, but so does my ASIDE (advert) content.
My ads are simple blurbs and links, no pictures, for my own ebooks, and are not served by a third party, so I can see how they could get picked up and I'm fine with that. What puzzles me is why the MAIN content is being ignored.
The site in question is: https://waxphilosophic.sdf.org/erotica/ It is marginally safe for work provided you do not click any of the links. No explicit images.
As a test, I even tried changing the SUMMARY/DETAIL of my "What's New" section to ARTICLE followed by an H2 heading. No change in behavior. https://waxphilosophic.sdf.org/erotica/test.html
The HTML passes the W3 validator. I searched Firefox Help / Stack Exchange. Any suggestions would be greatly appreciated.
All Replies (17)
Please checkout this thread: https://support.mozilla.org/en-US/questions/1140969#question-reply
Hope that helps! Thanks,
Thank you. I appreciate the quick reply. Unfortunately, the link is giving a "Service Unavailable" error at the moment, so I don't know yet if it will solve my problem. I will check again later.
Posting the content here for you: A scoring system is used to identify the "main" section of the content, but I don't know how to document it without extensive experimentation Maybe you can follow it better than I can:
https://dxr.mozilla.org/mozilla-release/source/toolkit/components/reader/Readability.js#625 (_grabArticle function)
Sorry, I should have been more specific in my reply. Your link for support.mozilla.org was fine. It was the dxr.mozilla.org that gave me "Service Unavailable". It's still doing that today.
I assume this is a repository for the Reader's JavaScript code. Is there an alternate location or mirror?
This one probably is a bit updated from the built-in one:
https://github.com/mozilla/readability/blob/master/Readability.js
Thank you, @jscher2020. Davina, there you go.
Thanks all for posting the links. I'm sorry to be slow in responding. About half of the email notifications seem to end up in the spam folder.
I'll look these over and see if I can figure it out.
I think my problem lies somewhere in here (lines 104 -- 109):
// The number of top candidates to consider when analysing how // tight the competition is among candidates. DEFAULT_N_TOP_CANDIDATES: 5,
// Element tags to score by default.
DEFAULT_TAGS_TO_SCORE: "section,h2,h3,h4,h5,h6,p,td,pre".toUpperCase().split(","),
I use H2 headings in my ASIDE content and SUMMARY/DETAILS in my MAIN content, so the DEFAULT_TAGS_TO_SCORE list is excluding the SUMMARY/DETAILS. And if DEFAULT_N_TOP_CANDIDATES: 5 limits the number of articles to five, that explains why not all of my ASIDE H2s are displayed.
But, in one of my tests, I changed all of the SUMMARY/DETAILS in my MAIN section to H2 inside an ARTICLE element. So either the ARTICLE tag made it somehow ignore the H2, or the limit of five got it. If it was the limit of five, then why did it scan my ASIDE section before MAIN? I would think the name MAIN would scream, "Here's the good stuff!"
Just thinking out loud here. No need to answer any of that.
I'll keep digging and post my findings. Thank you all for your help.
Hello Davina Lee, Maybe this article will work: https://mzl.la/3etnJmX
Tell me how it goes and Stay Safe!
@Tommy -- Thanks for the link. I'm pretty comfortable with how reader view works from a user standpoint. What I'm puzzling with is how to get my own web site to look better in reader view. When I select it, I end up seeing my ASIDE content, but not my MAIN content, which seems contrary to what it should be doing.
A scoring system is used to identify the "main" section of the content, but I don't know how to document it without extensive experimentation Maybe you can follow it better than I can: https://dxr.mozilla.org/mozilla-release/source/toolkit/components/reader/Readability.js#625 (_grabArticle function)
@AMAN ARYAN Thank you for the link to the code. For whatever reason that one always gives me a "Service Unavailable" error. So, I've been using https://github.com/mozilla/readability/blob/master/Readability.js as my reference.
I made changes to my site, forgoing the SUMMARY/DETAILS I had been using in the MAIN section, in favor of SECTION with an H2 heading. It made no difference. It still only picks up what's in the ASIDE, which, ironically is the the most advertising heavy portion of my site.
I have yet to figure out what triggers this strange behavior. My site passes W3C validation. I'm on the latest Firefox version. Still searching.
Hi !
You can try installing this add-on that will force-enable Reader View even if the icon is not displayed :
https://addons.mozilla.org/En-US/firefox/addon/activate-reader-view/
This addon adds a button to the toolbar. Clicking on it activates the Reader View feature even if the icon in the address bar is not present. Technically, this add-on prepends “about:reader?url=” to the current tab’s address.
@Shashank Shekhar Thank you for the link to the extension. I have not had any trouble getting the reader view icon to appear. The problem is, when I click on it, I get different content than what I would expect. I get the adverts in the ASIDE part of my site instead of the news and info SECTION elements in MAIN. I'm trying to figure out why.
A scoring system is used to identify the "main" section of the content, but I don't know how to document it without extensive experimentation Maybe you can follow it better than I can: https://dxr.mozilla.org/mozilla-release/source/toolkit/components/reader/Readability.js#625 (_grabArticle function) Thanks very much. I'll pass it on to a techie to make sense of it.
@Aashish Kumar Thanks. I've look at this too, but my JavaScript chops are not enough that I can figure it out.