duncan­lock­.net

Super Fast Reader Mode for the Entire Web, with Dillo Plus

Want “Reader Mode” for almost the entire web - and have every page load nearly instantly? Here’s how.

There are three main constellations of Web Browsers - ones based on Google’s Blink rendering engine (used in Google Chrome, MS Edge, Vivaldi, Brave and others), ones based on WebKit (used in Safari on MacOS & iOS 7 iPadOS) - and on Mozilla’s Geko engine (used by Firefox & Thunderbird).

There are also a few other, “non-mainstream browsers”, that have their own engines. Cosmic wanderers, not part of the main constellations, that chart their own course, building everything themselves: Flow, Servo, LadyBird, NetSurf - and Dillo-Plus.

Dillo Plus has a Tiny Superpower

Actually, the Dillo-Plus browser has quite a few tiny superpowers - but the one I’m interested in is its ability to ignore all the CSS styles from the website and load your CSS instead:

Screenshots of three web pages, each with two browser windows side by side - one of Firefox showing the normal appearance and one with Dillo Plus and my stylesheet, showing the Reader Mode version.
Figure 1. Before and After - Firefox on the left, Dillo Plus (and my stylesheet) on the right.

Most browsers except Chrome support “User CSS” in some form, although they mostly don’t advertise this and make it difficult to set up. But, as far as I know, they all load the website’s CSS styles first, then apply your user styles on top.

This is fine – and is how the “Cascading” in Cascading Style Sheets is supposed to work, after all. It allows you to override things you don’t like, and this works OK-ish for little things – but you’re always fighting with the styles from the website.

Screenshot of the Dillo Plus tools menu, showing the options: 'Use remote CSS' (unchecked), 'Use embedded CSS' (unchecked) - and 'Use reader mode CSS', which is checked.
Figure 2. Use the “Tools” menu to switch off all other CSS (uncheck the first two options) - and switch on your Reader/User Mode CSS.

If you want to override lots of things (or everything), you tend to end up with large, unwieldy CSS that overrides tons of things, as well as lots of little CSS overrides for individual websites - and it ends up full of !important qualifiers to make your styles override previously applied ones.

Dillo Plus allows you to avoid all that messing around and just switch off all other CSS except yours. This sounds pretty basic, but I don’t know of any other browser that supports this - and the difference it makes is massive.

Your Web, Your Way

Once you do this, all the websites you visit will suddenly look the way you want them to. Want everything in Dark mode? Want everything to use the same font? Want all the fonts to be larger, everywhere? No problem, done. Whatever you want, everywhere, all at once.

Once you browse around this way for a while, the web starts to feel a little bit like one giant website, that’s so fast it’s just…​ part of your computer.

Bring that Smolnet/Gemini Simplicity (back) to the Web

If you’ve used Gemini, or Gopher, or the early Web, you will know what I mean here, but it’s a feeling of simplicity and coherence, as well as a more homespun feel, rather than flashy commercial design in your face all the time. It’s…​ nice, if you like that sort of thing.

As a bonus, Dillo-Plus not only supports Gemini & Gopher, but also applies all this CSS magic to Gemini & Gopher [1] pages, making the whole web smol!

Get Dillo Plus

You can get Dillo-Plus here, but you are going to have to build it from source yourself. Yes, I know. Doing this on Linux is pretty painless, only takes a minute and just worked for me. I have not tried any other platforms, although it supports lots. This is how I did it on Ubuntu 22.04:

First check out the source code:

$ git clone git@github.com:crossbowerbt/dillo-plus.git
$ cd dillo-plus

Check if you have the required build dependencies installed:

$ fltk-config --version
// I didn't, so I installed it:
$ sudo apt install libfltk1.3-dev

Build the browser:

$ make clean && make

Install it - this will overwrite any existing Dillo you might have installed:

$ sudo make install

The Reader Mode User Stylesheet

Dillo-Plus does ship with a built-in Reader Mode Stylesheet, but I made one that I like much better. Bear in mind that Dillo doesn’t support fancy new CSS things like variables, or units like rem, so I’ve avoided those:

