eInk Mode: Making web pages easier to read | Hacker News Reader

eInk Mode: Making web pages easier to read

jackscogito.blogspot.com

163 pointsamadeuspagel83 comments

Okay, so I started reading this and got excited to see what this was all about. I've been wanting a web browser that can turn the "regular web" (as much as possible) into something more like an e-book that happens to have hyperlinks.

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

Actually it's not a bad idea. Scrolling is impossible on epaper screens.

This is something I've been wanting for a while. You could probably build an extension to accomplish that. One hard challenge would be extracting content and then displaying it in a way that retains its semantics across the web, including navigation, sidebars, etc. Another would be form handling.

How about an extension that does it -after- the browser has implemented reader view? Then all that is already taken care of.

Thank you for your feedback. I do plan to turn this into a browser plugin.

That would be absolutely awesome.

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.)

Thank you for your suggestion. I may look into the implementation of how it fetches the main article of the document.

If it can get rid of any kind of pop-up (newsletter, GDPR, intercom, install the app to keep reading, click here to read the full article) interruptions, I want it ...

These interruptions are especially annoying on e-ink.

When I browsed away by typing another site name in the address bar i got the 'your information may not be saved' firefox popup twice. Didn't see any forms...

Thank you for bringing this issue to my attention. I will try to modify it to automatically detect if the user has used highlighting or handwriting features, and only then will this prompt appear.

> Essentially, imagine Reader Mode, but all the time.

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.

The advantages of this:

- 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

space and shift space always work, but I didn't know about j/k, thanks!

I've tried Reader Mode, but Safari's Reader Mode doesn't properly display JavaScript elements, such as my footNote popups, and some YouTube videos also fail to load correctly. Additionally, embedded Google Maps within this article don't appear accurately, and many website layouts get distorted. Furthermore, current Reader Modes on major browsers predominantly rely on scrolling, which isn't ideal for E Ink. These shortcomings are pain for E Ink users and this is why I'm advocating for this alternative mode.

I completely agree. When it comes to eInk, then classic reader mode scrolling is an inconvenience. But compared to normal browsing, it is great. As for distorting website layouts, that is usually a bonus. Reader mode + standardized website navigation layout would be the golden solution.

I had a similar idea to use the ibtegrated browser in my ebook.. maybe is useful to someone else https://ebookmode.dropdatabase.es/

This is wonderful! Why don't you get together with the author of the article and make a killer project?

Actually, EinkBro's Reader mode is using Mozilla's readability.js. I've actually been using EinkBro for over four years. One of the main reasons I want to develop Eink Mode is to achieve true pagination, where text and images aren't cut off at the edge of the screen. EinkBro's approach involves scrolling a fixed distance by tapping page turn zones on the screen (just like pressing the space bar when using a desktop) , and it removes the scrolling animation using "jumping" by a 'scrollHeight' amount. However, this still has the issue of potential content cutoff.

Eink Mode + Ebook Mode = A fully functional web browser for Kindles, which is the most popular eInk device by a large margin.

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.

This sounds great! Maybe we can cooperate and try to make it happen.

While looking for a typeface for my terminal, I happened upon the Braille Institute's website (https://www.brailleinstitute.org/) which exemplifies more or less what you're describing. It is an aesthetically-pleasing site, with low visual and cognitive loads.

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.

Do you happen to know how the Braille website's style is called? The high contrast, button shadows with big offsets. I've seen it in several places now and would like to use it myself

Probably not it, but it reminds me of some websites that have been described as "brutalist". See: https://web.archive.org/web/20250404083913/https://brutalist...

I want this too! I discovered a really esotieric way to get this: https://duncanlock.net/blog/2024/01/04/super-fast-reader-mod... - but it would be really nice if there was just a way to switch reader mode on permenantly in modern browsers. Apparently Safari can do that, but afaik no other browsers support it.

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...

Many of the recent feedback I've received, especially from the E Ink community, suggests developing this project into a browser plugin. I anticipate future development will likely involve both a front-end module and a browser plugin approach. While my time is limited, I will do my best to explore and implement this.

