Hacker News Reader

Comment by lelanthran | Hacker News Reader

This article is basically unreadable for me 48 y/o on desktop). In the dev tools I added the following to the body to make it readable:

    font-size: 18px;
    line-height: 1.5em;
    max-width: 38rem;

Now look how readable (and beautiful) it is. I read a lot of Dan Luu's posts, and each time I have to do this sort of thing to make it readable.

Seriously, techies, it's an extra 64 Bytes to make your page more readable.

View on HN

I'm 53 and I'm at least five years behind getting my specs sorted out - they are currently perched right on the end of my nose now and I have to get the angle right sometimes (astigmatism).

That page is nearly fine for me but I just hit CRTL + to scale up. That works for me.

That page is pure text with no or at least minimal fiddling. You have your solution for your use case and I have mine. A blind reader will also have their solution, so they can even access it. Thanks to the simplicity of the source: all solutions to accessibility are also going to be reasonably simple.

I think that Dan understands how to communicate effectively - keep it simple and don't assume that eyes will read your words. You can trivially (and you do) fiddle with the presentation yourself for your own purposes.

I think that if you don't like the presentation of something like this then you could reformat it yourself, prior to engagement. Dan has kindly provided his message as a simple text stream that can be trivially fiddled with.

> That page is nearly fine for me but I just hit CRTL + to scale up. That works for me.

How do you do CTRL++ on a mobile phone?

Click on reader view. Then you can customise reader view from the menu and set it to how you want it. Then every time you click on reader view you can read in the font and size that works for you.

Pinch to zoom, which since basically pinch to zoom was invented should reflow elements.

Pinch to zoom magnifies part of the page. That’s less helpful for text because you have to scroll the smaller viewport to read a complete line of text.

On iOS, there’s a text scale button in the URL bar which does the trick.

Pass the page through a screen reader and listen to the ensuing podcast.

Try using some imagination!

I assume you use some sort of gesture. Hit F1 to find out how to do it.

> How do you do CTRL++ on a mobile phone?

No idea but you seem to have managed it 8)

In Brave you can do Accessibility - Text Scaling

I think your mods are sensible, however if Dan Luu added those CSS rules himself, there would be comments on here lamenting the low density and "excess whitespace". Luu's audience, on the whole, probably prefers the relatively unstyled approach.

I disagree. The user can change the window size, font size, colours, etc according to their own preferences.

> I read a lot of Dan Luu's posts, and each time I have to do this sort of thing to make it readable.

You shouldn't have to. You should be allowed to add a CSS file which can apply to multiple files, and then use that, instead of having to do it for each file individually.

You can change your browser's default font size if you find it too small. It's in Firefox's main settings page. Websites shouldn't force "font-size: 18px;" because it then makes the font smaller for users who picked a larger font in their browser.

I agree that they should add some minimal CSS. But using your browser's Reader View also works, a click rather than multiple steps in DevTools.

Funnily enough, Dan calls out the differences of opinion of the styling of his site starting at this paragraph:

> Just as an aside, something I've found funny for a long time is that I get quite a bit of hate mail about the styling on this page (and a similar volume of appreciation mail). …

I just activate reader mode on his pages, works great. (Not disagreeing with you, just stating another workaround)

Also wish his pages had dates on them (one or both of first posted / last updated) AFAIK he intentionally leaves them out, I don't get why.

> AFAIK he intentionally leaves them out, I don't get why.

Some people like to brag about the timelessness of their articles [1], and that might be one reason. (I personally don't fully agree though, even the linked original WikiWikiWeb page has a last edited date.)

[1] https://wiki.c2.com/?WikiNow

The first time I saw this blog posted on HN I wondered how it could possibly be popular with such horrendous layout.

The conclusion I came to is that the audience is very tech-savvy and is used to activating Reader Mode when they encounter pages like this.

It's more of a hipster thing imo. For some people since it's minimalist and looks "old" , it must be good. Like I get keeping it simple but man it's CSS..

Yep, exactly. It's fashion. FOUC-chic.

Dan’s site has been like this for over a decade. If it’s a fashion, then he’s one of the creators of it.

Brutalist web design has been a thing for a while: https://www.washingtonpost.com/news/the-intersect/wp/2016/05...

Some of it can be appealing, when basic ergonomic needs are met (readable text size and line length, adequate margins, and so forth). Most is just brutally pretentious, IMO.

Actually when I hit pages like this, I use the increase font size buttons. I tend to do this on phones too, especially. Yes, reader mode is also an option, but just bumping up the font size works too. You could also go back to the days when we had 800x600 monitors and 16px tended to be just the right size for that. ;-)

