Customizing how you read on the web

There are a lot of websites posting news, articles or blog entries, some in an older design, some very modern. Some have designs making it annoying to read the content, be that because of distractions on the side of, or right inside the article, the text having a weird font, or because of a small social pop-up that opens whenever you select some text.

But, since the website is published on the Open Web with standardized and open protocols, you don’t have to view the website the way the author intended. All websites are ultimately written using the same language: The HyperText Markup Language or HTML for short. You don’t need to know the details of how this works, but suffice it to say that the fact that websites are always structured in this way allows you to view the site the way you want.

In the first part I will show you one easy way to take advantage of this by using features already built into your browser. In the second part I will show you how to customize you experience even more, but that part will require experience with web development.

The Reader mode

Many browsers, including Firefox, Safari and Edge, with the notable exception of Google Chrome, support a Reader Mode out of the box. Whenever you are visiting a website that mainly consists of text like a news article or a blog post, a small icon looking like a sheet of paper will appear in the URL bar. For Firefox, it looks like this:

A stylized sheet of paper with three lines on it

By clicking that icon the website will be transformed into a very simple, text-only version, removing most distractions and giving you a standardized reading experience.

Q: Wait, that’s it?

A: Yep, that’s it. One click to get rid of all the distractions

You should be able to try it out right now, on this blog post. And if you’re using Google Chrome, Brave or some other browser built on Chromium that doesn’t support Reader Mode out of the box, I’d recommend switching to Firefox you can find Add-ons for it on the Web Store, although I don’t know which ones are good.

After activating the Reader Mode you have controls for configuring how your reader mode should look. Which font do you like best, how large and how wide should the text be? Do you prefer reading on a light or a dark background?

Some Caveats

HTML is a very versatile language, and there are a lot of ways to use or abuse it. The Reader Mode must try to work with whatever the author of the website as written and that may not always work. Sometimes the icon for activating Reader Mode may not show up at all even though the website clearly contains long-form written content. Another problem that may arise is images getting lost or duplicated after activating Reader Mode. But if that happens you can just turn it off again.

In the next part I will show you how to customize the Reader Mode even more, and even how you can customize the default look of any website. Although, as I warned, this part will require some experience with web development.

Adding custom CSS to any website

Cascading Style Sheets (CSS) are used for specifying how the website should look visually. I do realize that there are a few extensions that allow you to do the same thing, but installing an extension always means that you have to trust the developer of that extension not to harvest your browsing habits. And extensions that get popular seem to be quite prone to selling out. Using a functionality already built in to the browser is safer, if a bit more cumbersome. This guide will be specific to Firefox, though I assume that other browser have equivalent configuration options.

  1. Open Firefox and type about:config into the URL bar. This will take you to the advanced preferences
  2. Read the warning that shows up and do some research on what it means. When you are sure of what is going on, click on “Accept the Risk and Continue”
  3. Search for toolkit.legacyUserProfileCustomizations.stylesheets and set this option to true. This will instruct Firefox to load the custom Stylesheets we are about to create
  4. Type about:profiles into the URL bar
  5. Under the profile named default search for the entry named Root Directory and click on the Open Directory button that’s next to it. This will open the directory where Firefox stores its configuration on your hard disk
  6. Inside this directory open the folder named chrome (this has nothing to do with Google Chrome, chrome is just a different term for the Graphical User Interface)
  7. Inside the folder named chrome create a new file named userContent.css, this CSS file supports some special syntax to allow you to style any website you want

The userContent.css is structured similar to a typical .css file, but rules are wrapped in a context specifying on which sites they should apply.

For example, if you don’t like the look of this blog, you can apply custom styling like this:

@-moz-document domain(iyzana.site) {
  h1 {
    color: pink;
  }
  /* more of your custom css */
}

Although I can’t see why you would want to change this beautiful design :)

You can even style the various Firefox about: pages, including, for the goal of this post: The Reader Mode. Although the Reader Mode built in to the browser can already be modified quite extensively you may want to change more advanced or more specific details such as the text selection color, separate heading styles or the placement of images.

To style the reader mode, use url-prefix(about:reader) as the @-moz-document selector and then add the CSS. Here is a small example for how that may look:

@-moz-document url-prefix(about:reader) {
  /* selecting a font, but keeping the serif <-> sans-serif toggle working */
  body.serif {
    font-family: Merriweather !important;
    font-weight: lighter;
  }

  body.sans-serif {
    font-family: MerriweatherSans !important;
  }

  /* selecting a color for selected text */
  ::selection {
    background-color: #22437e !important;
  }

  /* selecting a separate font for headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: MerriweatherSans !important;
    font-weight: bold !important;
  }

  /* making the title larger */
  .header > h1 {
    font-size: 2.5em !important;
    line-height: 1.1em !important;
  }

  /* centering images, figures and tables */
  img, figure, table {
    margin-inline: auto !important;
  }
}

Voilà. A fully customizable reading experience for any written content on the Web that you can activate with just one click.