4 ms·

Fun article, but exceptionally difficult to read. I know some people like using plain ol html, but just a few lines of CSS would vastly improve the reading expe

Fun article, but exceptionally difficult to read. I know some people like using plain ol html, but just a few lines of CSS would vastly improve the reading experience. I know its from 2016, but still. Eyes read best when content is a few hundred pixels long. Content should be centered etc. It's pretty terrible as it is

forgotmypw17 5y ago
One of the nice things about HTML/CSS is that there's such a thing as "user styles", which can apply on top (or instead of) the "author styles". Opera pioneered this interface, AFAIK, and even had one-click toggle buttons for both author and user styles (as well as images), but most of today's browsers don't make this functionality transparent and available. I suppose you could do via dev tools? For a simple change like what you're asking, perhaps even changing browser's font settings would suffice?
nmz 5y ago
get stylish then
MonkeyClub 5y ago
Yep it was pretty horrible, so I hit reader mode that narrowed everything down and increased the font size. I find it's quite a bother to have to do all the CSS necessary for good reflow on a number of devices, so I too just have everything just spill to the ends, and just do reader mode on devices. But I don't really know much CSS apart from the really basic stuff, and haven't ever sat down to see how it would be done.
- bern4444 5y ago
  Yeah, for a site like this, it could literally be just adding max-width: 700px; margin: 0 auto; This would make it look great on pretty much all screens.
  - bzbarsky 5y ago
    A 700px max-width would actually make it quite annoying to read for me (as a lot of content on the web is, unless I switch to reader mode)....
    - bern4444 5y ago
      Why? Is it not wide enough for you? or something else?
      - bzbarsky 5y ago
        Yes, it's not wide enough. Just holding up a book to my screen, 700px is about the width of the text in a mass-market paperback. But the reading distance for a screen is much larger than the reading distance for a book, of course. And hardcovers or trade paperbacks have wider text columns than that, of obviously, and are generally somewhat nicer to read than mass-market paperbacks... though also often get held at slightly larger reading distances.
        bern4444 5y ago
        Right. You hold a book closer to your eyes though than your screen. Both have about the same line length, as you point out, but the book's font is smaller. The website font is much larger - to make up for the greater distance between the screen and your eyes. I think 700px would be wide enough, 800px would also work. From what I've read, going wider than about this at around a 14px size font and it becomes increasingly difficult for the eye to track between lines. On a phone, a max with of 700 or 800 px obviously wouldn't apply since the phone screen is smaller. On this site, I usually zoom in to 150% to 200% on my computer to make the font size large enough to comfortably read.
        bzbarsky 5y ago
        > but the book's font is smaller. If the book's font is smaller, but the lines are the same width, that means more words per line in the book, yes? And each line is taking a larger fraction of the visual field, since the book is closer to my eyes. Basically, if we assume books are somewhat optimized for ease of reading (and to a large extent they are), websites should be aiming for the same angular sizes as books. The reading distance is larger, so the physical sizes should be larger: larger fonts and wider lines...
ivanalejandro0 5y ago
If you use Firefox, there's the "reader view" feature that kinds of do what you want for a great number of websites. See: https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages https://support.mozilla.org/en-US/kb/firefox-reader-view-clu...

forgotmypw17 5y ago

One of the nice things about HTML/CSS is that there's such a thing as "user styles", which can apply on top (or instead of) the "author styles". Opera pioneered this interface, AFAIK, and even had one-click toggle buttons for both author and user styles (as well as images), but most of today's browsers don't make this functionality transparent and available. I suppose you could do via dev tools? For a simple change like what you're asking, perhaps even changing browser's font settings would suffice?

nmz 5y ago

get stylish then

MonkeyClub 5y ago

Yep it was pretty horrible, so I hit reader mode that narrowed everything down and increased the font size. I find it's quite a bother to have to do all the CSS necessary for good reflow on a number of devices, so I too just have everything just spill to the ends, and just do reader mode on devices. But I don't really know much CSS apart from the really basic stuff, and haven't ever sat down to see how it would be done.

bern4444 5y ago
Yeah, for a site like this, it could literally be just adding max-width: 700px; margin: 0 auto; This would make it look great on pretty much all screens.
- bzbarsky 5y ago
  A 700px max-width would actually make it quite annoying to read for me (as a lot of content on the web is, unless I switch to reader mode)....
  - bern4444 5y ago
    Why? Is it not wide enough for you? or something else?
    - bzbarsky 5y ago
      Yes, it's not wide enough. Just holding up a book to my screen, 700px is about the width of the text in a mass-market paperback. But the reading distance for a screen is much larger than the reading distance for a book, of course. And hardcovers or trade paperbacks have wider text columns than that, of obviously, and are generally somewhat nicer to read than mass-market paperbacks... though also often get held at slightly larger reading distances.
      - bern4444 5y ago
        Right. You hold a book closer to your eyes though than your screen. Both have about the same line length, as you point out, but the book's font is smaller. The website font is much larger - to make up for the greater distance between the screen and your eyes. I think 700px would be wide enough, 800px would also work. From what I've read, going wider than about this at around a 14px size font and it becomes increasingly difficult for the eye to track between lines. On a phone, a max with of 700 or 800 px obviously wouldn't apply since the phone screen is smaller. On this site, I usually zoom in to 150% to 200% on my computer to make the font size large enough to comfortably read.
        bzbarsky 5y ago
        > but the book's font is smaller. If the book's font is smaller, but the lines are the same width, that means more words per line in the book, yes? And each line is taking a larger fraction of the visual field, since the book is closer to my eyes. Basically, if we assume books are somewhat optimized for ease of reading (and to a large extent they are), websites should be aiming for the same angular sizes as books. The reading distance is larger, so the physical sizes should be larger: larger fonts and wider lines...

ivanalejandro0 5y ago

If you use Firefox, there's the "reader view" feature that kinds of do what you want for a great number of websites. See: https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages https://support.mozilla.org/en-US/kb/firefox-reader-view-clu...