How to Customize Firefox Reader View for Better Readability

Reader View is a renouned underline of a Firefox browser, that changes a appearance of a web page, and makes it some-more readable by removing visible clutter such as images, ads, headers, and sidebars. Reader View is, however not available, for all home pages.

If a underline is accessible for a certain page, we will find a idol to capacitate it in a figure of a tiny book icon displayed to a right of a residence bar.

IMAGE: Mozilla.org

There are a few built-in options that concede readers to customize a demeanour of a Reader View. We’ll be looking during those options before display we what we can do to serve personalize a demeanour of a Reader View. For demo purposes, we will be regulating an article by National Geographic article.

Pre-Built Options

Firefox Reader View comes with a few pre-built customization options such as dark, light and sepia backgrounds, tractable font sizes, and serif and sans-serif typefaces. You can customize a thesis by overriding a CSS manners of these pre-existing options.

Default Reader View Options

Default Reader View Options

I use a dim skin with serif fonts, and this means that we will need to overrule a belonging CSS classes, in my box .dark and .serif.

If we wish to customize another thesis various (skin + font), we will need to use a suitable CSS selectors. You can check these out with a assistance of a Firefox Developer Tools by attack F12.

Check CSS SelectorsCheck CSS Selectors

Create a Custom CSS File

You need to emanate a record called userContent.css inside a chrome folder of your Firefox form folder for your Reader View customizations. To find your Firefox form folder, form about:support into a URL bar and press Enter.

You’ll find yourself on a page that contains a technical information associated to your Firefox install. Click a Show Folder button, and it will open your Profile folder.

Profile Folder Button in FirefoxProfile Folder Button in Firefox

the Profile Folder button

Create a folder called chrome inside your Profile Folder (if we don’t have it yet), and a record called userContent.css inside a chrome folder. The record trail looks like this:

...Profilesyour-profile-folderchromeuserContent.css
Add a Custom CSS Rules

Once you’ve combined and non-stop userContent.css in a formula editor, it’s time to supplement your CSS rules. In sequence to customize a pattern of a Reader View, we need to target a body tab with a suitable selectors.

You can use a following selectors for a opposite default options:

/* When dim credentials is comparison */
:root[hasbrowserhandlers="true"] body.dark  {
}
/* When light credentials is comparison */
:root[hasbrowserhandlers="true"] body.light  {
}
/* When sepia credentials is comparison */
:root[hasbrowserhandlers="true"] body.sepia  {
}
/* When serif rise is comparison */
:root[hasbrowserhandlers="true"] body.serif {
}
/* When sans-serif rise is comparison */
:root[hasbrowserhandlers="true"] body.sans-serif {
}

You can also mix a classes, to aim a specific multiple of settings.

/* When dim credentials and serif rise are comparison */
:root[hasbrowserhandlers="true"] body.dark.serif  {
}
/* When sepia credentials and sans-serif rise are comparison */
:root[hasbrowserhandlers="true"] body.sans-serif.sepia  {
}

Do not use a common selector :root[hasbrowserhandlers="true"] body to aim all a settings during once. It will work, though it will also impact other browser pages, such as about:newtab, as their base elements also lift a hasbrowserhandlers charge (which is used to symbol a eventuality handlers of inner Firefox pages, such as about: pages).

Here’s a formula we combined to my

userContent.css. we altered a rise family, rise style, colors, and widened a content container. You can use any other character manners according to your possess taste.

/** userContent.css
***************************/
:root[hasbrowserhandlers="true"] body.dark.serif,
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
font-family: "courier new" !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif {
background-color: #13131F !important;
color: #BAE3DB !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #reader-domain {
font-style: italic !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif h1,
:root[hasbrowserhandlers="true"] body.dark.serif h2,
:root[hasbrowserhandlers="true"] body.dark.serif h3,
:root[hasbrowserhandlers="true"] body.dark.serif h4,
:root[hasbrowserhandlers="true"] body.dark.serif h5 {
color: #06FEB0 !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif a:link {
color: #83E7FF !important;
}
:root[hasbrowserhandlers="true"] body.dark.serif #container {
max-width: 50em !important;
}

Note that it’s required to use a !important keyword in userContent.css for all CSS rules. The browser adds user-specified skill values before a values specified by a author (the developer of a given web page, here a Reader View).
Hence, any user-specified skill value but a !important keyword won’t work if an author-specified stylesheet also targets a same property, as it will be overridden.

Final Result

You can see a changes of my Reader View thesis below. Use your possess CSS manners to customize a pattern of your possess personalized Firefox Reader View.

Before

Default Firefox Reader View

default Firefox Reader View

After

Customized Firefox Reader View

customized Firefox Reader View

If we wish to dive deeper in a thesis customization of Firefox tools, check out my prior educational on a customization of a Firefox Developer Tools theme.

Add Comment