Tag: css

How I made the Firefox “reader view” popin NOT overlap text

I ❤️ the Firefox feature called Reader View. I’ve been a fan for many years and I use it often. A lot of the time, I click the “listen” button, and I read while the text is being read to me.

BUT, if you leave the popin (clicking it a second time shelves it back) in order to use the pause/skip/speed buttons and slider while you read along, it blocks some of the text as the text automatically scrolls. See what I mean:

Screenshot of a browser page on desktop in reader view with the 'listen' popin showing pause/skip/speed buttons and slider that blocks some of the text from the page.

Because there’s a lot of empty space on the left side in reader view, I thought it should be possible to get the popup to be drawn over the empty space on the other side rather than overlapping the text.

I initially applied this:

** for the "reader view" popup to NOT overlap the text **/
.dropdown .dropdown-popup {
inset-inline-start: -260px !important;
}

Then, my colleague Bert Bos (who knows a thing or two about CSS because he co-invented it with Håkon Lie) advised me to use the below, for the toolbar to stay at the left margin, and as long as that margin is wider than the popup, it will not overlap the text.


/* Put the toolbar in the reader view as far left as possible. */
#toolbar.toolbar-container .toolbar.reader-toolbar {
margin-inline-start: 1px !important;
}

I’m much happier now; this is how it looks:

Screenshot a browser page on desktop in reader view with the 'listen' popin showing pause/skip/speed buttons and slider at the left of the page, thus no longer blocking any of the text from the page.

Add a user stylesheet

  • In the Firefox address bar, type 'about:profiles' and click the button “Show in Finder” (or similar if not on Mac OS) next to “Local Directory”
  • Open the “chrome” directory (or create it if it does not exist)
  • Edit the file 'userContent.css' (or create it if it does not exist)
  • Paste the custom snippet and save the file:
    /** Put the toolbar in the reader view as far left as possible. **/
    .dropdown .dropdown-popup {
    inset-inline-start: -260px !important;
    }
  • In the Firefox address bar, type 'about:config' and set 'toolkit.legacyUserProfileCustomizations.stylesheets' to true
  • Open the menu Tools > Browser Tools > Web Developer Tools
  • Click the three-dot menu, and choose “Settings”. Under “Inspector”, check the “Show Browser Styles” checkbox
  • Restart Firefox
  • Enjoy!

Vote it up as an idea in Mozilla Connect

I put it on the Mozilla Idea Exchange and if you think this change should be the default, please vote it up!