Hacker News Reader

Comment by ender7 | Hacker News Reader

I can certainly relate, but please don't try to pretend that this is a pleasant reading experience on a desktop. Lines of text should be about 45–90 characters long (including spaces) in order to create a pleasant reading experience. Do not make me resize my browser window to do this for you.

View on HN

You can also just hit Ctrl-+ to zoom in and out to make the text larger, therefore easier to read.

Alternatively, since most websites reset CSS anyway, you can change your browser defaults to make it a more "pleasurable reading experience". If you're into that.

I'm just saying, these problems aren't really problems. The web was created for desktop viewing...

The issue is not the size of the text (which is small but still legible) but the line length -- that is, how wide the lines are. If lines are too long, then reading becomes an exhausting experience as you sweep your eyes back and forth across the page like a lighthouse.

It's not really possible to enforce line-length with a user stylesheet (increasing the point size doesn't solve the problem, it just balloons the letters up to goofy proportions). This page just needs max-width set somewhere on the text container.

I'm not disagreeing with you but I thought I'd try this as a user stylesheet for this page just now and it looks pretty great on my screen:

    body { -webkit-column-count: 3; } // or -moz- or no prefix or whatever

I'm note a huge fan of column layouts, but first time I saw that particular trick.

Might split out the header separately.

Yeah... and doing it on the whole body would be fatiguing on long pages because you have to scroll up and down the whole page after each column. I'd probably want to do column-split content areas over a certain width (e.g. an <article> or something).

I played around with columns a few years ago[0] after I first saw them being used. I use some JS to keep the containing div the same height as the window and hook into scroll events. This was several years ago fairly soon after columns were being implemented and I'm sure there's a better way of doing it today.

[0] https://etcet.net/projects/columns/

It's still a problem with web user agents, not with the website.

> This page just needs max-width set somewhere on the text container.

So, set max-width on body in your user.css?

Personally I've long since stopped reading the web in "full screen" -- I'm more than a little surprised that people still do that. Assuming you're reading text, why would you want to have to move your eyes across the entire screen to take it in? Much better to have an appropriately sized window IMNHO.

In desktop, resize your browser window. Fully customizable, and no worry for layout break.

In mobile, rotate the device to vertical.

>In desktop, resize your browser window. Fully customizable, and no worry for layout break.

It's better for the user if a site has good readability without them having to do anything.

> ...site has good readability...

Impossible. Because you cannot assume user's taste.

Also, if you think readability is not a taste, and you can make a mostly ideal configuration which can be applied to all the users, why don't you let the browser vendors to do that?

If browsers are shipped with ideal configuration by default, then now the only obstacle to prevent ideal readability is site-prodivded styling.

Actually Safari is trying to do this via Reader button, and shows always great result if it is available.

"why don't you let the browser vendors to do that?"

Opera Mobile does automatic text resizing and wrapping, and it's the reason it's my favourite mobile browser.

Haven't tried Safari.

'The ideal line length for text layout is based on the physiology of the human eye [...] At normal reading distance the arc of the visual field is only a few inches – about the width of a well-designed column of text, or about 12 words per line. Research shows that reading slows and retention rates fall as line length begins to exceed the ideal width, because the reader then needs to use the muscles of the eye and neck to track from the end of one line to the beginning of the next line. If the eye must traverse great distances on the page, the reader is easily lost and must hunt for the beginning of the next line. Quantitative studies show that moderate line lengths significantly increase the legibility of text.'

Web Style Guide – Basic Design Principles for Creating Website Patrick J. Lynch and Sarah Horton 2nd edition, page 97.

Apparently HN style is broken, as your comment is between 22-28 words per line.

Of course it is. HN is known for a lot of good things, but its visual design has certainly never been one of them.

I for one love the simple design.

Well, there are degrees of brokenness. There are compromises both with the spec support for columns and with how you'd manage threaded conversation in that sort of layout.

The real question is why user agents don't set this as default, allowing sites to optionally change it to something else, rather than just presenting paragraph tags as wide as the viewport allows... I don't really think the idea is that the user should have to resize the window. This has been wrong for a long time (even 800 pixels is too wide for most text/standard browser style sheets)...

That's funnny I actually do most of my reading on a screen, with plenty using the full width and I actually find reading articles in newspaper and scientific articles with their tiny columns tedious and annoying. So perhaps these things change...

It's really easy to format the webpage the way you want it. That's what a lot of web designers do wrong; they don't let CSS or whatever do the formatting work, and then the plaintext web page looks like a broken mess.

^ totally agree. I'm a Computer Science student and not a designer at all and I think that has actually helped keep my websites nice and simple:

http://www.danielchatfield.com/articles/gay-marriage/

https://www.volcanicpixels.com/terms

https://www.volcanicpixels.com/ssl/buy

Sometimes keeping things simple isn't possible, when the site isn't as trivial as your examples.

Agreed, additionally its majority that rules.

I agree but it's nothing a bit of max-width wouldn't solve.

It all starts with one style attribute ;)

Your max width may well differ from someone else's.

Oddly enough, I've got a set of stylesheets I've created to deal with effed-up websites. I've also got an "unstyled.css" stylesheet I apply to websites that have no or very minimal styling. Chief among what it does: give me some motherfucking margins, because I just love my motherfucking margins.

A few other bits, but all told, it's pretty damned light (one gratuitous styling effect, but hey, that's me):

    a {
        color: #427fed;
        text-decoration: none;
    }

    a:visited {
        color: #6f32ad;

    }

    a:hover {
        text-decoration: underline;
    }

    a:active {
        background-color: #427fed;
        color: #fffff6;
    }

    body {
        background-color: #fffff6;
        background-image: none;
        color: #440;
        font-family: georgia;
        font-size: 15pt;
        margin: 2em auto;
        max-width: 40em;
        width: auto;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #703820;
        line-height: 1.2em;
    }

    img {
        float: right;
        padding: 10px;
        margin: 20px;
        border: solid 1px #888;
        box-shadow: 6px 10px 8px rgba(0, 0, 0, 0.7);
    }

    p, li, dd, dt, blockquote, span {
        font-size: 15pt;
        line-height: 1.4em;
    }

Lines of text should be as long as they are, and you can scale your view accordingly for comfortable reading.

Make your window narrower. Stop wasting screen space.

Most web designers assume you are browsing full screen. Dumbasses.

Haven't we just established that most web designers are idiots?

I don't know, maybe. Where are we? I was trying to work out some css and now I've lost one of my shoes. I think it has my house keys in it.

I love this negative ending to a negative thread on a negative article.

Well, if most users browse the web in full screen, I guess it's the browser developers that are idiots for not accounting for that with standard style sheets?

It'd be fine to have a "proper" stylesheet and use it only for unstyled html -- and then a "proper" normalized stylesheet used for everything else...

The vast majority of desktop web users will view a site in a window that is maximized. See these articles from 2006 (before mobile browsing took off):

http://mentalized.net/journal/2006/10/24/browser_size_does_m... (this one is the most interesting because its data is collected from a variety of sites)

http://www.baekdal.com/insights/actual-browser-sizes

And this one from 2012:

http://beantin.se/post/32275497175/computer-screens-browser-...

Reply on news.ycombinator.com