本文转自： https://82mhz.net/posts/2024/10/printing-articles-from-websites-in-two-column-layout/
仅做个人收藏，版权归原作者所有
For a while I thought it would be great to be able to print interesting articles from the web in a two column layout like they would appear in a magazine. Today I set out to figure out how to do it, and I succeded.
This is just a quick post more for myself than for anyone else, so I don’t forget how I did it. For starters, everything I’m doing is in Firefox.
Here’s the problem. Say I find an interesting article online that I would like to read or archive on paper for whatever reason. Let’s take this article by Dom Corriveau as an example. If I simply hit “print” inside Firefox, that’s what Firefox produces:
That’s okay, but the text runs all the way across the page from left to right, which makes it hard to read on an A4 page.
Here’s what I want:
That’s much better for reading (in my opinion).
There’s two ways I figured out how to do it:
With a browser extension
I found the extension Stylus for Firefox that allows for overwriting the CSS of any website with custom CSS code. I installed it in Firefox and created a new Style inside the extension under “Actions”, called it “print 2 columns” and added the following CSS code:
@media print {
body {
column-count: 2;
column-fill: auto; /* Vertical use of space, default: balance the creation of columns is symmetrical. Auto with width: 100%, First complete the first column vertically, then the next column until the end of the content. */
column-gap: 2em; /* Distance between columns */
column-rule: 2px solid black; /* Lines between columns */
column-span: all; /* Another method to create heading, can be 2 of 3 columns */
column-width: auto; /* Width of all columns */
text-align: justify;
}
}
Save, and I was done. Now this CSS code will be inserted into the page and when I click on “print”, it will create a two column layout like the one in the screenshot above.
Inside the Firefox reader mode
There is also a way to customise reader mode inside Firefox to print to two columns. Here’s how, taken from here:
- Enter in your Firefox URL-search-bar:
about:support- Open your Profile Folder by selecting
Show Folder- Create a new folder inside your profile folder called
chrome- Navigate into
chromeand create a new plain-text file calleduserContent.css- Edit
userContent.cssaccording to your CSS preferences- In new Firefox profiles, starting from Firefox 69, you additionally have to enable
toolkit.legacyUserProfileCustomizations.stylesheetsinabout:config
I then edited the newly created “userContent.css” file and added this:
@-moz-document url-prefix("about:reader") {
@media print {
body {
column-count: 2;
column-fill: auto; /* Vertical use of space, default: balance the creation of columns is symmetrical. Auto with width: 100%, First complete the first column vertically, then the next column until the end of the content. */
column-gap: 2em; /* Distance between columns */
column-rule: 2px solid black; /* Lines between columns */
column-span: all; /* Another method to create heading, can be 2 of 3 columns */
column-width: auto; /* Width of all columns */
}
}
}
@-moz-document url-prefix("about:reader") {
.moz-reader-content {
text-align: justify;
}
}
Save, restart Firefox and that’s it. The print output from reader mode looks like this:
You might notice that I also added the option to justify the text, which I personally prefer. If you don’t simply delete the line text-align: justify
If this works on all the websites out there remains to be seen, probably not… but it’s a good starting point I feel.
Sources: