Last active
August 30, 2024 15:10
-
-
Save jnturton/34d8bad35f79c9de916f44d0f08e9fbc to your computer and use it in GitHub Desktop.
A multi-column layout for Firefox's Reader mode.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Save this file as userContent.css in the chrome/ subdirectory of your Firefox profile | |
| * directory. You may need to create the chrome/ subdirectory first. | |
| */ | |
| @namespace url(http://www.w3.org/1999/xhtml); | |
| /* multi-column layout for FF < 58 */ | |
| @-moz-document url-prefix("about:reader") { | |
| /* multi-column layout */ | |
| #container { | |
| max-width: initial !important; | |
| column-width: 25rem; | |
| column-gap: 1rem; | |
| text-align: justify; | |
| hyphens: auto; | |
| } | |
| /* reduce font size for code and literal text */ | |
| #container pre, #container code { | |
| font-size: initial; | |
| } | |
| /* (optional) Hide HTML elements belonging to antenna.is, a user feedback system used by some sites */ | |
| span.antenna { | |
| display: none; | |
| } | |
| } | |
| /* multi-column layout for FF >= 59, identifying Reader HTML is messier */ | |
| body.loaded>div.content-width1 | |
| ,body.loaded>div.content-width2 | |
| ,body.loaded>div.content-width3 | |
| ,body.loaded>div.content-width4 | |
| ,body.loaded>div.content-width5 | |
| ,body.loaded>div.content-width6 | |
| ,body.loaded>div.content-width7 | |
| ,body.loaded>div.content-width8 | |
| ,body.loaded>div.content-width9 { | |
| max-width: initial !important; | |
| column-width: 25rem; | |
| column-gap: 1rem; | |
| text-align: justify; | |
| hyphens: auto; | |
| } | |
| /* reduce font size for code and literal text */ | |
| .moz-reader-content pre, .moz-reader-content code { | |
| font-size: initial; | |
| } | |
| /* (optional) Hide HTML elements belonging to antenna.is, a user feedback system used by some sites */ | |
| .moz-reader-content span.antenna { | |
| display: none; | |
| } |
Updated for Firefox 59
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
These CSS tweaks give a newspaper-like layout to Firefox's Reader mode. The number of columns displayed is not fixed but calculated from the column-width property and the width of your browser window. A screenshot from a maximised Firefox on a 1920x1080 monitor is shown below.