reader-view | Access Firefox 's built in reader view | Addon library
kandi X-RAY | reader-view Summary
kandi X-RAY | reader-view Summary
Strips away clutter like buttons, background images, and changes the page's text size, contrast, and layout for better readability.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of reader-view
reader-view Key Features
reader-view Examples and Code Snippets
Community Discussions
Trending Discussions on reader-view
QUESTION
Browser "reader mode" reformats web pages to make them more accessible/readble according to individual users' needs (spacing, contrast, font, etc).
While every browser implements reader mode differently, in general, they all nail article-style sites, like Medium, New York Times, Lifehacker, etc.
Problem / QuestionBut on StackOverflow, reader modes almost all break in various ways, displaying often only the question and/or first answer; the other content is simply missing.
What, specifically, about the HTML structure of SO/SE pages confuses browser reader modes?
Put another way, how could the HTML structure of the page be changed to allow browser reader mode to correctly parse and display all the question/answer content?
Progress so farFrom comparing various browsers,* mobile and desktop, it seems that there is some kind of simple heuristic that reader mode uses to determine what content to display, like, "show only the element with the most text, and hide all other content." Or, "show only the element with the most text, but weighted toward elements closer to the top of the page."
*Tried so far (mobile and desktop): Firefox, Safari, and Chrome (note that Chrome only has this natively on mobile, and calls it "simplified view"). Access to reader mode on Firefox and Safari is in the URL bar; access in Chrome is at the bottom of the screen, when supported.
But it's also possible that there is some scanning of element tags/classes/ids looking for a semantic indication of what the important content is.
From poking around in browser DevTools, I've noticed that there appear to be two wrapper
. This baffles me, because often it's the first question and first answer that get displayed, while I would expect one or the other -- or for the reader to detect the wrapper and display all the content.
While all browsers implement this differently, since they can all handle article-style sites with no problem, cutting out non-content elements, I'm looking for a tweak to the structure or semantics of SO/SE pages that would similarly induce browser reader modes to capture all the content.
AccessibilitySE recently widened its line spacing across all SE/SO sites to promote accessibility (e.g. for readers with dyslexia). My question here is the technical sister-question to my post on meta, in which I suggest that SE sites better support reader views.(Note that I am not for or against the formatting change; I'm just interested in investigating a way to support user-determined formatting through reader modes.) I'm hoping that this question will serve as the technical-investigation corollary to that post, and will yield some actionable information about what modifications could be made to support browser reader modes.
...ANSWER
Answered 2020-Sep-02 at 20:05Here is the source code for reader view for FireFox, we can use this to make some best guesses as to why Stack Overflow doesn't quite work. I would imagine similar criteria is used for other reader view implementations.
Criteria used by reader view that conflict with Stack OverflowA few thing jump out as to why Stack Overflow doesn't work with a reader view.
It uses criteria designed to remove comments from a page.There are a few criteria such as length of text (300+ characters for max points as likely candidate), use of commas and class names all designed to remove nodes that look like comments.
As reader mode is designed to read blog posts this is obviously favourable, but on Stack Overflow this is likely to remove large sections of the page as candidates as they have lots of low scoring nodes (I mean....who uses commas in comments anyway? They use valuable characters of your character count! hehe).
Reader View doesn't use semantics as an indicatorThis one surprised me, but it doesn't look for semantic elements such as ,
This wouldn't help Stack Overflow as it stands as they don't use them either but it would have been my immediate thought on how to fix this.
Class names don't help Stack OverflowHowever they do look for class names that indicate whether an item is likely to be relevant.
Negative classes (which I believe include partial matches such as "main-comments" for "comment") are as follows (which are likely to result in a node being removed from the likely candidates list):-
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install reader-view
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page