5 ms·
Multi-column style for Readability
- raptrex 16y agoI guess its a matter of preference, but I dont know anyone who likes scrolling sideways on a computer. Maybe it would work on the iPad, but not on a computer monitor
- anoved 16y agoIn my experience, having used this for a few weeks now, not much scrolling is involved. That's part of the point - more of the text is visible at once, without too many distractions, be they visual or interactive. Scrolling is a matter of tapping the right arrow key once or twice when you get to the end of a column or the page. Plus, with today's laptop trackpads, scrolling sideways is just as easy scrolling vertically - but, true, it's not conventional. I feel like quoting "Green Eggs and Ham" - try it, and you'll see! Or not. It's certainly not intended for "typical web content" of videos and bite-size blog posts (and neither is normal Readability). I use it for longer articles and short fiction. That said, I certainly accept the feedback that many people seem put off by the horizontal scrolling concept. Just thought I'd share!
- rane 16y agoThis doesn't play very well with typical web content.
- petercooper 16y agoI like the improvements in terms of getting rid of the full justification (which is proven to be harder to read) and shrinking images, but.. multiple columns? Scrolling sideways isn't typically a pleasurable experience and you can still have a thinner column with vertical scrolling with Readability. I wonder if it'd be possible to have multiple columns but with a "paging" mechanism rather than horizontal scrolling? I'm going to try this out on the iPad, though, as it'd be nicer to get more on the screen in landscape orientation (the one I use 95% of the time). It's cool that JavaScript makes this sort of personalized customization so easy and kudos for the effort in making something that's pretty slick. Even if I don't like the layout, we need more people doing things like this :-)
- anoved 16y agoThanks! When I first set out to make it, I thought JavaScript would be involved - but turns out a new stylesheet was sufficient. There's JS on the page to replicate the bookmarklet maker, of course, but swapping the stylesheet URL in an existing Readability bookmarklet amounts to the same thing. It is interesting to see the initial reaction (aversion) here and elsewhere to horizontal scrolling. I guess I concur that it is annoying in most contexts, but hadn't noticed it here. Maybe it's a difference between browsing/skimming behavior and prolonged reading?
- petercooper 16y agoThere's JS on the page to replicate the bookmarklet maker, of course, but swapping the stylesheet URL in an existing Readability bookmarklet amounts to the same thing. That's interesting. I'd actually like to tweak the stylesheet too. Seems easy enough now you say it, but a post about doing that might fly well. (I'd quite like to hack Safari Reader to get rid of that full justification too, but I need to Google on how to crack into that..) I guess I concur that it is annoying in most contexts, but hadn't noticed it here. Maybe it's a difference between browsing/skimming behavior and prolonged reading? It doesn't seem to be so detested on devices like the iPad and iPhone. Page turning is a form of horizontal scrolling, after all. I haven't yet tried your system on the iPad but I think it might cut it for me. I suspect the aversion to horizontal scrolling on the desktop is based on history and, then, habit. As you may remember, scrollwheels used to only go up/down so horizontal scrolling was cumbersome. You could also scroll by vertical page by pressing space or PgDn in most apps. Similar shortcuts for horizontal scrolling are/were rare and inconsistent. Vertical scrolling was so easy that, by comparison, horizontal scrolling was annoying and difficult.
- anoved 16y agoI'd like to learn more about Safari Reader, too - especially the paginated-article collation feature, which is a real advantage over Readability. Anyway, as for tweaking the stylesheets - here are some links to compare. Here is the original Readability stylesheet: http://lab.arc90.com/experiments/readability/css/readability.css http://lab.arc90.com/experiments/readability/css/readability... And here is my version (featuring an inexpert mix of px, em, and % units that surely could be improved): http://anoved.net/css/mcreadability.css http://anoved.net/css/mcreadability.css To try your own modifications, edit a Readability bookmarklet and set _readability_css.href to the URL for your stylesheet.