11 ms·
To improve readability: document.body.style.maxWidth = "768px"; document.body.style.margin = "auto"; document.body.style.fontSize = "20px"
by Retr0spectrum 10y ago
To improve readability:
document.body.style.maxWidth = "768px";
document.body.style.margin = "auto";
document.body.style.fontSize = "20px"
- kgtm 10y agoI 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/ http://motherfuckingwebsite.com/
- Retr0spectrum 10y agoI 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.
- pvdebbe 10y agoThe 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.
- ZeroGravitas 10y agohttp://bettermotherfuckingwebsite.com/ http://bettermotherfuckingwebsite.com/
- palunon 10y agohttp://codepen.io/dredmorbius/pen/KpMqqB http://codepen.io/dredmorbius/pen/KpMqqB
- eliboy 10y agohttp://thebestmotherfuckingwebsite.com http://thebestmotherfuckingwebsite.com
- ZeroGravitas 10y agoThis one wins, but its address reminded me of this one: https://thebestmotherfuckingwebsite.co/ https://thebestmotherfuckingwebsite.co/ which also has valid points to make.
- pavlov 10y agoThere 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.)
- throwawayReply 10y agoIt'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.
- GoToRO 10y agoReader View in Firefox. Or Win + Left Arrow and then Ctrl + = a few times.
- pavlov 10y agoNice, 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.)
- iamtew 10y agoFirefox 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 https://github.com/chromium/dom-distiller I think there's similar options in IE, but can't remember its name.
- teach 10y agoI 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.
- pvdebbe 10y agoOr... 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.
- deleted 10y ago[deleted]
- Retr0spectrum 10y agoI'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.
- pvdebbe 10y agoUnderstood, I upvoted your message. The different preferences between sites -- and tabs -- is the biggest nuisance for me too, but not too big a nuisance.
- softawre 10y agoYou don't have resize commands bound to the keyboard? Windows ships with these, Mac and Linux have free programs that do them well.
- Scarblac 10y agoA computer screen connected to the Internet already has ridiculous distraction potential, seeing multiple windows simultaneously makes it even worse.
- pvdebbe 10y agoI run low-distraction windows or even just show the desktop next to my half-a-screen browser.
- dexwiz 10y agoOut 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.
- terminalcommand 10y agoHere 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 :).
- ed312 10y agoI'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
- zeveb 10y ago> document.body.style.maxWidth = "768px"; Why not just resize your browser window?
- pgt 10y agoBecause 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 https://en.wikipedia.org/wiki/Larry_Tesler I apply similar, but relative styles to pages for readability: https://news.ycombinator.com/item?id=12479901 https://news.ycombinator.com/item?id=12479901
- zeveb 10y ago> 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?
- pgt 10y agoIn 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.
- deleted 10y ago[deleted]