Interesting... I may have to give that a shot in the near future.

That's great. A browser extension is a more proactive approach for E Ink users.

> 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.

Can’t that be done relatively easily with https://mitmproxy.org/?

Heh, I know I'm late to the party here - but I actually separate the rendering and network in BrowserBox by running the browser on a remote server and the interface is just a web app on your device.

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

I wish apple would enter the eink device market. Would be a piece of cake for them and easy new revenue for the company if they even get it half right IMO

I find comments like this strange and tbh a bit worrying too; instead of wishing for technology to get better, it's wishing for a specific company's revenue to improve.

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.

Apple is the only hope to get a quality device for the mass consumer segment. Others have tried and they have died, like Lenovo.

Several alternate eink devices are doing quite well against the Kindle. it’s true that Amazon dominates, but devices like the Kobo and others are still innovating and developing new devices, at least partly because they’re less locked-down than Kindle’s.

Clicking on the scroll bar will enter this mode is actually a bug and thank you for your report and I have fixed it. The back navigation popup is a temporary measure to protect against losing the highlights and notes due to accidental back navigation presses. (Some E Ink devices support side swipe gestures from the edge of the screen to return to the previous website.) which I guess is more frustrating. Once this module is connected to backend script and database, allowing for real-time saving of your highlights and notes to your account, this preventive measure can be removed.

There's an e-ink optimised Android app, Einkbro, which I've been using for several years now. It's mentioned in TFA, for what it's worth.

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>.

I have actually written a shitty & dumb version of exactly this, that works quite well (but not tested much). Might share a link here in the comments if i find time to publish.

The article contains a paragraph about ads and it reads like a nightmare:

> 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.

Why a nightmare? This is much more reasonable than the current model. It's just like print media ads.

This describes how ads are displayed in paper magazines. Sounds fine to me, I prefer static ads in predictable spots that don't cause page jumps the way "dynamic ads" do on web.

This, the same as dark mode, and media queries etc, all completely undermines the core idea of the web - a semantic representation of data, rendered by a user agent, according to the users preferences.

CSS & JS are the opposite.

Yes, I realize it's a losing battle, but it's a depressing thing nonetheless.

Dark Mode, and media queries are both just options/hints - they are implemented on the client side - by the user agent.

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.

This is something genius from the article:

"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."

Thank you for your appreciation.

Hi everyone, I'm the author of this article. I was informed that my article has been shared here. I'm really glad to see the feedback and comments from so many people. I understand that this project is not perfect and has many areas that need improvement, as it's still in its early stages of development. I will do my best to make it as good as possible. Thank you all for your support !

Jack: I just wanted to say that this is awesome, that you're echoing a lot of my own thoughts, and that I'm dying to see this as a browser extension or something integrated into Einkbro directly (I've been a fan of that for years now myself).

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.)

Wow, I'm really glad someone can echo my thoughts too. Actually, back in 2021, I proposed building a software ecosystem for E Ink displays. The article is right here: [https://jackscogito.blogspot.com/2022/05/the-necessity-of-es...] (This article was rewritten in English in 2022.) And some of your design principles resonate with mine, but yours are more concise and clearly highlight the characteristics of E Ink displays.

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.

It's a bit jarring having my (usually prolix) writing described as "concise", but thanks. From your "Necessity" article, the point about minimising any ancillary screen elements is another that I strongly support. I'll almost always hide system menus and even the Onyx BOOX navigation ball when I'm reading in depth.

As much as EinkBro's paginated navigation is an improvement over scrolling (to the extent that I keep trying to navigate other apps similarly, and am disappointed), eInk Mode's more complete pagination is a huge step up from that.

I'm admittedly biased, but the newspaper layout really is calming, and looks great on my 13.3" Max Lumi. I'm also viewing it on an iMac 27" display, windowed, full-screen, and resized smaller. A large eInk display would make a cool demo.

For a static or paginated display it's possible to reduce the lede context (displayed story paragraphs) to include more headlines within a single page, or so that each page shows most of a sections' content. I've though of having an automatically-advancing display as well, though sorting how to do that through a Web browser might be challenging (a sequence of URLs most likely).

But yeah, I'm having fun and would like to incorporate your tool into this.

Actually, I know EinkBro's author, Daniel Kao, and I intend to contact him about potentially integrating this module. Four years ago, I proposed and demonstrated the pagination concept to him, leading to discussions that eventually resulted in his release of the first public version of EinkBro. I've been a dedicated EinkBro user ever since.

I'm going to advocate for this as well.

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.

Thank you very much! I need to correct my words, because your newspaper doesn’t contain images, so I think you can use Eink mode for grid or flex layouts without any problems.

I've been thinking through approaches though I haven't yet attempted incorporating eInk Mode yet.

My basic document model is:

  <header>
  <main (flex layout)>
    <nav>
      <.headlines-nav (column layout)>
    <.sections>
      <section>
        <article>
        <article> ...
      <section>
        <article>
        <article> ...
      ...
 </main>
 <footer>

The headlines-nav is effectively a table of contents, and should be preserved as part of the main document. The header and footer can be treated as preliminary and terminal content. I think it makes sense to think of the <sections> as chapters or sections of the document, probably with page breaks. After that, a media query for positioning the articles within each section should make sense.

I've been talking to someone who'd prefer a printed-out version of the page (motor-neural limitations), and this might be one path toward that.

FWIW, I've considered adding images to the output, though in general I find these don't add much, and in fact frequently detract from, actual content. I've done some manual edits to add in images on a few instances. Automating that process of selection and incorporation is another challenge of course.

In lieu of an e-ink monitor, I use a hotkey to toggle "Grayscale" filtering on my Mac.

It's taking some of the addictiveness out of my screen viewing.

On the trip to my local recycling center I immediately did a double take when I saw a pair of Eizo GX540 monochrome medical diagnostic displays sitting there. I've got these babies hooked up and I can see myself using this e-ink mode and the grayscale nature of these monitors. Although these monitors weren't intended for productivity they are very good at editing B&W photography, terminal work, and even old films.

Side note: is there any eink monitor someone recommends? I have a macbook pro, a macbook air and a remarkable pro. The Remarkable pro (has colors) flickers way too much. My macbook pro also uses miniled which dries my eyes. It is using PWM I figured (work laptop, so I used it docked). I want an eink monitor with no flickers, that is easy on the eyes. The macbook air screen is great compared to the macbook pro (does not use PWM). I thought I don't need color on the eink monitor, but syntax highlighting helps ... Maybe I am just getting old ha, but I sit in front of monitors for 10-12 hours a day

I wish this was supported by default in the Kindle browser. I wonder if there was a way to make it an extension or a wrapper and make it available in eink device browsers. But it seems that even this blog post page is not supported in the Kindle browser. (I don't see the eink mode icon.)

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.

Maybe this could be implemented on a jailbroken Kindle?

Yes! Maybe even a koreader extension with these features will be nice!

I think Kindle's experimental browser does not support javaScript so that's the reason why there's no eink icon. I do hope I can use Eink mode on my Kindle too.

It has limited JavaScript support according to this: https://imgur.com/a/Ig8MyyH Should be enough to implement the claimed features at least.

Love this idea!

I have been working on a way to turn your phone into a better reader device with https://astropad.com/bookcase

Really like this.

In Safari on iOS this works great. If this combined dark mode and reader mode font sizes I’d call my favorite way to read the mobile web.

I'm glad to hear that. Thank you.

This sounds like it needs to be a new media query in CSS. It could overlap heavily with the print media query.

Honestly now I want "paged mode" as an option in my browsers next to "reader mode". Or a thing I can choose for reader mode to involve.

Flipping pages on my desktop with l/r arrow keys (which is what this 'eink mode' does if you invoke it on a desktop) instead of endlessly scrolling is pretty nice.

If you don't mind the terminal, `lynx` (for example) could do the trick.

Reply on news.ycombinator.com