Hacker News Reader

Comment by Retr0spectrum | Hacker News Reader

To improve readability:

    document.body.style.maxWidth = "768px";
    document.body.style.margin = "auto";
    document.body.style.fontSize = "20px"

View on HN

I don't think your post was critical of the design, but I wanted to offer some perspective.

What I like about sites like this, is that I can adjust them to my needs using a tool I have full control over. The browser allows me to:

* Adjust window size or detach tab and resize

* Use zoom judiciously

* Use my preferred browser reading font

Sure, it may not be beautiful, but is surely is functional. I'll also leave this here: http://motherfuckingwebsite.com/

I completely agree. The advantages of sites like these is that just 3 lines of code is enough to tweak it to my preferences. I doubt it would be so simple for sites with mountains of existing CSS.

It's also worth noting that Firefox's "reader" mode works perfectly with this site.

The page is very beautiful in its versatility. No fancy JS hacks to keep pages style: you can use Firefox' reader view for instance. I keep my browser windows around 1000x1000 pixels because the vast majority of sites would otherwise style me overlength lines of text.

And it's fine, as long they scale properly and allow narrow browser views. The only criminals are the ones that force wide paragraphs... sometimes to a point I have to vertically scroll a paragraph.

http://bettermotherfuckingwebsite.com/

http://codepen.io/dredmorbius/pen/KpMqqB

http://thebestmotherfuckingwebsite.com

This one wins, but its address reminded me of this one:

https://thebestmotherfuckingwebsite.co/

which also has valid points to make.

I'm constantly annoyed by non full-width sites. This article is easy to adapt to a smaller window, but you can never scale up artificially constrained sites

There really should be a command for this in the browser's View menu.

(I'm sure there's a million add-ons for this... But these days I try hard to avoid customizing my setup, because so often I have to use another computer anyway. Learning to live with defaults makes life so much easier in the long run.)

Reader View in Firefox.

Or Win + Left Arrow and then Ctrl + = a few times.

Nice, I think I'll have to try Firefox again after a long break. (The prospect feels not unlike going out with your high school girlfriend after you've both been married and divorced separately.)

It's literally a button in firefox that shows on most blogposts, it's built in to default firefox.

Readability view has options for font size, font-style (serif vs sans-serif) and off-white / sepia / dark modes.

Edit: It seems to even have new controls for adjusting column width and line-heights.

Firefox has reader mode, it's a little book icon on the right side in the address bar.

Chrome has distill mode, start chrome with "--enable-dom-distiller" option. https://github.com/chromium/dom-distiller

I think there's similar options in IE, but can't remember its name.

I just held down CTRL and clicked my mouse scroll wheel up a few times. Zoom 150% looks great to me.

The browser will remember this preference for his site, as well. No plugins needed.

Here is a bookmarklet that does this:

  javascript:(function() { document.body.style.maxWidth='700px'; document.body.style.margin='0 auto'; document.body.style.lineHeight='1.5'; document.body.style.fontSize='20px';} )();

I call it StyleLet :).

In a similar vein, I apply these three styles for readability:

    document.body.style.fontFamily = 'Georgia';
    document.body.style.lineHeight = '1.62em';
    document.body.style.margin = 'auto';

Then I zoom to get the font size I need.

> document.body.style.maxWidth = "768px";

Why not just resize your browser window?

Because then all the other 99 tabs in my browser window are wrong and I've trapped myself in a mode, as per Larry Tesler: https://en.wikipedia.org/wiki/Larry_Tesler

I apply similar, but relative styles to pages for readability: https://news.ycombinator.com/item?id=12479901

> Because then all the other 99 tabs in my browser window are wrong

If they are only readable on a wide-screen-width window, perhaps they were wrong to begin with?

"Everyone else is wrong" is a frustrating way to live.

> "Everyone else is wrong" is a frustrating way to live.

Well, if they are, then they are. Pretending everyone else is right, when they're not, has its own drawbacks.

Or... you know, maybe don't browse stuff with a full-sized browser window? I don't get who is forcing people to make their surfing so uncomfortable.

I'm not prepared to resize my window as I switch between tabs.

I'm not really complaining, I just wanted to point out how little styling was needed to massively improve readability.

Understood, I upvoted your message. The different preferences between sites -- and tabs -- is the biggest nuisance for me too, but not too big a nuisance.

You don't have resize commands bound to the keyboard? Windows ships with these, Mac and Linux have free programs that do them well.

Out of curiosity, do you use OSX? I am mainly a Windows user, which lends itself very well to full-sized windows. But whenever I use Mac, I find myself using smaller windows. Might also be related to resolution/retina displays.

I have the opposite, or at least on my Macbook I have everything full screen. Every program I run I use full screen, and therefore has its own virtual desktop. It gives me a lot more screen real estate without the menu bar on the top and the dock on the bottom.

Linux, with a tiling window manager. :-) You could say that it favors strongly both cases: running windows full-screen and also running a 70% window with say two 15% windows.

Windows 10, which I use in work, has this annoying habit that if I maximize browser for a webapp that requires (benefits from) more screen estate, it doesn't always restore to the earlier size correctly. But it's something I can live with.

A computer screen connected to the Internet already has ridiculous distraction potential, seeing multiple windows simultaneously makes it even worse.

I run low-distraction windows or even just show the desktop next to my half-a-screen browser.

What's uncomfortable about browsing with a full-size window? I usually find it slightly more painful not to have the browser maximized.

I have found it generally very uncomfortable because a vast majority of content on the web doesn't scale well vertically. You keep a wide window, you get way too long paragraphs that are hard to read as your eyes jump between the lines and whatnot. I've seen a couple excellent designs that do new columns as content comes, and there's only vertical scrolling. The columns are like 40-60 chars in width, as they should be. It's nice, accommodates the today's wide screens super well. But a majority of sites, HN included, are way wide for content if I browsed them in a 1920x1080 viewport.

HN specifically, if I have serious reading to do in the comment section, I might narrow my browser down to 600px for even better readibility.

Fair enough. I'm accustomed to reading 200 character lines, so I guess I don't notice as much. Making the window narrower to force the lines to wrap at 40 or 60 chars feels constricting/claustrophobic to me, and I'm not a big fan of the sites that display text in a thin column, about 1/3 the width of the screen.

There were a few years that I configured my work machine to have dual monitors in portrait mode. That helped my feeling of constriction, while giving shorter lines of text. As a bonus, it matched pretty closely to the 1280 width (at 1200 pixels), and often allowed more of the text to be shown at once.

Reply on news.ycombinator.com