The most underused browser feature: reader mode
frankgroeneveld.nlI'm a huge fan of Readability Mode and use it often. It's proof that Web design isn't the solution, Web design is the problem.
For those who are using e-ink devices, or even just standard tablets, EInkBro is another immensely useful tool. Yes, it's a standalone browser, not a mode on Firefox, Safari, Vivalti, etc.
https://github.com/plateaukao/browser
(Available through Google Play, F-Droid and other sources. Android-only, sorry iOS fans.)
What it offers over standard browsers is that it's optimised for e-ink displays. That is, it favours pagination over scrolling, runs to full-screen, can easily adjust font size up or down (no more itsy-bitsy-teen-weenie-yellow-polka-dot HN fonts), bold text, and has its own reader mode as well.
Even on a standard tablet, some of these features are a huge step above and beyond the mainstream browsers.
The feature-set is limited, some of the UI is a bit rough, and a few things are just plain broken (if you need to edit entries in the JS or Cookie enabled/disabled sites ... you have to delete all data and start over again).
That said, my usage is evolving from sending individual pages to EInkBrow when I want to do long-form reading, to using it at least part-time as a primary browser. (Mozilla Fennec Fox is my first choice, still.) The browser is stable and very much usable despite this. The developer is responsive to requests and bug reports.
What's most refreshing is that the design principle is readability of Web content, as determined by the user, and not by the page author or publisher.
I wish somebody would create a DL/GAN/style-transfer tool to automatically change the style of any website into https://motherfuckingwebsite.com/
(regardless of how the website is structured, so deleting the CSS doesn't count)
On emissive / colour displays, this still is my preference:
https://codepen.io/dredmorbius/full/KpMqqB
On e-ink, the off-white / off-black colour palette is actually something of a probem, though the page otherwise remains highly readable.
From the original page, the lack of margins is a problem. Text running straight into the gutter is a readability problem.
This wouldn't be HN without some snark^H^H^H^H^Hconstructive feedback, so... it's perfect, except it's missing a fake quote at the end.
Also, I hate the yellow.
(Am I the odd one out here to prefer cold light to warm light? Warm light makes me seriously sleepy. But everyone I talk to, they all prefer to have warm lightning in their homes. And like with home lightning, I feel the same about webpages. On HN I got used to warm colors over the years; everywhere else I hate them.)
But seriously - great job!
Warm light doesn't make people sleepy, blue light keeps people awake. So basically: you are sleep deprived, the blue light is keeping you awake, and without realizing it you consider that a feature rather than a bug, whereas many other people conclude the opposite. Which is of course fine, you decide what's best for you.
Given how big of an impact good sleep (or lack thereof) has on my physical and mental health I am in the latter camp too, using a red filter on my screens even during day-time, but everyone's situation is different.
That's a possible explanation, but the same happens to me during the day, even when I'm well rested.
Cold light is much closer to natural sunlight than warm light. So working in a warm-lighted environment can be seen as being deprived of the blue parts of the spectrum that should be there. Blue light keeping you awake is a feature because the natural environment in which we evolved is saturated by it during the day.
I use blue light filters on my screens too, but they're timed to turn on around sunset. Ideally, everyone would have adequate access to raw sunlight during the day, but that's not the case for many (myself included) - whether because they live/work in a city, or because it's overcast weather, or both (like me, right now).
Right, makes sense. Sounds like that was the bit of context I was missing and also taking for granted: available natural sunlight. And I should have thought of that, honestly: I work next to a window with lots of light during summer, but in winter I use a high-power lamp to fake sunlight.
(plus I happen to treat blue light filters as an "default with opt-out possibility" kind of setting in general)
I do wonder if you might benefit more (during daytime) from a high-powered daylight lamp though, since light intensity also matters when regulating sleep cycles.
Quite likely. I'm considering it for my new location.
My current home office has a ceiling light fixture with three slots, adapted to low-wattage incandescents. I've plugged in three Hue bulbs I had sitting in a drawer, and tuned them to full intensity and color temperature as close to natural daylight as the bulbs can get. As a result, the lights almost always outshine the available daylight. I feel pretty comfortable with this temperature and intensity. Plus, my eyestrain reduced a bit, as the difference between room lightning and computer screen brightness isn't that big anymore.
On evenings, my color filters kick in on the screens, and I either kill two of the three bulbs, or bring their color temperature down.
Happy experimenting after the move then, I hope it works out!
If I may quote some motherfucker on the web:
And no, you don't have to fucking love all my shit
The background colour's the 2nd CSS rule (followed immediately by text). If I were to redo the page, I'd have a media query for colour depth and set those to #fff and #000 respectively for B&W screens anyway.
Love it. Would you mind putting it on Github and making the licence MIT so that I can use it and link back to you? I really like it, makes it so easy to read. Big like for the nice transition on hovering links as well.
Consider it MIT / BSD 2-phrase or more permissive.
(I don't have the login handy for that CodePen account presently.)
thank you!
I think that is very good (even though they say it is satire, it is good). (The end user should apply their own CSS if wanted; my idea of "meta-CSS" (not implemented or even properly defined yet) would allow the end user to conditionally apply CSS, so that for example it will only apply to those that don't have their own CSS (or whatever other criteria you might want); meta-CSS would also be the way for the user to configure media queries such as dark mode preference, etc.)
For some web pages, deleting the CSS can help, sometimes not. Perhaps the way to go about such a thing is to consider mainly HTML, also considering CSS and ARIA to fix the layout (some web pages have forms that don't work correctly when CSS is disabled, but I have seen them have ARIA; an implementation could use ARIA to fix up any forms that are broken by doing so). So, while the CSS can be deleted, it still might need to consider it for some purposes, such as checking if something should be removed or formatted differently (e.g. emphasis, fixpitch, etc; HTML can specify such things too but it is not always done properly).
(That web page does have Google Analytics, with the comment "yes, I know...wanna fight about it?" preceding it, but you can just disable JavaScripts to avoid it.)
> (The end user should apply their own CSS if wanted;
I still remember the time when user styles were a first class feature built into all browsers. Hell, that 'C' in CSS - "Cascading" - was always there to allow styles to enhance/override prior styles, including allowing the user to override website's styling. Back before web designers ruined everything by making every web page into its own special snowflake, people thought users would have one or two default CSS sheets to choose from and apply to any webpage, the way we today think about "dark mode".
These days, we have to resort to using browser extensions. A well-known one is Stylus [0][1]. In a way, it's much better than old built-in user styles. But then, it's not built in. Still, it's a nice way to fix up some of the frequently visited websites.
--
[0] - https://github.com/openstyles/stylus
[1] - Mind the name, it's "Stylus", not "Stylish" - the latter used to be popular, but then it sold out and become another peace of surveillance capitalism detritus. Stylus is a GPLv3 fork of Stylish with data collection removed.
userChrome.css and userContent.css still work just fine in Firefox (though you have to enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config first). I'm using them to (re-)style both the Firefox UI as well as some specific sites.
> It's proof that Web design isn't the solution, Web design is the problem.
This is only true when your Web activity is limited to reading a static page of text, which is only one of many (albeit more common) use cases for the web.
I love reader mode too but the assertion that web design is never a solution to a problem is silly. Am I supposed to turn on reader mode on YouTube, Codepen, AudioNodes, an interactive tutorial, or a captivating experience website on Awaards.com? The modern web is so much more than text now.
Nonetheless, I agree... Most articles I read from HN would be intolerable or literally unusable without reader mode.
How can I implement my website such that it is optimally useful for browsers like this? Just avoid flashy stuff? Is there any way to list my blog somewhere as a friendly place to read? I'm spinning it up again after a year off for reasons that I will probably write about :)
I've just poked through both the GetPocket site (https://getpocket.com/publisher/) and Mozilla's Readability Library GitHub page (https://github.com/mozilla/readability) without seeing obvious guidelines.
My general suspicion is that adhering to a simple HTML5 documemnt structure, and possible use of microformats (https://microformats.io/) goes a long way.
Update: there's some discussion here: https://news.ycombinator.com/item?id=28301113
I haven't seen guidelines lately, but Readability.com, before it was shut down, did have a page that's archived here: http://web.archive.org/web/20160301180825/https://readabilit...
Thanks, yes I remember that page.
Adhere to the actual semantic meaning of HTML5 tags and browsers will handle the rest - honestly. So long as you're not using JS to swap in hidden content and CSS to arbitrarily reorder content flow then even aria hints are pretty unnecessary - but adding the relevant aria attributes will make sure that screen readers have an easier time.
Not abusing the tags solves pretty much everything at this point because the browsers can't trust anyone. Just read up on HTML5 and how tags should be used... then follow that.
For writers, that is a good idea (although I think there are a few things missing from most implementations, such as foot notes, and a table of contents window; I do have the idea of a "feature" attribute to handle such things, but it is not implemented either (although using it is harmless, since unrecognized attributes in HTML will be ignored)). CSS should mostly be not needed.
For readers, it will be necessary to fix the implementation to do the working better, since not everyone will write it properly.
I recently worked on implementing readability in my app and here's the resources I found most useful:
A very long read but this covers everything:
> How to Section Your HTML
https://css-tricks.com/how-to-section-your-html/
These are specifically important for accessibility users.
Another short read:
> HTML5 sectioning elements, headings, and document outlines
https://www.456bereastreet.com/archive/201103/html5_sectioni...
And you can use Markup Validation Service to validate and get tips:
https://validator.w3.org/#validate_by_input+with_options
Check out the excellent answer by Christian Kohlschütter on how readability works:
https://stackoverflow.com/questions/3652657/what-algorithm-d...
Thank you so much. I have been looking for a good browser for E-Ink devices for years.
I'll also take the opportunity to mention that AnkiDroid works perfectly fine on E-Ink devices such as Nook. You don't even need root anymore, just install a launcher via ADB. I literally spend an hour every day on my Nook with AnkiDroid.
Thanks for linking that, I'm going to try it on my reader when I get home. I like my boox for most things I try to use it for, but right now the pain point is all the royalroad webnovels I'm addicted to.
I have both Mozilla Pocket and EInkBro on the BOOX.
My preference is to read in EInkBro.
Pocket's craptastic pagination is endless frustration.
(I still use Pocket to save/tag content. But for what's supposed to be an enhanced readability tool, it's increasingly insufficient.)
I'm guessing this won't work with Remarkable.
Or what are some good e-ink devices for this I wonder?
Depending on how far you want to go, there are VNC clients[1], toltec has opkg-installable stuff including at least one browser[2] known to work, and there are full OS replacements that let you run a full linux GUI[3] which can almost certainly run a normal-ish desktop browser.
So while this one won't work, there are options.
[1] https://github.com/reHackable/awesome-reMarkable [2] https://toltec-dev.org/ [3] http://www.davisr.me/projects/parabola-rm/
Any Android-based device.
Potentially in future, Linux-based devices which can run Android apps.
I'm not a particular fan of Android. Its application ecosystem is a bonus though.
Again, this is installable through F-Droid.
Checking installing on an older tablet: EInkBro works, though having it display colour is ... slightly disconcerting.
But if you want to get a sense of the app, it's possible to do so.
Any developers who'd like to contribute to improving how article content is extracted from web pages should check out Mozilla's Readability repository: https://github.com/mozilla/readability
I'm currently trying to bring the PHP port up to speed here: https://github.com/fivefilters/readability.php
We use an older version as part of our article extraction for Push to Kindle: https://www.fivefilters.org/push-to-kindle/
I believe the Instant View[1] crowdsourcing model where people write templates for each website could boost a lot these parsers (hope they open source it soon). Its just impossible to make these extensions work for every single website with some simple heuristics.
Check the codebase of some popular parsers:
Firefox (already mentioned): https://github.com/mozilla/readability/blob/master/Readabili...
Google Chrome: https://github.com/chromium/dom-distiller
Mercury parser: https://github.com/postlight/mercury-parser
Thanks for mentioning Instant View, I hadn't come across that. We actually maintain something similar here: https://github.com/fivefilters/ftr-site-config
We use these in our own tools and also get contributions from others, including Wallabag users: https://github.com/wallabag/wallabag
Before it was sold, Instapaper used to have something similar. A public database of its site-specific extraction templates. We used that as the starting point for our repository.
FYI your API pricing page doesn't seem to load https://rapidapi.com/user/fivefilters
Thanks to both of you for expanding my 'readable web' toolbox.
What do you fallback to if the rule is not present or doesn't work?
In our case, we try to match using the XPath selectors that we have for the site. If we don't have any, or they fail to match anything for the title, author, or body, we then go to Readability and let it do its thing to try and extract whatever we're missing.
Makes sense. What does 'prune' and 'tidy' instruct parser to do?
Prune instructs the parser to remove any elements within the extracted article block that look superfluous. This can result in false positives, so we tend to disable it when we've gone to the trouble of creating site-specific extraction rules.
Tidy determines if the source HTML should be cleaned up first with HTML Tidy - https://github.com/htacg/tidy-html5. If you're parsing the source HTML with an HTML 5 parser, as we are now, it shouldn't be necessary any more (I think we actually ignore it now). We used it more before when we relied on libxml parsing, which often trips up on modern HTML.
Another cool crowdsourced thing I discovered recently is SponsorBlock [1] which is an extension to automatically skip sponsored content in Youtube videos. Users contribute timings to the database that everyone else uses. It works remarkably well, any recent video with more than about 50,000 views is pretty much guaranteed to have timings submitted.
Is it possible to utilize the database of Instant View per-site parsers in a web browser or extension's reader mode?
ArchiveBox is a tool that downloads web pages and saves them in various different formats: warc, pdf, rendered png, plain text. I wonder what it uses for plain text extraction and if the readability repo would be useful for that purpose.
Edit: Oh neat it does actually. https://github.com/ArchiveBox/ArchiveBox/wiki/Configuration#...
> Archive method SAVE_READABILITY
> Extract article text, summary, and byline using Mozilla's Readability library. Unlike the other methods, this does not download any additional files, so it's practically free from a disk usage perspective. It works by using any existing downloaded HTML version (e.g. wget, DOM dump, singlefile) and piping it into readability.
That's pretty amazing it already does it.
ArchiveBox and the other stuff from the "DIY no-credentials don't-care-about-the-rules" web archiving community, like ArchiveTeam.... continues to astound me with it's quality and "professionalism" (as a credentialed professional in the field of digital library stuff... they are often outdoing the actual credentialed professional community).
Aww thank you!
My suspicion is that there are an increasing number of publishers who are intentionally severing compatibility with Readability.
Washington Post, I'm looking at you mofos. Chief reason I'll seek out any alternative news site for archival. It's been this way for about a year, if not more.
I ported Mozilla’s Readability library to Go a couple of years ago [1] and use it every day to power a custom RSS feed of Hacker News via Reeder [2]. This is not a novelty, many people have ported Readability to different programming languages over the years.
O/T, but thanks for Push To Kindle. I found the browser version so useful I bought the iPhone app - both to use and also to support you. Brought a whole new field of usefulness to my Kindle
Thank you! That's really nice to hear. (Appreciate the support too.)
I wrote a Swift port of it last year for my app but it deviates from readability a fair bit as I tailed it a bit to my needs, I've considered cleaning it up and open sourcing it regardless. I know there is an Objective-C port floating around.
Do not clean it up just put it up there and let others do it! I'd be very interested in it, please reach out when you do.
Just reading through that code it seems like readbility is only intended to work on English language websites? Like it checks for nodes with class names matching /and|article|body|column|content|main|shadow/ and uses a minimum length of 140 characters for matching nodes that are reader-able. Seems a bit lazy for a company whose stated mission is "to ensure the Internet is a global public resource, open and accessible to all".
For what it's worth, even when working on Dutch websites my class names will usually be in English, and I think that's common across the industry. After all, the programming languages we use to write them are already in English, so Dutch class names would stick out like a sore thumb.
Another robust solution is Tranquility reader which exists as an extension and has better accuracy than Readability at the expense of speed.
https://github.com/ushnisha/tranquility-reader-webextensions
yes! I use this addon for firefox all the time. Usually I click on my "Tranquility!" button the moment the cookie notification pops up, no cookies needed ;) (good for articles via HN, also possible to circumvent some paywalls)
I love reader mode in Firefox. It will also do text to speech for you.
The voices seem to dependent on something built into the OS. They sound okay on windows and I haven't figured out how to get them to sound good on linux. On windows the voices sound good, but I Wish I could get it to go a little faster. The voices don't sound human so it takes some getting used to.
On linux the voices just sound more harsh. To the point I don't want to use it. If anyone knows a switch to flip or how to install additional voices to make them sound better, that would be great.
One of the little feature of reader mode I love is, if you time it correctly (before loading all javascript of the page) you can skip a lot of prompts ( subscribe to read / monthly limit reached and so on )
Try hard refreshing the page after you're in reader mode.
It's only a matter of time before sites start rolling out anti-reader mode "features."
It's already been done. Wired, for instance, only shows you the first paragraph of a story until you've made an account and logged in, even in reader mode.
Surely that's just any halfway-competent pay/sign-up wall, rather than specifically anti-reader mode?
If you wanna split hairs, sure. "Breaking reader mode" is a component of an access wall. For a while a lot of sites didn't have that, so reader mode would work to skip all that.
For sites dependent on link-aggregator sites (such as HN, Tildes, Mastodon, Diaspora, etc.)[1] for spreading and sharing content, hard paywalls tend to very strongly discourage further readership and sharing.
I'm aware that HN has multiple levels of penalties applied to sites / domains, for various reasons. Users may also flag inaccessible content. (I certainly do.)
________________________________
Notes:
1. If you've determined that "etc." is doing much heavy lifting here, congratulations. The resources listed are highly encouraged.
Not necessarily as they still want to be referenced properly.
The workaround was to whitelist Google's spider ips and remove the paywall for those but with the progress of other search engine / social nets it's more complicated to paywall without hurting SEO.
> The workaround was to whitelist Google's spider ips and remove the paywall for those
Isn't that against Google's own policies? I think they call it cloaking.
It's already happenning. Just like adblockers, anything that makes life better for users is actively fought against.
I stopped using these modes years ago because of inconsistent results that I assume must be from reader-blocking tech.
I stopped using those sites, instead. I figure that if they're so far up in themselves that they want to employ such user-hostile design, I'm probably not missing much if I just move on and read something else.
If you're on Firefox, there's an extension called Auto Reader Mode which saves you the game of "click reader mode before the popups appear."
Though I guess this extension is less useful now that many sites are purposely breaking reader mode.
I use Microsoft Edge exclusively for its read aloud function -- it doesn't require reader mode to be activated and has integration with Microsoft's 'natural voice' which is almost indistinguishable from regular speech. Also it will instantly start reading from whatever word you click on which helps with backtracking. The downside, of course, is having to use Edge.
+1 for Edge. Use it on my Macbook and love how it highlights the sentence it is currently reading and scrolls the page down automatically. It is not as good as Google Assistant on android. Google Assistant on android knows to skip past image captions and ads, and it knows when it has reached the end of an article; Edge simply reads everything it sees.
You'd think google would use the same architecture for chrome! I haven't found it to be nearly as useful.
I guess those parts are where Edge cannot use the same services Google uses anyway (since they're not allowed to). And if they have to provide their own TTS anyway, they can just as well improve over Chrome at that point.
How to activate this in Google Assistant? Is there a special application or something? Or do we just have to say "Ok google read this <URL> " ?
open a page you want to be read in Chrome, active google assistant and say 'Read It'. It also works with other Chromium based browsers (Brave and Edge).
For web developers, one thing to keep in mind with text to speech is that you can use the aria-hidden attribute to prevent things (like menus or ads) from being read.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...
If you add that to menus, they will be completely inaccessible to people dependent on screen readers, such as blind people.
Do you know how to enable this in Linux? I don't see a TTS option in reader mode on Firefox.
EDIT: I figured it out. I needed to install speech-dispatcher.
On Ubuntu
> sudo apt install speech-dispatcher
It's available on Linux for me. I'm on Pop! OS 21. The "listen" option is a set of earphones at the top left of the page.
The voices are awful to listen to, though.
Hilariously bad.
iirc, there are third party voices available.
For anyone interested, my hacker news app HACK does both reader node as well as read text to speech. It's brand new so any feedback is welcome:
https://play.google.com/store/apps/details?id=com.pranapps.h...
It's available on iOS too which uses the built in reader mode of safari.
Just tried it out. I usually use Harmonic, and in general I much prefer the UI - it's more minimalistic, lower contrast, and I prefer the font (Product Sans). It also has a built in ad blocker. However, I appreciate the various filtering options / different feeds and the archive access seems like a really useful feature.
On the whole I think I'll stick with Harmonic, but it looks like it has some potential.
The settings in my app can be customized to make it as minimalist as needed (like hide favicons, hide the metadata, only show titles etc). There’s also settings for color choices and a setting to use lower contrast text. Font sizes and paragraph spacing can be changed to make it more compact. My app has a built in adblocker too for the built in browser.
My app has reply push notifications too which I don’t think any of the other HN apps have.
As for the font, Product Sans is not legally allowed to be used by third parties as far as I am aware:
https://graphicdesign.stackexchange.com/questions/102262/can...
My app allows you to change fonts too and it supports Montserrat font which looks visually similar to Product Sans.
Please consider putting this on F-droid. Many people here don't use Google services and you're likely missing out on many downloads (including mine)
Thanks for the idea. I will research F droid and put it on there.
The text to speech goes through speech dispatcher which by default probably uses espeak. I believe there are better text to speech engines like festival which you should be able to have speech dispatcher use quite easily but I've never tried this.
There seems to be some ways to do it in linux, but haven't tried myself yet: https://askubuntu.com/questions/953509/how-can-i-change-the-...
I'm not super fond of having to run any particular background service for this.
Oh that must be new but it looks so useful. I had eye laser last year and looked a lot for exactly something like that for my 3-4 days of literally just laying down and not doing much, but couldn't find anything like this. My plan was to open the Gutenberg project HTML books (or plain text) and have the browser read them, but nothing satisfied me (specially since there was no "pause/scrub" in the ones I did find). Ended up listening to audiobooks in youtube and that was good enough.
Wow, never tried the voices before and they are hilarious on Linux (tried en-GB).
I just wish Firefox Focus had reader mode. It's my default browser on my phone, which gets me around free article limits on some sites, so having to open it in another browser can defeat that purpose.
You can now set regular Firefox to behave like Focus (Settings > delete browsing data on quit), and it does have reader mode.
No tts in Firefox for Android, sadly. That'd be really useful. Is there no way for Android apps to use the built-in system tts?
Yes, there is. Styx Browser on Fdroid has implemented it and also many other powerful features. Give a try, won't look back.
I think I have to share my incredulation; I always use Reader Mode on Safari iOS: lots of sites are quite literally unreadable otherwise.
And, in both macOS and iOS Safari, you have a per-website-setting to request reader view automatically. It's great.
Hardpress on the AA in the URL-bar and you activate it directly (if it’s available).
Possible new safari feature: Make the text bold if reader mode is available
Quick tip on Safari iOS Reader View:
Click and hold the 'aA' button on the address bar and it will go straight to reader view without you having to go through the menu and selecting it.
And if you tap "Website Settings" from the 'aA' popup (this is iOS 15, not sure where the setting lives in iOS 14, but it's somewhere there too), you can toggle "Use Reader Automatically" for the domain
I exclusively use reader mode on Firefox when reading news articles. So many site are borderline unusable otherwise due to all the ads, popups, cookie policies, and subscription promps.
…I just use adblockers.
This isn't as effective as it was in the past now that anti-adblocking is practically universal.
Haven’t noticed any issues but maybe I don’t visit the same websites as you.
Unfortunately, I have recently started encountering more sites where Safari just doesn't offer the Reader Mode option.
The arms race continues
If you have to actively circumvent the efforts of your users to make your webpage more readable, you may have a massive problem with your underlying design culture.
Yes, and it gives you -- Firefox -- the chance to fine tune your reading experience to that very moment. Sometimes you need a larger font size or more text/background contrast depending where you are. It's really useful.
A useful feature of Firefox reader mode on Android is that if you bookmark a page from inside reader mode, Firefox saves it locally and you can go back to it from the bookmarks even when you are offline. I used it to read long web pages (usually fiction) on planes or in the middle of nowhere.
Edit: it works only on older Firefox versions. This feature was removed sometime in the last months.
That sounds almost exactly like the functionality that Firefox' Pocket provides. The app downloads a reader view of everything you put in there so you can read offline.
Pocket sometimes fails to save the article locally, and forces 'Web View', rendering it useless unless loaded with a data connection.
I feel like Pocket could use some updates, it seems underloved from the Mozilla team, especially for an app that purportedly generates revenue for the company.
That forced-web-view thing is absolutely maddening.
I'd actually prefer a placeholder "we couldn't render this", which leaves the tagging tools available, to redirecting to the remote site.
Interesting, but doesn't seem to work for me.
You're right. I checked with the new Firefox (the one with the "too many taps" GUI from one year ago) and it doesn't work anymore.
I'm using the old Firefox on my main phone and it explicitly says "Saved offline" when I bookmark a Reader Mode page. The new Firefox on the backup phone says "Bookmark saved".
One more reason to stay on the old Firefox.
This was one of the features I was actually sad to see go when I updated Firefox.
I used this feature a lot as it was mainly manuals that I was saving.
They also replaced the default start page to be Collections instead of bookmarks, which b of course for me was empty.
I think I've got used to the new layout that I probably won't downgrade just for the offline capabilities.
Yup, it didn't make the transition to Fenix. That was such a cool feature. Maybe I should downgrade.
Safari's Reading List feature does something similar. Or it's supposed to. In my experience it often fails to save articles so you can read them offline.
My advice to bloggers: if your blog readability is improved by activating Reader mode, you have a styling bug to fix. Two universal improvements:
1. Bump up your font size. 2. Increase contrast.
3. Remove all the crap that isn't the article the user came for
I don't use Reader mode for readability, but to remove all the clutter on the page.
It's not absolutely necessary to remove it, but when reading the article it should not be front-and-centre on the page.
That means:
- Single-column layouts. Sidebars suck.
- No fixed-position elements. Especially not headers or footers, though fixed sidebars are also almost always a mistake. (There can be some benefit for reference / tools, but only about one time in a thousand that they're actually used.) On desktop, I disable all of these with either CSS (Stylish) or uMatrix element blocker. I've given up on any nuance here. If it's a choice of fixed header/footer or none at all, it's none at all.
- A static set of nav or informational links above or below the main article text is acceptable. It's present, but doesn't interfere with the reading flow.
- Put in a motherfucking scrollbar already.
> Especially not headers or footers
What drives me insane: website with floating header and footer, and I read, then hit space to scroll down to the next "page", but it doesn't take into account what's hidden behind header and/or footer, so now I'm missing two lines, and have to grab mouse/arrow keys to scroll back up two lines. It just works and then you put in extra work to make it not work thank you very much arghhhhhh
I described a good set of similar practices for text/article-centric websites: https://seirdy.one/2020/11/23/website-best-practices.html
I don't expect anyone to follow it 100%, but the gist is that the page layout shouldn't look too different from browser defaults or use advanced features.
> - Put in a motherfucking scrollbar already.
You mean you want two scrollbars? One from the web page and one from the browser window. That seems like an odd choice.
Presently the fashion appears to be none.
Worse: the scrollbars which do exist are indicator-only, they cannot be used to actually navigate on the page.
On the four mobile devices I routinely have access to, none has an actual grabbable persistent scrollbar for navigation.
Amusingly, given this topic, when I clicked your ello link, I had to accept a cookie consent, ignore a request to 'join the creators network' (whatever that means), and the page itself has a floating header.
Oh, and yes, on Chrome on Android I can see a tiny scrollbar when scrolling, but I can't interact with it.
You'll find that I no longer post to Ello due to numerous issues, including those rather annoying elements you describe.
It's unfortunate as the platform was clean and does do some things well (Markdown and quite nice image display).
It managed to kill off an active discussion community quite effectively however. With an effectiveness that strongly suggests intent.
Believe me, it's annoying for me as well even to visit and link back my old content from there.
More, if you can take the pain ;-)
I'm curious to hear your thoughts about the layout on allaboutberlin.com. I built this website to be as pleasant as possible for the readers, but perhaps I've been staring at it for too long...
I'm following a similar philosophy as the parent (kill fixed elements, disable CSS in extreme cases), and your web page manages to look stylish and readble at the same time.
The fixed side bar on the "visiting" page is barely enough to fit on the display, and when I shrink the window (or increase the text enough), bottom items get cut off without recourse.
The banners on most pages are so big that I usually see only 1 line of an article, which is mildly annoying.
Note: disabling JS is a required part of making the web readable for me, and that's how I perfomed the review.
That sidebar was a late addition. It broke the layout on some older pages that don't follow the latest practices. This is one of them, and I'm currently rewriting it completely.
The website should work exactly the same without JS (sans fancy parallax). However I'm curious about your screen resolution. The header is meant to leave plenty of text above the fold.
I usually keep the window small, around 700-800px in height.
Not the poster of the original comment, but I just visited your website (I live in Berlin), I found it very informative, pleasant and readable. Well done.
Pretty good, at a glance.
Erm, Stylus, not Stylish.
Stylus is a useful CSS manager.
Stylish is a piece of malware that spies on you.
Honestly, I see way more blogs with a font size 20% to 50% bigger than what I consider readable. Pro-tip: if the text is so huge that only like 10 words can fit on a line in a non-maximized browser window, your font size is way too big.
It's like they are formatted for reading by teleprompter or something.
Could it be that they're optimized for small screens and don't consider the desktop?
And add margins!
A little line-height: 1.2em goes a long way, too.
My most wanted feature for Firefox right now is the ability to right-click (or long-press on mobile) the link and choose "Open Link in Reader mode" exactly like they already offer for "open Link in New Private window".
I think that would be even more important than the Private shortcut, with the amount of unnecessary crap the websites try to cram on your screen.
I implemented this for TenFourFox and it's a real godsend for certain sites. Meanwhile, there's this, but not Android-compatible: https://addons.mozilla.org/en-US/firefox/addon/reader-view/
Thanks for the addon!
Just for the sake of curiosity, what do you think it would take for your addon to be ported to work also on Android?
Afaik firefox mobile only allows a small number of whitelisted extensions.
there is a way¹ to install other addon (if you use firefox nightly) but it is downright user-hostile.
1- https://www.ghacks.net/2020/10/01/you-can-now-install-any-ad...
Not mine, so I haven't looked at it closely. In general, however, I think there are many more addons that could work, and should work on Android.
Thank you.
Exactly, as some sites will remove content too fast and the reader mode button disappear before any possible attempt at clicking it
Yep. I also wouldn't care at all if "forcing" reader mode like this would most certainly break some pages. I wouldn't want to stay on pages like that anyway, so I would lose nothing.
Reader View is excellent on low-spec systems. On TenFourFox you can try any page in Reader View, not just what the browser thinks will work. I also implemented sticky reader view, where going to links stays in reader mode even on different sites until you explicitly leave reader view (see https://tenfourfox.blogspot.com/2020/09/tenfourfox-fpr27b1-a... ) and auto reader view by domain or by domain subpages ( https://tenfourfox.blogspot.com/2021/03/tenfourfox-fpr31b1-a... ). Combined with a right-click to Open in Reader View menu option, this means you can jump right in and spend less time waiting for pages to load on older computers.
"Sticky Reader View" is an excellent idea!
Perhaps there is no need for both sticky and auto reader view settings. As soon as the user enabled auto reader view, you assume Sticky mode and enable auto reader view on any domains they subsequently visit (and render in reader mode successfully at least once?)
TenFourFox uses sticky mode by default anyway. But you make a good point for others who might implement such a feature.
The main reason reader mode is "underused" is that for a substantial fraction of pages, it does not work.
Because of the way the human motivational architecture works, if there were a reader mode that always worked, its rate of usage would be many times higher than the usage rates of the current crop of reader modes.
But of course, there is no way to create a reader mode that works for all web pages -- and that fact is one of the main arguments for competing with the web rather than trying to improve or fix the web.
By "competing with the web", I mean creating online services that take the attention of users away from the web for some subset of things the web is used for, e.g., consuming static textual content, also known as reading.
Gemini would be an example of an attempt to compete with the web, and it has the property that every page is essentially automatically in reader mode.
The trick is to find some desire that the web is currently bad at satisfying, then improving Gemini to cater to that desire. For example, TOR was created (many years ago) by the US military to give its employees a way to browse the web without revealing their browsing history to the spy agencies of the US's enemies. But maybe Gemini's much greater simplicity would enable it to make a stronger guarantee of user privacy than the web is able to guarantee. (The more complicated a web browser gets, the harder it becomes to make privacy or security guarantees -- particularly guarantees of interest to only a small fraction of the web's users.) If that were the case, then whoever needs that stronger guarantee would tend to become avid users and proponents of Gemini. Getting very small numbers of avid users is considered an effective way to start increasing the number of users of a new online service.
The idea I just described is probably a bad idea: there are probably other desires that Gemini or some other non-web service could cater to that are much more effective ways of creating avid users of that non-web service. (For example, the idea I just described has the disadvantage that even if the proposed improved version of Gemini could make stronger privacy guarantees than the web can (which seems unlikely to me) good luck convincing the average user who is not a security professional of that fact.)
Finding them is hard! But trying to find one is a more potent way to try to improve things IMO than trying to fix or improve the web is.
https://gemini.circumlunar.space/docs/faq.gmi
> Gemini is not intended to replace either Gopher or the web, but to co-exist peacefully alongside them as one more option which people can freely choose to use if it suits them. In the same way that some people currently serve the same content via gopher and the web, people will be able to "bihost" or "trihost" content on whichever combination of protocols they think offer the best match to their technical, philosophical and aesthetic requirements and those of their intended audience.
Depending what you are making, different protocols can be good (Gemini may be good for some things, NNTP may be good for some things, IRC may be good for some things, etc).
Gemini file format also could be usable independently of the protocol, although I do not know of any implementations.
I think that sometimes you might want to use Gemini without TLS (it is good they have it, but I am not sure that requiring it is so good), so my proposal is to make the new URI scheme "insecure-gemini:" for this purpose. In this mode, client certificates won't work, so TLS will still be required if you want to use client certificates.
Also, unfortunately curl is not implementing Gemini protocol; adding that might help to increase its usage too, since then you can at least download files from it easily. However, I have seen discussions and some of them are valid concerns. For example, I think -k should not be the default; doing it different for different protocols doesn't seem like good to me. You can still specify -k yourself if you want to do. Also the patch does not implement redirects, even if -L is specified; it ought to be fixed to allow -L to work. Allowing longer URLs might also help.
Furthermore, a better web browser will need to be made, excluding half of the stuff and implementing the other half of the stuff differently, before adding some more.
>But of course, there is no way to create a reader mode that works for all web pages -- and that fact is one of the main arguments for competing with the web rather than trying to improve or fix the web.
Web developers go out of their way to break Reader Mode. What incentive would they have to create content for a platform that competes with the web, which actively limits their ability to deliver ads and degrade the reading experience?
In any case, I imagine that a ML powered Reader Mode engine would perform significantly better than a semantically powered engine. It should be fairly straightforward to train a ML model to make a visual distinction between the actual content, and the ads and other garbage that pollutes webpages. Crowdsourced training data would increase the accuracy even further, while limiting the ability of developers to defeat the reader mode.
>Web developers go out of their way to break Reader Mode. What incentive would they have to create content for a platform that competes with the web, which actively limits their ability . . . ?
It is unrealistic to expect most publishers of web pages -- or even most publishers of mostly-static text-heavy web pages -- to put their content on a competitor. It is still worthwhile IMO to try to steal from the web 1% or 2% of the web's user-hours ("person-hours"?) and that can probably be done (over say 5 years) with a small fraction of the web's static textual content (plus a little content that is not available on the web).
My guess is that the largest beneficial effect (on the world) of doing that will be to convince more people that the web is a mess (by showing them a less messy alternative even though they will continue to spend most of their online hours on the web).
Technically inclined people and people who used the web (or maybe Usenet) in the 1990s either already know that or cannot be persuaded of it regardless of what we do, but perhaps the most important effect of stealing 1% of the web's user-hours is convincing more people outside of those 2 groups of it.
P.S. I have already noticed the potential for machine learning to help users of the web: https://news.ycombinator.com/item?id=27856814
one little known feature of reader mode, no matter if firefox's or safari/mobile is that more often than you would expect, it kind of magically goes through pay-walls. so you get to see articles that require subscription or payment or else, with a single click.
this happens so often that makes one wonder whether is due to some devs being lazy (hiding the actual content) or is by intent kept for savvy readers.
also does great job getting through nasty full-screen cookie consent banners.
basically is a glitter of hope for the web as a whole.
btw, was thinking about article like this one for some weeks now. great minds think alike, right :)
The less we talk about great things like reader mode, the longer it will be before it's broken by default on the websites that need it most.
I'm using Vivaldi, which is like Chrome but with a far better UI. It has a reader mode, which afaict does not help with the paywall at The Economist. Perhaps it's because if you pay for a subscription there, the full article is at a second link?
> whether is due to some devs being lazy or is by intent kept for savvy readers
Neither, the business value isn't there, not enough people use Reader Mode to warrant spending the dev time to close the hole. It's coming soon though, and I'm building it. Sorry!
Honestly now that I think about it it's kind of surprising that Chrome has a reader mode button at all; why would a company whose business is mostly "serving ads" want to make it easier for you to get rid of them?
Sssh, a Chrome PM might be reading!
So more people will switch to Firefox, good!
Whose primary funding comes from Google.
This doesn't even mention one of my favorite features of Firefox Android: if you bookmark a site in reader mode it gets saved as an off-line version
Unfortunately, as others have pointed out, that feature is deprecated in newer versions.
Aaargh, it really feels like they're actively making their product worse lately
IMO most underrated browser feature is "Create shortcut" on Chromium. It can make any website to app-style window and create shortcut, so it can be pinned to Windows taskbar. So it can virtually replace some Electron apps to just a window for web version, so we can save system resources used by each Electron Chromium instances. It's also useful that shares browser profile, and extensions like ad blocker and password manager.
Sadly Firefox truncated similar feature. It's deal breaker for me. https://superuser.com/questions/468580/create-application-sh...
I wish more Chrome users use this to avoid the feature removed.
i was using a think called ICE SSB with firefox 2 years ago but when i updated linux/pop os it stopped working. i think it was made by the crowd who make peppermint os
anyway, as i was searching for that i came across this article. i just skimmed it but it seems like feature might be coming back? https://www.maketecheasier.com/enable-site-specific-browser-...
i think the ICE SSB thing is better though. it lets you add a custom icon and you can search/launch them along with your other desktop apps
Agreed - this allows me to run WhatsApp on Linux (as much as I don't want to, everyone I need to interact with is using it) in a chromium window like an app.
> I believe not a lot of users know about this button, especially because Chrome doesn’t want to show it by default.
What? The browser made by the company that derives 90% of its revenue from ads doesn't want to show you a button that can remove the ads? I am shocked!
I use it on my phone all the time. It almost makes phone browsing tolerable. It's great for getting rid of Medium crap and other FUBAR sites. Plus it typically makes the text larger, so I can read it without glasses.
same here - it will default to a good size font and high contrast dark mode. i've found myself using it... a lot over the last few months. i picked up a new 12 mini, and as I was developing new habits, this became one of them. if something is more than one screen of text, i reach for reader mode.
Sadly Tridactyl (vim keybindings for Firefox) doesn't work in reader mode, which really breaks the flow of my usual scrolling/tab-switching with vim keys. This, and the pdf reader tabs kill me because of it
How much do you care? There's an open pull request you could give a little time to that would fix it by integrating a reader mode into Tridactyl here: https://github.com/tridactyl/tridactyl/pull/3306
: )
don't really have much experience with JS or TS, but might try this later, thanks!
If you're familiar with CSS, writing a decent stylesheet for it would be a big help. If you've no interest in JS/TS you could leave that part to me.
Today's web is unusable without these two:
- uBlock Origin
- I Do Not Care About Cookies
The latter can also be configured for uBlock:
https://majkiit.github.io/polish-ads-filter/#i_dont_care_abo...
I use it on a daily basis. Without it a lot of websites are unusable for me. I just want to read the content, I do not wish to see the ads or interactive whatever. I want content. It is especially helpful, when websites manage to become unreadable without loading JS, because somehow they screwed up their CSS so badly, or it does not exist, without loading JS. Reader mode basically saves those websites from becoming instantly closed tabs.
I recently started using this too.
Now why can't websites just be written to work this way in the first place?
I would want to use my own styles or just the default HTML styles, as one (I don't want it to use big font sizes, narrow text, etc; I want to use my own settings please, and you can use your own settings please). But also, will wanting ARIA view, where the accessible tree is formatted (this would also allow forms, etc to work). However, the accessible tree seems to be missing some important information too, such as whether or not text is fixpitch, strong, emphasis, etc (as far as I can tell it is missing, anyways; trying a simple web page with different formatting and displaying the accessible tree seems to lose this information). Sometimes simply disabling CSS and JavaScripts fixes it a lot, and avoids a lot of annoyances. Some forms don't work if CSS is disabled, because they replace the widgets with their own (I really don't like this); the ARIA attributes are there though, which is supposed to allow it to display it properly even if the styles are disabled, but simply disabling CSS won't do that; it is necessary to parse the ARIA attributes too. But to do better might require both the accessible tree and the DOM tree.
I always assumed that Reader Mode was used pretty heavily.
i have read a total of 5 articles with it since introduction decade(s?) ago. The switch is just jarring
You mean the switch away from useless eye candy, advertising, link farms, popups, slide down flaps, useless multi-page clicks, cookie consent popups and banners, ...? Yes, it is jarring, but in a good way. To each their own I guess.
Many sites already work around this, and reader mode only shows a blank page or the contents of the disavow human rights box.
> Many sites already work around this, and reader mode only shows a blank page or the contents of the disavow human rights box.
Refresh while in reader mode. The DOM with most paywalls is destroyed post-render, not before it reaches the web browser. Refreshing in reader mode prevents client side scripts from executing and rewriting the DOM. I'm presuming this is to be search engine friendly, but I'll leave it to the SEO experts to educate me.
This is what I do with most sites.
Disabling JS also often works for the same reason. (But reader mode is great, nothing against it.)
With iOS, for example, refreshing npr.org just turns off reader mode.
As you refresh it should change the address bar saying reader mode avaiable and you should be able to quickly hit the Aa icon on the top left.
They redirect to another subdomain, so I don’t think this will work. Thanks anyway!
> The DOM with most paywalls is destroyed post-render
This has changed for most major sites. Users behind the paywall are served a "truncated" version of the article that never included a full version of it. The days of "press Esc before it finishes loading!" are coming to an end it seems.
The truncated version is still more SEO-friendly than a blank page as it has the headline and partial content.
reader mode shortcut on ff: ctrl-alt-r
> reader mode shortcut on ff: ctrl-alt-r
F9 on Windows
I use it all the time.
command-alt-r on Mac/FF
command-shift-r on Mac/Safari
You are a god.
TIL!
In Safari you can set reader mode turned on for specified websites. I have done it for all the sites which I visit frequently. Unfortunately there is no way to to turn it on at global level.
The only minor gripe I have is the slide-above animation when reader mode turns on. It's jarring when you keep getting that on each navigation.
You can turn it on globally by selecting:
Preferences > Websites > Reader > When visiting other websites: On
What do you mean, 'underused'??? I can't live without it and use it for almost anything, where it works! Not works to read comments on HN, unfortunately. It also helps against most register-to-read popups, and against advertising-infested websites that fool all adblockers.
Shameless plug: I maintain a cross-browser reader extension that is like reader mode with some additional features. It's called Just Read: https://justread.link/
Looks great! What does this use underneath? How is it different than Readability.js in terms of parsing output?
It uses a pretty simple text selection algorithm I've developed through trial and error: https://github.com/ZachSaucier/Just-Read/blob/6dcb4f05b93287...
I don't know how it compares to Readability.js.
Hey that works pretty well for such a simple implementation! Good job!
Personally, I found reader mode missed just enough — like images loaded with js or footnotes referenced in an article — that it was more trouble than it was worth. And as much as I liked the "readability", I missed missed seeing the different designs, fonts and so on. (Who would want to read all books with exactly the same layout and typeface‽)
Now I have a collection of user stylesheets I use with Stylus to improve sites I read a lot. I especially often remove fixed toolbars and adjust font size and line height. I also use the browser zoom feature a lot to get one-off sites to a better reading text size.
Not just footnotes but also comments. I never saw a reader mode app that handles comments. I would use it to switch on TTS and have the comments read aloud, this increases my focus.
Well, actually I have my own hand-made reader mode that works with comments as well, implemented as a bookmarklet about 10 years ago. But other tools can't handle reddit and hacker news for reading aloud.
I might be the minority here, but this is why I use Edge on Windows. It's, basically, Chrome with a reader mode.
Chrome apparently has a flag for this under chrome://flags/#enable-reader-mode
I tried flag in Brave ("brave://") but it is not working. Works great in Firefox.
>Chrome apparently has a flag
And even then the options were confusing: 'Enabled' and 'Enabled available in settings'
I first tried with Enabled, didn't work. Then tried the settings option, which showed reader mode option under 'Appearance'. After turning on this setting, the icon shows up.
I know this has been an on and off thing with Chrome, but, yes, it does appear to be back and works now.
works now in brave, the setting is extremely confusing, you have to set it to "enabled and available in settings"
Firefox USED to allow accessing reader mode by prepending the url with 'about:reader?url='. This doesn't work anymore and I don't know what to use instead. There is a reader mode button that toggles it on and off, but some websites redirect or change the content before I can click the button. Sometimes the button just doesn't appear (why not, reader mode usually works fine). Refreshing the page sometimes works, if the website doesn't redirect or change the address.
Is there some other way to force reader mode before the page load?
>Firefox USED to allow accessing reader mode by prepending the url with 'about:reader?url='. This doesn't work anymore and I don't know what to use instead.
Prepending `about:reader?url=` works for me, but only for pages that Firefox shows the button on anyway. For pages where it doesn't show a button, prepending `about:reader?url=` says "Failed to load article from page", which is to be expected because...
>Sometimes the button just doesn't appear (why not, reader mode usually works fine).
... the Reader Mode script uses heuristics to identify if the document has an article. So it can't work on a document where it can't find an article to extract.
That's interesting, maybe this is the results of a change regarding when the button is shown, or simply in how reader mode works? Previously we have had success in forcing reader mode when the option is not available. See, for example: https://www.howtogeek.com/268116/is-there-a-way-to-force-ena...
The flag doesn't exist on mobile. There is another, but i didn't see it do anything.
chrome://flags/#reader-mode-heuristics
Accessibly has a "show simplified view" which seems comparable
Firefox for Android has reader mode.
I remember it being a button in the URL bar, but now it's gone?
As does Opera
and Brave (after enabling it in Settings)
> The same is true for Chrome, but you first need to enable it at chrome://flags/#enable-reader-mode
Oh... I didn't know that! I mosty use FF and reader mode is a big reason why.
Reader mode is so much better for reading text... Also on mobile.
The only weird behavior (on FF) is that it's a step forward in history; whey you press "back" you don't go back to the previous page, but to the current page in normal mode (with zero info in the url bar or anywhere else (that I could find)).
I’ve always been puzzled by the “You accept these cookies” banners. Some have an ‘accept’ and ‘don’t accept/let me choose’ and some even come with a ‘X’ to close the banner.
So what does it mean when I either click the ‘X’ or simply do nothing and leave the banner there while I read the article? What does it mean when I use reader mode and basically ignore the question whether I accept them or not?
You have not explicitly given your consent to tracking / cookies so there should be none
Did not know that there is a reader mode in Chrome. It has only one bug: It does not work together with Google Translate :(
I used in the past mainly Reader View because it does not need access/injection to all your web pages https://chrome.google.com/webstore/detail/reader-view/ecabif... another extension I used (which worked better sometimes) was a local copy/fork of Rocket Readability https://chrome.google.com/webstore/detail/rocket-readability... I forked it because I code reviewed it and it needs access to all your web sites. I don't want any surprise update happen with that extension. Seems I still need it for foreign articles+Google Translate.
In Firefox this is implemented as about:reader?url=…, and you can use that URL to load reader mode even on pages that aren’t detected as compatible (so that the reader mode toolbar button doesn’t appear).
This used be the URL on Firefox for Android as well, but if I recall correctly (I seldom use reader mode) it got changed in the Fenix world so that it’s a moz-extension:// URL.
I used to enter about:reader URLs all the time for pages that Firefox Android wouldn't show the button for. Do you know where the moz-extension:// incantation for this is? I would think it's a constant UUID, so maybe I just need to page through the source.
There really should be an option for "always let me try Reader Mode."
I really love the reading the codebases for these, the original Arc90 Readability bookmarklet was really quite...readable when unminified.
I still use that JS script to make a pdf with all links written out fully at the bottom <lovely>
Also, I usually use Printfriendly.com to turn this page into a small pdf for saving. That is if it's worth saving, of course.
I gotta go back and figure out if I can submit a PR to fix footnotes, though [1]. I don't like using Reader Mode when I know there might be stuff missing, so I itch to go and check.
I love reader mode but I don’t use it when reading technical content because it lacks syntax highlighting. I’ve also often encountered bugs where certain graphics that are core the the article won’t be shown and I will be confused until I turn off reader mode and see what I was missing. But for non-technical articles, it usually works fine.
Highly recommend Instant View on Telegram: https://instantview.telegram.org/
You can make your site and pages compatible with Instant View, also there are bots which can export pages to Telegra.ph which are also Instant View compatible.
Just tried it on chrome mobile. The only way to make it always there is to change the triggering mode to always. Which means an annoying popup at the bottom. And the output of it is usually not helpful. Only works on (some) things that look like an article. Otherwise, it's truncated content.
Does no one else user reader mode?
I’ve found it the only way to stay sane on sites where ad blockers don’t work.
Which adblocker do you use? With ublock origin I almost never encounter sites where ads are visible.
Only happens on mobile sometimes, and when a site forces you to turn it off to function. I'm on ublock too any other time! I feel a deep sense of pity for anyone still surfing the web unprotected!
How does a browser's reader mode carve out the bit you want to read and ignore menus and other cruft? Does it scan for semantic elements like `<main> / <article>` or something and then serve up the 'meat' of the article?
More or less. Here's various implementations:
https://github.com/masukomi/arc90-readability
Original JS library:
https://github.com/masukomi/arc90-readability/blob/master/js...
Specifically see here:
https://github.com/masukomi/arc90-readability/blob/master/js...
Is there something like reader mode as a service (with TLS > 1.3 support)? It’d allow me to relatively comfortably read web articles on my Kindle Touch, which has a software stack that was already outdated when it came out a decade ago.
I love the reader modes accross the different browsers. Especially Safary Mobile does a really good job, i.e. even expands the partitioned articles from golem.de into one single page.
What slightly but consistently bothers me, is that the reader view in Firefox has very little customization options and (in my eyes) doesn't look very appealing. They should let a designer improve the stylesheet. You also cannot force the reader mode like in Pocket.
I also want to mention the instant view feature of Telegram [0]. It can be used as a reader view as well.
“I believe not a lot of users know about this button, especially because Chrome doesn’t want to show it by default.”
Damn right. You can bet you ass Google doesn’t want to actively push users away from bloated pages filled with ads.
Firefox's reader mode is amazing, especially if you need to read long content; their text-to-speech tool works very well and I use Firefox in large part because of it.
On Chrome, a startup named Speechify has a (crappy/intrusive) extension. They also have a decent iOS app, for ebooks, PDF and mobile web browsing... but their pricing structure is ridiculously expensive (also their annoying marketing feels like a giant ego trip/self promotional mania from the founder/CEO). However their voices are slightly better than the OS's.
I use Reading List feature to save articles that I want to listen to later during a run or workout. I made https://per.quest to listen to any URL. I wish there was a rss feed provided by the browser for Reading List feature so I could listen to articles one after another.
I also stopped using reader mode for sites with insane ads/videos/js/popovers that hog the browser and just open them with per.quest/read/[URL] to extract just the article text.
Best thing for me about Reader mode is banishing annoying scrollback menu flaps.
Nothing worse than trying to position a long form text article and a pointless menu flap popping up to obscure the text. So you then have to perform another round of up/down to get the page in the right place.
It's not even as if modern browsers, either desktop or mobile, don't give you a way to quickly jump to the top of the page where you can see the menu.
The only time I ever use reader mode is when the iOS Twitter app automatically launches Safari in that mode for links that I open. Sometimes it's helpful, more often the website is hopelessly broken and I have to try disabling it and going back to normal mode a few times - it seems to toggle back to reader mode about half the time when I disable it. Or I give up and copy the url and open it in Brave instead.
An even cooler feature which the reader has in Edge for Windows is that it can read the articles aloud with a natural voice. Also useful to listen to PDFs
I use this all the time and it's wonderful! It's not underused here.
A LOT of the time a webpage will be completely broken / filled with ads / javascript / and other useless garbage. One click and I'm in reader mode, and all that junk is gone and I just have nice clean text, and perhaps a couple of images. Makes me wonder if I can set reader mode automatically for certain pages.
There used to be an extension for Firefox called "Open in reader mode" that adds an item to the context menu for links to... well, open them in reader mode. It's not quite what you want, but I found it to be very helpful.
I haven't used it in a couple of years, though, so I do not know if it is still around/maintained.
I use this all the time on mobile just to bypass pop-ups, videos and other annoyances I don't want to see when reading articles.
Reader mode on Firefox for iPad OS is wonderful, gets rid of everything but the text I want and it feels like reading an eBook.
I use it daily to deal with the epidemic of hard to read too low-contrast websites, which this article is ironically guilty of.
I always choose reader mode on mobile if applicable. I'm wondering why some websites don't have reader mode.
It's based on the browser detecting whether Reader Mode is applicable for the content. If it's neatly organized into headers, paragraphs, etc, then it will be available. If it's unorganized on a technical level, the browser might not pick it up correctly.
Thanks that's probably the case!
The "first example"[1] now 404s. Weird. So can't actually see the demo the OP wanted to demo....
[1]: https://techdows.com/2015/02/enable-test-reader-mode-firefox...
Well I'm sure it's seeing a lot more traffic than the website intended.
Agreed 100%. Because in Safari it doesn’t work on all websites, I made ReaderView, an app that does and also saves articles for later plus lets you highlight passages. Give it a try https://www.appblit.com/readerview
Reader mode in mobile Safari is basically one of the two things that keep me on iOS (the other one is dictation).
I have the same problem reading emails on my small screen phone. This in spite of the fact that emails contain a text representation of the message in addition to the formatted version. The default mail client on iPhones can be improved a lot but it doesn’t look like it’s getting any attention at all.
I use it from time to time but I would probably use it more often if reader mode was automatically restored on websites where I used it a first time (and didn't switch back).
If the page is "good enough" when blocking ads (and I also have JS disabled by default), I won't bother using reader mode.
I used reader mode for a long time and liked it but stopped using it because it still let javascript run.
> When available for a website, it is displayed as an icon at the end of the url bar in Firefox
This is the only problem. When I really want it, it's often not available. archive.is is pretty bad on mobile because they are archiving desktop pages. Reader mode is not available there.
This is my most loved feature of Safari missing from Chrome by default. Edge has added it recently.
You can set iOS Safari to default to reader mode for all websites in Safari/Website settings/Reader/All websites
Then for sites you don’t want to use reader mode in, you turn ‘User reader automatically’ off in the site settings.
I wonder if low usage will lead it to eventually be removed (for example no one cares to maintain the feature code), much like the previous “reader mode” feature: RSS support.
Will we say “that’s fine browsers should only focus on one thing”?
I love reader mode and use it a lot, but my biggest complaint is that sites seem to be able to control when the option appears in the browser, or if not, it seems to only appear after the site has finished loading.
I haven't used it a lot, but have started with the increase in posts here using the absurd "lite" CNN links. I use a wide monitor, and these full-width text only splats are really difficult.
I love reader mode, but I can't for the life of me get it to work everywhere on my site, and there's no way to hint to the browser that I want to support it, or supply additional helpful metadata.
I'm an absolute heavy user of reader mode in Firefox, not only for reading content per se, but to clean up content before I copy/paste it into Evernote. I just love the feature.
I find Evernote's web clipper (browser extension) to usually do a job either comparable to or better than Firefox's web clipper. Clipper > Clip Format > Article.
It used to be pretty bad but they've made it a lot better in the past few months.
It also has the benefit of storing the source url in the note and creating the new note from scratch which you don't get by copy/pasting into a new note.
Reader mode is awesome and it makes a lot of the web actually usable.
It’s good for night time reading too (i.e. it obeys dark mode), it’s a shame hacker news doesn’t seem to work with Safari’s reader mode though I guess it’s designed for article pages!
My workflow in case of a long article I want to read on my Kindle without distractions:
View in reader mode --> Save as PDF --> Send to Kindle email address --> Sync Kindle.
I wish this could be automized.
Instapaper has this, and can even be set up to send a weekly digest.
On i remember how often I used printfriendly just for that.
Also I find the irony of reader mode quite funny. Lets build the most dynamic and capable presentation system so we can go relive bbs
I use it often. Lots of sites have become wise to its use for bypassing paywalls, but it does work, occasionally, to get past a required sign-in.
It's good for downloading sites as PDF.
While we’re on this subject, why the hell is HN so hostile to readability?
No dark mode, minuscule font, easy to mistap the tiny “buttons”, and no support for Reader Mode
HN is managed very conservatively from a UI/UX perspective.
I share several of your concerns. You can contact the mods directly at hn@ycombinator.com
One suggestion that is apparently in the pipeline is for a user-provided custom CSS which could be used to fix font, contrast, and other aspects.
The underlying structure of HN pages (nightmare table-based layout) makes more substantial revisions difficult.
There are numerous alternative-interface projects using the HN API as well.
I discovered Reader Mode on Chrome a few months ago and have used it a lot since. I use it everyday and it makes it much easier to read articles.
I’m a huge fan of the reader mode on Safari for iOS. Probably the feature that I’m using the most, right after password autocompletion.
I have been using reader-mode on Firefox and Chrome for long.
Not just for better readability, but also most content behind paywalls is accessible with readermode.
(May be because, most of the paywalls on news websites load all initial content, and then either truncate the content or hide the content using javascript, and hitting the paywall renders the page again without a lot of the CSS and JS that is used for hiding the content behind the paywall).
Hopefully, this content doesn't have those paywall service providers to start working around reader modes.
Not in my house it's not. A lot of sites are practically unreadable without reader mode these days.
On FF, is there an extension that automatically turns on reader mode when you are reading an article?
Yes. I've been using Automatic Reader View[0]. Though, to be honest, this should be an option directly in Firefox.
[0] https://addons.mozilla.org/en-US/firefox/addon/automatic-rea...
Here’s another one: https://addons.mozilla.org/en-US/firefox/addon/auto-reader-v...
I always worry about missing bits like code samples in iframes when switching to reader mode :/
Doesn't work on Chromium Brave. /tries not to cry /lays on the floor and cries alot
Could someone explain how Reader Mode on iOS devices is able to bypass login walls for new sites?
I use it all the time to avoid a lot of modal popup article blockers and the like.
I never use it because I know the process is automatic and I'm always afraid I will be missing part of the text or the pictures.
I've found ad blockers to be more or less competent in removing the stupid European banners, but they are far from flawless. Some sites get stuck without a scroll bar for example
> I'm always afraid I will be missing part of the text or the pictures
As for missing pictures, my argument is, either the text is referring to an image that cannot be seen in reader mode, then I'll notice and switch back to normal mode to see the image, or the image is not relevant to the text, so I just don't care for it.
I use it for the text to speech in Firefox a lot. When there isn't a pay wall in the way I'll open the page in another tab while reader read's it to me.
This way I can see the text and pictures the way they intended it to be.
Another downside is that text content for other articles on the site that aren't part of the article, will be in the content. On the full site they'll be links or something and you just skip them with out thinking. In text to speech reader mode, it reads them off.
There's no risk in invoking Reader Mode. If it doesn't render or omits text, you can simply toggle it off / navigate back to the native page.
Images in online articles are irrelevant the overwhelming majority of the time --- 75%--95% or more. At best they're eye-candy or distractions. They occasionally provide context. Some serve as a contextual reminder. I'd suggest that information-critical graphics (there's information in the image that's not available from the article itself) are in the neighbourhood of 1% of all images. These tend to be graphs, plots, charts, or maps.
They're also generally rendered by Reader Mode, unless the site is very poorly designed.
TL;DR: This is an irrelevant concern.
This is exactly why I don't use it either. Sometimes I have noticed that diagrams/images are stripped out. Sometimes a couple paragraphs at the end will be omitted.
I've noticed the same thing. Nowadays I quickly check the end of the article before switching to reader mode, to make sure it's still there.
You should give it a try, I've never noticed any important parts missing.
I use Safari’s reader mode on Medium and it fails to load lazy-loaded images (unsurprisingly) so if I want to see those, I have to scroll down first and then enable the mode.
Sometimes images are missing. Especially banner images, of course, and sometimes those illustrate the story, but I think also background-level images (that are used for non-background purposes, if you miss them, of course).
I press it as soon as I see a popup about cookies or login or sales or basically anything at all.
I press it when there's a paywall.
I press it when the site doesn't do dark-mode.
I press it when adverts become annoying.
There also exists an auto-reader-mode plugin that you can tell to always open that site in reader-mode in future.
Reader mode is great. Hope it doesn't become popular so website start trying to stop it working.
Also a neat way to scrape some sites, big love for readability.
On mobile it is under Settings,Accessibility, Simplified View.
Is there a keyboard shortcut for reader mode, in chrome?
If you use macOS, it's also in the menu bar in the View menu.
This means that you can define an app-specific keyboard shortcut in Preferences > Keyboards > Shortcuts > App Shortcuts. Then click [+] and select Chrome as the application, then type "Enter Reader Mode" (exactly like it appears in the menu, and without quotes) and choose a shortcut.
I'd also recommend adding one for "Exit Reader Mode" since the option changes to this text once you are in reader mode. You can use the same shortcut, it's fine since the two options are never present at the same time.
This works for pretty much all apps, by the way.
Thanks. I'm on Ubuntu, though.
It's the only way to visit sites like medium.com ;P
My favourite and often used browser feature (Firefox).
Underused? I use it for almost every article I open.
Underused? I wish I could set the browser to be always in reader mode so I can save taps every day. Reader mode along with private mode is great paywall circumventer.
In opera mobile you can save reader mode pages in mhtml, it's great alternative to webarchive
SevenSigns posted an addon to do that here https://news.ycombinator.com/item?id=28287190 and there's an alternative here https://addons.mozilla.org/en/firefox/addon/automatic-reader...
I don't use the automatic addons, but one that lets me right click and open directly in reader view, works a treat! https://addons.mozilla.org/en/firefox/addon/reader-view
Try them out!
Dammit, don’t tell everyone, they will notice it.
The title is maybe a little misleading? TL;DR - you can overcome so frustrating cookie permission popups and some invasive visual elements by using reader mode.
However if we focus on the title, Reader Mode is a great feature (and I’m pretty sure many others followed by this title agree with that observation).
I use it mostly on my mobile devices and it can greatly improve readability of something by controlling the text-formatting.
Having said that, still many times (at least for me) it can resolve wrong translation for the content due to:
* ignoring some divs in the page * in-ability to move to next pages (eg. hyperlinks) * bad RTL support
I wish I would be able to use it more often. :)
The icon doesnt show on chrome latest version.
Did you enable it in the settings?
I read this post on reader mode.
I'm a huge fan of reader mode! On a few sites that the adblocker can't work on - or sites that won't work because of the adblocker...reader mode is usually the only way for me to see the content. Example, wall street journal and some other mainstream news sites will obscure the article with a paywall, but reader mode shows it in entirety.
> The web has been plagued by cookie consent popups and banners since the General Data Protection Regulation (GDPR) has come into effect.
It has become obvious that no user would willingly consent to the overuse of cookies since the General Data Protection Regulation (GDPR) has come into effect.
Here, I fixed that for you.
I had no idea this was an option in Chrome, you just had to turn on a flag to enable it!
I am interested... also interested in if it gets past various paywall attempts....
Is there any way to get it on Android stock Chrome?
Firefox's reader mode can bypass paywalls on many news sites (e.g. The Economist). It's simple to activate; press F9 and then F5.
I started making more use of reader more upon discovering that it can get around paywalls in many cases.
Fun fact! Reader mode also sidesteps some paywalls on news sites.
You also get around many paywalls by activating reader mode.
Nice
Reader mode really helps me in printing as well. Old comment of mine:
Printing is something I started to do some months ago. Instead of keeping the tab open for weeks, I decided I'd print anything I want to read and place it a physical "inbox".
Some tips: I print 2 pages to a side, so 4 pages per printer paper. Even long articles don't use too much paper, and for my eyes it's still readable (there are a few articles where I need to enlarge first). I print using either Firefox's "Simplify Page" feature or its "Readability" feature. This removes almost all the noise: No ads, no menus, etc. It's just the article and relevant images. Similar to reading a physical newspaper.
It's been a game changer. I can now read wherever I want. Going to the mechanic? I just take some of these printed articles with me. I find myself taking notes on the paper - something I would not do well on the computer screen. My eyes get a lot less strain. Once you get used to this, there's no going back. Now when I see an article through a web browser, it's just ugly. Too many distractions. Even the menus are annoying. I didn't realize I'd been putting up with filth for so long.
I initially worried that my inbox would get full and I'd have the same mental angst, and my plan was that if it happens, I'll take a random bunch and throw it in the recycle bin. But it never came to that - I still manage to read everything I print. Somehow, the physical inbox weighs less on my mind than the virtual one. I don't feel I need to deal with this inbox. It's OK if it just sits there collecting dust.
Bad for the environment. Good for the brain.
Please don't copy-paste comments on HN (https://news.ycombinator.com/item?id=27921786). It lowers signal-noise ratio and isn't really how curious conversation works.
If you want to refer to another post, that's fine of course, but in that case use a link and perhaps add some new info if any is relevant.
https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
Hi dang,
Is this a new rule? I often find people copy/pasting older comments of theirs that is relevant to the current conversation.
https://hn.algolia.com/?dateRange=all&page=2&prefix=true&que...
Six years of nopaste exhortations
You can do similar on the Kindle or any other ereader. There's a chrome extension called 'send2kindle' that sends a simplified version of the webpage you have open directly to your device.
I'll just open tabs on the browser of whichever articles or texts will consist of my morning reading diet that day and send them all to my Kindle. Very practical device to read and no more falling in a trap of continuous clicking on more and more links, while lending a crappy level of attention to the actual reading.
I'll be honest, this is my favourite feature of my Kobo - using Pocket to save webpages and articles and read them offline. It seems to accomplish a similar goal to what you do here - without the need for all that paper.
I doubt he will print as much, so your e-reader will have less environmental impact. All that plastic and components are certainly the equivalent of several, if not hundreds of reams of paper.
I don't think he bought the Kobo only for reading webpages tho, so you cannot really do a direct comparison like this.
Cost is a very rough indicator of footprint.
A modest e-book reader runs about $200. That's the cost of about 3 cases of 20# letter-sized paper (10 reams/case), or 15,000 sheets of paper.
At ~300 pages/book, that's about 50 books cost equivalent.
Note that printing output tends to run higher, at $0.01 -- $0.25 per page (higher for colour inkjet and laserjet).
Depending on ones reading patterns, the cost (and environmental impacts) of an ebook reader could well come out ahead. It's also generally easier to carry such a device than the equivalent number of printed books or documents.
And the marginal cost of adding articles to a device if you are already using it to read books is very low.
Correct, up to storage limits.
That's not a minor consideration from me as I can easily fill 64--128 GB of total storage (about 30GB seem to be system + apps).
That's not all books --- I keep a fairly large number of podcast episodes downloaded. But at about 5 MB/book, even an apparently generous storage quickly shows limits.
I passed on the ReMarkable as its 16 GB storage (about 8GB available) only permits 1,600 books at 5 MB/book.
(And that's without podcasts or audio.)
The BOOX has a 64 GB onboard storage, maximum. I've got that near capacity in about 6 months, though a large share of that is podcasts. My preference would be 256 GB. Plus far better content-management capabilities on the device itself. I think I could live within that.
Retail cost is $20, falling by about half every 2 years. The minimising of eBook storage makes absolutely no economic sense.
I have a Kobo and I used to do this. And while I enjoyed ereaders for many years, paper is still king. The Kobo's resolution is still not good enough, and being able to flip pages is still more convenient.
The nice thing about the Kobo is you can install your own software, so there's still hope for a better interface.
It's a nice compromise.
> I can now read wherever I want. Going to the mechanic? I just take some of these printed articles with me.
To be fair, I can (and do) do the same thing with my phone.
Off topic w.r.t Reader mode, but reading on paper is much better than on the phone. Actually, anything is better than the phone. My hierarchy is:
Paper > ereader > monitor > phone
> Bad for the environment.
Psst. Paper is a renewable resource and easy to recycle at least a couple times.
> Each ton of recycled paper can avoid the use of 17 trees; 1,440 liters of oil; 2.3 cubic meters of landfill space; 4,000 kilowatts of energy and 26,500 liters of water.
> Paper is quite simple to recycle, yet 55 percent of the global paper supply comes from newly cut trees.
You can buy recycling paper too, it's not pretty but at least you know it's made from recycled materials.
Also, that page says we'll run out of fresh water in 18 years and the source is literally a single quote from one person. Seems a bit sketchy.
That's a spurious claim! Pulp harvesting often destroys the native flora and fauna, and the cost of lost forests and animal habitat cannot be recovered.
Doing exactly this with a large format e-ink tablet has been revolutionary for me
Which e-ink tablet would you recommend?
Remarkable 2 is the only one I have experience with, and I recommend it highly if you are comfortable exploring the community APIs and tools. It uses a proprietary cloud platform by default, which may not appeal to folks, but you can use ssh over usb to avoid their cloud entirely. I use a script based on https://github.com/subutux/rmapy to send the tablet pdf files with one command. The reading experience is excellent and the writing surface/pen are great for marking up documents as well. It's a magnificent paper notebook replacement that you can fairly easily put pdfs on. If you need on-tablet web browsing, other apps, or state of the art epub reading, I'd look elsewhere. For getting reading material off a backlit screen as though it were an endless stack of paper with arbitrary content, it's phenomenal.
I'm pretty happy with the Onyx BOOX.
https://news.ycombinator.com/item?id=27521248
Turns out I was wrong about security. Password recovery requires a separate cloud-based account. Setting a password does not.
ReMarkable isn’t perfect but I use it to read web articles. The issue I haven’t solved with my ReMarkable is finding an alternative to the default synchronization system. I’d love to use Plato for reading on the ReMarkable, but then I’d lose the synchronization.
Kobo devices have out of the box integration with Pocket, which Mozilla supports natively.
Proprietary tablet vs. a browser feature on the open web–which option would you take?
Kobo lets you install your own SW. There are open source reader SW for the Kobo, and they're better than Kobo's own reader.
What reader(s) do you like / recommend?
I've used FBReader, PocketBook (who sell their own ebook readers as well apparently), the NeoReader (default Onyx software), and have some familiarity with Kindle.
PocketBook enables some (but insufficient) metadata editing. The NeoReader has an excellent UI/UX generally on BOOX devices, but has no management capability.
I tend to have a large number of documents on my devices (1,000s). Management is critical.
I'm not sure what exactly you're arguing against.
Paper isn't really that bad for the environment, right? That was an ad campaign to sell plastic or something. Paper trees are grown as crops and basically just fix carbon. The pulping has some local undesirable effects, but I don't think they have anywhere near the lasting impact of other human waste.
> Bad for the environment. Good for the brain.
That's just bad for the environment two times lol
underrated comment
When I was in graduate school way back in the 90s, I had an old dot matrix printer that I would use to print out the daily RFE / RI (Radio Free Europe) email news reports from Eastern Europe.
Its a huge waste of resources over time, but I find its much easy to focus and take in the information sitting at a table and reading over printed word.
I wonder if e-ink / paper devices might be able to replicate this now.
I like reader mode but lately I'll send an article to pocket (which cleans it up a lot) then I print it to a pdf which is saved in a folder in Dropbox and which is synched with my Kobo Elipsa, and with the Elipsa I can mark the articles up with its stylus. (Writing this out makes it sound a bit complicated which I guess it is.)
I straight up stopped reading. Just listen. I'm using NaturalReader extension, which has a good voice in the free tier. Even tho I use Firefox everywhere i just open an Edge, copy-paste a link and just listen to the article.
I'm the exact opposite - I love having books and articles on devices. Physical clutter is a problem for me so this is liberating.
reading on my iphone or kindle doesn't seem to strain my eyes.
I read all my books on the iPad. No hassle at all.
This is really interesting, I might try it. I miss the printed newspaper/magazine reading I used to do (although I still do some).
Haven't tried it but there is an addon to automatically enable reader mode:https://addons.mozilla.org/en-US/firefox/addon/auto-reader-v...
That's super useful for some known bad sites that I use. Thanks!
I use reader mode anytime I come across an informative webpage. That being said, I always use it as the precious feature it is, presuming it will be removed either over lack of use and support or effect on ad market.
I use reader mode all the time on Firefox at home or on Safari on my phone. I’m forced to use Chrome at work though, and I always thought it didn’t have this feature. Good to see it can be enabled.