I went with the other techie solution: resizing my browser window.

Since I have a ton of tabs open and jump between them, this ends up not being a solution I use anymore.

How do you do that on mobile?

Who read article like this on mobile? In a pinch, I'd just activate Reader Mode (Safari, iOS), or more likely save it for reading on a bigger screen (tablet, laptop,…)

> Who read article like this on mobile?

The irony of this on an article about how developers ignore users on low-performance mobile devices

Read it on iOS Safari, without reader mode. Worked great.

Only thing that annoyed me is that there are very lengthy appendices. Thus the scroll bar suggests the main article is much longer than it actually is.

I just read it on Firefox mobile without reader mode.

Its already perfectly readable on mobile either vertically or horizontally (a rare affordance these days)

Might be for you, but the tiny text and cramped line height makes it painful for me

Pretty sure the text size is likely to be marginal from an accessibility PoV, and the line length doesn’t aid readability

This page doesn’t specify _any_ font size. It relies on your browser to choose an appropriate size instead. If the text is too small for you to read, then your browser settings for default font size are wrong.

Firefox on Android has a button to activate Reader Mode right in the URL bar.

Flip the phone into portrait mode.

The text fills the entire screen on mobile. That's a lot better than reading something where there's 50% of whitespace.

Or better yet a postage stamp of text between two ad players and a header and footer banner

It’s pretty terrible on my phone too. Almost no margins and small font. Thankfully Reader Mode works in Safari, which fixes everything.

Then adjust your browser settings to your preference, because that certainly isn't mine either.

I've had to remove "max-width"'s from a ton of sites using my filtering proxy. My window is this big, I expect your content to fill it!

I'd prefer to see the grey text trend die honestly. I think my number one style-rewrite is just setting `font-color: black` on things.

> In the dev tools I added the following to the body to make it readable

For cases when you don't agree with styles there is Reader Mode. Your way works also, but Reader Mode just simplier, it is just one click away.

True, although not all browsers have Reader Mode. Chrome didn't have it until last year, and the version they built is a sidebar, unlike most Reader Modes. This is probably because they want to make sure ads are shown alongside the Reader Mode.

In reader mode the colors in the table disappear. Ironical the author does style that.

Why don’t you just change your browser’s default font size?

> max-width: 38rem; Now look how readable (and beautiful) it is.

How is it readable when you're limiting text width and not taking advantage of the whole screen you paid for?

[Turning 48 next month and wearing glasses.]

FYI the optimal line length is 50-75 characters and that has been the standard for text since the type writers. You don't want to move your neck when you read a single line that's kinda silly.

If you have to move your head when reading text in your web browser, then your web browser’s window is too wide. Narrow it until you are comfortable, but don’t try to impose your limitations on other people.

> that has been the standard for text since the type writers

I have a feeling it was the standard because they used the minimum font size to make the letters readable, and that's how much it fit on the physical page width. Which was standardized before typewriters for unknown historical reasons?

> You don't want to move your neck when you read a single line that's kinda silly.

I don't have to move my neck to read the article spread across the full width of my monitor. On 13" laptop or 24" desktops. Are you using a 21:9 utrawide?

It's been this way forever because it's not particularly difficult science and is extremely easy to test for so there are probably thousands of papers covering this. Here's a good summary by Baymard Institute[1].

Also WCAG recommends line length set to <80 characters too [2]. I'm not sure what else could make this more convincing or official.

1 - https://baymard.com/blog/line-length-readability

2 - https://www.w3.org/WAI/WCAG21/Understanding/visual-presentat...

> Also WCAG recommends

"recommends". Want to deny me the option of longer lines?

Just like lelanthra currently applies custom CSS `body { max-width: 38rem; }` to this page, if the page had that maximum width set by default, you would equally have the ability to apply the CSS `body { max-width: unset; }` to the page. So you would not be denied the option of longer lines.

If you can't read font-size: 14px, you got your resolution/scaling/screen size wrong. The default text size is similar to the standard text size of OS UI controls. If you can't read them, I'd suggest to reconfigure your setup: change resolution, change scaling, or configure the default zoom level.

Do you have any idea of the layers of tooling you must use these days to produce those 64 bytes, and how each of those layers change and remove was was fed from all the other layers? To get exactly those bytes out the other end of the tools would be a herculean effort.

Because we can’t just go around trying to understand basic web-based development without the frameworks … can we?

Reply on news.ycombinator.com