Super Fast Reader Mode for the Entire Web, with 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:

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.

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!

$ 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:

Downsides

• No JavaScript, so websites that rely 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.

Discussion