Posted by amadeuspagel 4 days ago
Essentially, imagine Reader Mode, but all the time.
But this is... something else? I tried scrolling to the bottom and as soon as I click on the scroll bar, I get a pop-up showing a bunch of gestures and can no longer scroll. Pressing the back button does nothing. Closing the tab asks me if I want to discard my unsaved changes?!
So I'm guessing this is some CSS/JS to make a regular site _behave_ something like an e-reader? Which may be fine as far as it goes, I just don't think it's a good idea to hijack the scroll
I really wish browsers were more modular - if the rendering engine and network fetching were easily separable - and you could insert your own steps into that pipeline, you could do all sorts of neat stuff. If I could insert some code of my own in between the fetch and the render, that would be ideal - strip out all ads and malware, optionally remove all scripts or css, run it through readability, etc...
Can’t that be done relatively easily with https://mitmproxy.org/?
Doubly relevant to eInk mode as soon be releasing a text-mode browser which has a verys imilar goal: make the web less noisy, and easier to focus on.
We try that by putting the web in the terminal. Technically it's similar to how the CloudFlare/S2 remote browser works in that we take rendering instructions from the remote browser and display in your terminal, except instead of rendering everything from the browser engine, we only render the post-layout text boxes! To do this you need to apply a secondary layout pass account for overlaps due to monospace font sizes, and scaling to terminal dimensions.
That's why I'm thinking that people interested in eInk mode might care about this browser too, a quick demo of which is here: https://youtu.be/Xmt6j-nfc7E
If you'd like to be among the first to test it out when ready please add your name / email to this list: https://tally.so/r/wbzYzo
You can tell Safari to use Reader Mode by default on all websites.
On iOS 18: Settings > Apps > Safari > Reader > All Websites.
On macOS 15: Safari > Settings… > Websites > Reader > When visiting other websites.
- Every website has the same accessible layout
- Blocks advertisements
- Blocks popups and auto playing videos
- Blocks cookie banners
- Blocks newsletter signup modals
- Blocks sticky headers and all distractions
- Auto dark/light mode on all websites
- Choose your preferred colour theme, font, font size and margins and it applies to all websites
- Images are presented neatly
- Inline videos are presented neatly
- Space bar to scroll down, shift+space bar to scroll up
- J/K to scroll between HTML elements (usually next paragraph)
- Can be disabled on a per-domain basis for when it's not suitable
The downsides:
- There are no downsides
Granted, that is an example of a site and not a browser, but I would love it if a browser could magically transform websites to look like the Braille Institute's, where visual and cognitive accessibility are first-class citizens in the UX.
And I, too, fell into the eInk mode by clicking on the scrollbar. Very odd design decisions there.
I couldn't figure out how to go "up" in pages. Pressing "Home" didn't do anything. So a lot of web browser / mouse / keyboard functionality is thrown out in that mode, which shouldn't be necessary to still be a good e-reader mode.
One of Einkbro's highly underappreciated features is "save page as ePub". This provides the "web as ebook" experience you're looking for.
But it gets better: You can save multiple pages to a single ePub, where the additional pages are appended to the end of the document. This provides a book (or multiple books) which can follow a theme: a set of pages on a topic, a time-oriented collection of pages, etc.
The UI/UX isn't as seamless as reading online, but the end result is really good.
Note that an ePub document is a compressed archive of HTML documents. You can pull apart the ePub to edit it: re-order contents, re-title them, edit the underlying documents themselves, etc., using shell tools. On an Android device itself directly if you've installed Termux. A bluetooth keyboard helps immensely here.
I've been raving about this feature for years now, see: <https://toot.cat/@dredmorbius/107958709435468728>.
If you combine these two projects, then you will have a great eInk experience for any kind of eInk device, and not much need for a browser plugin.
I hope they do not enter the eink device market. Eink in general is unfortunately already suffering from the stranglehold of one giant which has locked innovation away due to its proprietary implementations. Having two will not make the situation better, only worse.
> Eink mode is not a closed-file format reader but rather a form of responsive web design (RWD) integrated into the website itself.
suggests to me that it's a display mode you have to enable in the CSS design of the site, like "print" layout. I.e. this particular version is not software you can use on any site, it has to be baked into the site.
Now the quest is to make this something that the user instead enables on her device for all sites.
If you're not already considering it, the Readability.js module might make this more straightforward:
<https://github.com/mozilla/readability>
(I think. I've looked into this but not applied it directly myself yet.)
These interruptions are especially annoying on e-ink.
> The full-page advertisement you saw on the previous page is an example.
> the paginated website design opens up new possibilities for ad placement and presentation, allowing for innovative approaches in terms of ad type, location, size, and interaction compared to traditional scrolling.
> highlighted and annotated sections often represent the user's key interests, allowing for more targeted and relevant ad placements
> ads embedded in the website will be included in these downloaded PDFs, increasing ad exposure each time the user reviews the PDF file.
> Paid subscribers could download ad-free PDFs, while non-paying users receive PDFs with embedded advertisements, providing a tiered reading experience.
CSS & JS are the opposite.
Yes, I realize it's a losing battle, but it's a depressing thing nonetheless.
The actual problem is that most browsers have forgotten that they're "user agents" - and have stipped away all the configurations and options that they used to have, removing control from the user.
Vivaldi is still very configurable, and still behaves like the users agent.
Mozilla with their deprecation of XUL was like that.
"WYSIWYG Printing (PDF Saving)
When printing web pages, browsers typically use a default pagination algorithm that rearranges the content based on the printed paper size. This ensures images aren't cut off by page boundaries. However, this pagination isn't tailored to the user's current device screen size. Instead, it uses standard paper dimensions like A4, A3, or B5. As a result, when downloading a PDF on a small-screen device using A4 sizing, the text may appear too small to read comfortably in a PDF reader, requiring zooming. This leads to the same issues as general web page zooming: inability to view full lines of text and the need for constant horizontal scrolling.
In Eink mode, pressing the print button will produce a PDF that mirrors the screen's display. While the paper size might be larger, resulting in surrounding whitespace, using an E Ink device's native PDF reader (such as Onyx's Neoreader) to automatically crop the margins will create a PDF that exactly matches the on-screen view. All highlighted annotations and handwritten notes will be preserved in their original page positions, achieving a true 'What You See Is What You Get' experience. This allows users to conveniently save and later review content on the same device without text size issues."
It's taking some of the addictiveness out of my screen viewing.
How did you assign it to a hotkey? I'm sure there's at least a dozen ways to do it, but I couldn't find a simple one without installing additional software.
Sadly, adding "Increase Contrast" to the shortcut causes the hotkey press to generate a voiced popup instead of quietly and directly toggling.
I wrote a set of design principles for e-ink displays back in 2022. You especially address #6, of course:
1. Persistence is free
2. Paints are expensive
3. Refreshes are slow
4. Colours are very limited or nonexistent
5. Line art displays beautifully. Raster images not so much
6. Pagination navigation is strongly preferred to scroll
7. Graphics are reflective rather than emissive
8. Touch / Wacom may exist
9. Feature detection capabilities are limited
<https://diaspora.glasswings.com/posts/638a8d10e041013afba844...>
On power consumption: informally comparing battery usage under a web browser (Einkbro) and an ebook reader (NeoReader) on my Onyx BOOX Max Lumi, browser draw is about 10x that of the ebook reader.. It's much more efficient to have fixed layout and limited screen paints.
I've been toying with a vaguely-related project of generating a newspaper-like presentation of news site(s), described and imaged here: <https://toot.cat/@dredmorbius/114356066459105122>. The main commonality is in creating a calmed interface though it's principally a standalone generator rather than an in-browser JS application.
I'd like to try integrating eInk Mode to that page to see how they work together. (I have some concerns given my use of grid + column layouts, but want to give it a shot.)
Also, your newspaper demo looks fantastic. I think it would be perfect for viewing on a 25.1-inch E Ink display in portrait mode; the effect must be excellent. However, I'm concerned you might encounter difficulties applying Eink Mode to it, as I'm currently grappling with the pagination algorithms for Table, grid, and flex layouts, which are proving quite challenging.
I've mostly interacted with Daniel through GitHub. My most recently implemented suggestion was to provide margins for EinkBro's Reader Mode:
<https://github.com/plateaukao/einkbro/issues/33>
eInkMode would be a much-desired further improvement.
The requirements for me are simple, primarily to make consuming web content on my kindle scribe easier.
* Instead of scrolling by finger gestures (which is a pain to watch on slowly-refreshing eink), have two buttons on the side to do page up and down. * Disable animations * Ability to increase/decrease font size.
I attempted to make this happen for my mastodon feed [here](https://keheliya-slowdon.web.val.run/). source available [here](https://www.val.town/v/keheliya/slowdon). Then there's [Kindly RSS reader](https://github.com/nicoan/kindly-rss-reader)
The goal is to be able to access all the text content that I consume regularly without much pain on a kindle.
I have been working on a way to turn your phone into a better reader device with https://astropad.com/bookcase