Can I make the web have pages? No, really!
November 26, 2013 6:33 AM Subscribe
I want to read web sites by flipping through a series of letter-size pages (like you do with PDFs), instead of scrolling one long page. Right now I'm just printing sites as PDFs and reading them in Acrobat, but is there a way to make the browser do it instead?
OK, followup to this question: after a bunch of experimenting, I find the most comfortable way for me to read web sites is to print them as PDFs and read them in Acrobat. The fact that PDFs have discrete pages with beginnings and ends makes it much easier for me to keep my place reading. But it's a pain in the butt to keep printing from Chrome, opening in Acrobat, and then deleting the PDF when I'm done.
Is there some magic Javascript/CSS/jQuery/plugin/other browserish way to make web sites have 8 1/2 by 11" pages, that I can "flip through" horizontally instead of scrolling?
I'm using Windows, and have access to Chrome and Firefox for my browsing needs.
OK, followup to this question: after a bunch of experimenting, I find the most comfortable way for me to read web sites is to print them as PDFs and read them in Acrobat. The fact that PDFs have discrete pages with beginnings and ends makes it much easier for me to keep my place reading. But it's a pain in the butt to keep printing from Chrome, opening in Acrobat, and then deleting the PDF when I'm done.
Is there some magic Javascript/CSS/jQuery/plugin/other browserish way to make web sites have 8 1/2 by 11" pages, that I can "flip through" horizontally instead of scrolling?
I'm using Windows, and have access to Chrome and Firefox for my browsing needs.
On my phone, I use the Pocket app to read a lot of the internet. It has a page flipping option that lets you tap to change pages. It also removes some formatting to make it more general reading friendly.
I don't see a similar option in their Chrome app, but I could be missing it and/or some features are blocked on my work computer (school teacher with some quirky web blocking that will sometimes just erase option buttons)
posted by lownote at 6:41 AM on November 26, 2013 [1 favorite]
I don't see a similar option in their Chrome app, but I could be missing it and/or some features are blocked on my work computer (school teacher with some quirky web blocking that will sometimes just erase option buttons)
posted by lownote at 6:41 AM on November 26, 2013 [1 favorite]
I suspect other suggestions here will be more pragmatic but if you're skilled at rigging up bookmarklets and using CSS, there is a way, which I just tested using the Chrome Devtools.
If you're in Chrome (or Firefox, but I only tested Chrome), use CSS like this:
This will then turn the existing page into a ten columned page but then also make the page 10x "wider" so each column will be a "page" that you can horizontally scroll to. A bit of a hack but it kinda works!
The main downside is you are defining up front how many "pages" there are (10 in this case). But with a little time and elbow grease, some basic JavaScript could be written that measures the height of the page, the height of your viewport and then automatically works out the number of pages/columns needed. This could theoretically fit into a simple bookmarklet you can click on to get the effect. It'd take me more than the 5 minutes I had right now though, but I'll see if I can have a go at implementing it..
posted by wackybrit at 6:47 AM on November 26, 2013 [2 favorites]
If you're in Chrome (or Firefox, but I only tested Chrome), use CSS like this:
BODY { -moz-column-count: 10; -moz-column-gap: 20px; -webkit-column-count: 10; -webkit-column-gap: 20px; width: 1000%; overflow-x: scroll }This will then turn the existing page into a ten columned page but then also make the page 10x "wider" so each column will be a "page" that you can horizontally scroll to. A bit of a hack but it kinda works!
The main downside is you are defining up front how many "pages" there are (10 in this case). But with a little time and elbow grease, some basic JavaScript could be written that measures the height of the page, the height of your viewport and then automatically works out the number of pages/columns needed. This could theoretically fit into a simple bookmarklet you can click on to get the effect. It'd take me more than the 5 minutes I had right now though, but I'll see if I can have a go at implementing it..
posted by wackybrit at 6:47 AM on November 26, 2013 [2 favorites]
I use Readability for Chrome. There's an option to "read now" or "read later" so you can save bunches and read when you have time.
posted by mrfuga0 at 6:48 AM on November 26, 2013
posted by mrfuga0 at 6:48 AM on November 26, 2013
Best answer: OK, I've come up with a first prototype/alpha of a bookmarklet that will work in Chrome (only, for now) ... ah, MetaFilter won't let you post JavaScript, quite wisely :-) Here's the raw code then:
It just needs to be "bookmarkletted" which I haven't time to do before the editing time ends ;-)
posted by wackybrit at 7:00 AM on November 26, 2013 [3 favorites]
(function(){ var cols = parseInt(document.body.offsetHeight / window.innerHeight + 1); document.body.style.webkitColumnCount = cols; document.body.style.width = 100 * cols + "%"; document.body.style.overflowX = "scroll"; document.body.style.overflowY = "hidden"; })();It just needs to be "bookmarkletted" which I haven't time to do before the editing time ends ;-)
posted by wackybrit at 7:00 AM on November 26, 2013 [3 favorites]
Best answer: OK, here's a complete, working tech demo including the bookmarklet (Chrome only for now but Firefoxing it would be trivial).
posted by wackybrit at 7:08 AM on November 26, 2013 [6 favorites]
posted by wackybrit at 7:08 AM on November 26, 2013 [6 favorites]
Response by poster: wackybrit, you're a genius! Thank you!
Man, what service...!
posted by overeducated_alligator at 7:10 AM on November 26, 2013
Man, what service...!
posted by overeducated_alligator at 7:10 AM on November 26, 2013
Can't you use Flipboard for at least some of it?
Flipboard
posted by JaneL at 8:14 AM on November 26, 2013
posted by JaneL at 8:14 AM on November 26, 2013
This thread is closed to new comments.
posted by evoque at 6:40 AM on November 26, 2013