/* dark mode, and a little bit of meyer reset */
* {
  background-color: #363839 !important;
  color: #d1cec9 !important;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  line-height: 1.1;
  max-width: 85%;
  margin: 3em;
  font-size: 150%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: #d1cec9;
}

p {
  line-height: 1.35;
}

/* https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/ */
* + * {
  margin-top: 1.2em;
}

/* Heading Hierarchy */
h1 {
  font-size: 60px;
}
h2 {
  font-size: 48px;
}
h3 {
  font-size: 36px;
}
h4 {
  font-size: 30px;
}
h5 {
  font-size: 24px;
}
h6 {
  font-size: 21px;
}

/* Links */
a {
  color: #d1cec9;
  text-decoration: underline;
}
a:visited {
  color: #8e8b88;
}

blockquote,
aside {
  border-left: 5px solid gray;
  margin-left: 0;
  padding-left: 1em;
}

/* Code */
code,
pre {
  font-family: monospace;
  font-size: 95%;
  border: 1px dotted #ccc;
  padding: 0.4em 0.5em;

  /* wrap */
  white-space: pre-wrap;
  word-wrap: break-word;
}

That’s it, currently - 84 lines of CSS, including blank lines & comments, to restyle the entire web!

I’ve put this up on GitHub here if you want to grab it that way, contribute updates or add new ones!

Make Dillo Plus Use Your Stylesheet

Dillo Plus puts its reader mode stylesheet here: /usr/local/etc/dillo/style_reader_mode.css, which is owned by root. So you will need to either edit this as root, or to make things easier, replace the bundled user stylesheet with symlink to your one, so you can edit it without being root:

$ sudo rm /usr/local/etc/dillo/style_reader_mode.css
$ sudo ln -s ~/dev/dillo-reader-mode-css/simple-dark.css /usr/local/etc/dillo/style_reader_mode.css

Upsides & Downsides of Browsing like it’s 1999

So, this isn’t all gravy - there are some downsides to browsing like it’s 1999:

Upsides

  • No JavaScript, which basically means no ads or malware either.
  • Dillo is fast anyway, but no JavaScript really helps with this.
  • Like, really fast.
  • Your web, your way. Dark Mode? Done. Larger fonts? Done. Rainbow Background? Done. Whatever you want, everywhere, all at once.
  • Bring that smolnet/Gemini simplicity (back) to the web.

Downsides

Screenshot of a New York Times article, Firefox on the left, Dillo Plus on the right. In the Firefox window, the article is obscured by Cookie popups and Paywalls. The Dillo Plus one is blank except for 'Please enable JS and disable any ad blocker'.
Figure 3. The New York Times - Firefox on the left, Dillo Plus on the right. You can’t read the article either way, but still…​
  • No JavaScript, so websites that relay on JavaScript just don’t work.
    • Medium Articles load images via JavaScript with (apparently) no fallback, for example, so no images in Medium.
  • Currently no SVG or Webp, AVIF etc…​ image support.
  • You kind of get a taste of the “Screen Reader” experience of the Web - this is mostly that people building the websites aren’t given time to build them with your browser in mind, nor testing in your setup, so things break/suck/work ok, depending.
  • Commercial websites tend to have a lot of navigation crap at the top - loads of nested lists of links - usually turned into dropdown menu’s with CSS & JS. This will all get spat out at the top of the page. Some sites have a “Skip to Content” link at the top, which is very useful, but many don’t.
  • You have to build the browser from source code yourself. If you’re on Linux, don’t worry, it builds in a few seconds and just works.

Could Firefox Support This, Please?

It would be really nice to have the option to do this in Firefox. That way you’d get all the support for modern CSS & image formats, as well as the ability to switch off all CSS except your own. These browsers can already switch off JavaScript, although the option is rather buried in their settings, but not CSS.


References

Footnotes


  1. Gemini pages look like web pages, Gopher pages look like Gopher pages - i.e. preformatted text

Related Posts