Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tags to make HTML work like you expect

blog.jim-nielsen.com

Post reply on HN
Print view View original

161–170 of 248 posts

Re: Tags to make HTML work like you expect

#161

Post by harrall »

notepad0x90 wrote: post #110

I'm not a web developer, so if someone can please enlighten me: Why does this site, and so many "modern" sites like it have it so that the actual content of the site takes up only 20% of my screen? My browser window is 2560x1487. 80% of the screen is blank. I have to zoom in 170% to read the content. With older blogs, I don't have this issue, it just works. Is it on purpose or it is it bad css? Given the title of the…

You'll notice newspapers use columns and do not extend the text all the way left to right either. It's a typographical consideration, for both function and style.

From a functional standpoint: Having to scan your eyes left to right a far distance to read makes it more uncomfortable. Of course, you could debate this and I'm sure there are user preferences, but this is the idea behind limiting the content width.

From a stylistic standpoint: It just looks “bad” if text goes all the way from the left to right because the paragraph looks "too thin" like "not enough volume" and "too much whitespace." It’s about achieving a ratio of background to text that’s visually pleasurable. With really wide widths, paragraphs can end really early on the left, leaving their last lines really “naked” where you see all this whitespace inconsistently following some paragraphs. I can't really explain why this looks bad any further though. It’s kind of like picking colors combinations, the deciding factor isn't any rule: it's just "does it look pretty?"

In the case of the site in question, the content width is really small. However, if you notice, each paragraph has very few words so it may have been tightened up for style reasons. I would have made the same choice.

That said, if you have to zoom in 170% to read the content and everything else is not also tiny on your screen, it may be bad CSS.

Re: Tags to make HTML work like you expect

#162

Post by LegionMammal978 »

9029 wrote: post #137
dinkelberg wrote: post #102

TFA itself has an incorrect DOCTYPE. It’s missing the whitespace between "DOCTYPE" and "html". Also, all spaces between HTML attributes where removed, although the HTML spec says: "If an attribute using the double-quoted attribute syntax is to be followed by another attribute, then there must be ASCII whitespace separating the two." ( https://html.spec.whatwg.org/multipage/syntax.html#attribute... ) I guess the brows…

Maybe a dumb question but I have always wondered, why does the (authoring?) spec not consider e.g. "doctypehtml" as valid HTML if compliant parsers have to support it anyway? Why allow this situation where non-compliant HTML is guaranteed to work anyway on a compliant parser?

It's considered a parse error [0]: it basically says that a parser may reject the document entirely if it occurs, but if it accepts the document, then it must act as if a space is present. In practice, browsers want to ignore all parse errors and accept as many documents as possible.

[0] https://html.spec.whatwg.org/multipage/parsing.html#parse-er...

Re: Tags to make HTML work like you expect

#163

Post by AlienRobot »

9029 wrote: post #137
dinkelberg wrote: post #102

TFA itself has an incorrect DOCTYPE. It’s missing the whitespace between "DOCTYPE" and "html". Also, all spaces between HTML attributes where removed, although the HTML spec says: "If an attribute using the double-quoted attribute syntax is to be followed by another attribute, then there must be ASCII whitespace separating the two." ( https://html.spec.whatwg.org/multipage/syntax.html#attribute... ) I guess the brows…

Maybe a dumb question but I have always wondered, why does the (authoring?) spec not consider e.g. "doctypehtml" as valid HTML if compliant parsers have to support it anyway? Why allow this situation where non-compliant HTML is guaranteed to work anyway on a compliant parser?

Same reason is invalid.

Re: Tags to make HTML work like you expect

#164

Post by AlienRobot »

Menu_Overview wrote: post #115
notepad0x90 wrote: post #110

I'm not a web developer, so if someone can please enlighten me: Why does this site, and so many "modern" sites like it have it so that the actual content of the site takes up only 20% of my screen? My browser window is 2560x1487. 80% of the screen is blank. I have to zoom in 170% to read the content. With older blogs, I don't have this issue, it just works. Is it on purpose or it is it bad css? Given the title of the…

Often times that is to create a comfortable reading width. ( https://ux.stackexchange.com/questions/108801/what-is-the-be... )

I wonder if this research is really valid. It was published 20 years ago, there is nothing in the abstract about arcdegrees and I can't read the full thing, and it's cited with zero consideration for the actual content being presented.

If Wikipedia had 70 characters per line I would never read it.

Re: Tags to make HTML work like you expect

#166

Post by 9029 »

LegionMammal978 wrote: post #162
9029 wrote: post #137

Earlier quoted context omitted.

Maybe a dumb question but I have always wondered, why does the (authoring?) spec not consider e.g. "doctypehtml" as valid HTML if compliant parsers have to support it anyway? Why allow this situation where non-compliant HTML is guaranteed to work anyway on a compliant parser?

It's considered a parse error [0]: it basically says that a parser may reject the document entirely if it occurs, but if it accepts the document, then it must act as if a space is present. In practice, browsers want to ignore all parse errors and accept as many documents as possible. [0] https://html.spec.whatwg.org/multipage/parsing.html#parse-er...

> a parser may reject the document entirely if it occurs

Ah, that's what I was missing. Thanks! The relevant part of the spec:

> user agents, while parsing an HTML document, may abort the parser at the first parse error that they encounter for which they do not wish to apply the rules described in this specification.

(https://html.spec.whatwg.org/multipage/parsing.html#parse-er...)

Re: Tags to make HTML work like you expect

#167

Post by notepad0x90 »

harrall wrote: post #161
notepad0x90 wrote: post #110

I'm not a web developer, so if someone can please enlighten me: Why does this site, and so many "modern" sites like it have it so that the actual content of the site takes up only 20% of my screen? My browser window is 2560x1487. 80% of the screen is blank. I have to zoom in 170% to read the content. With older blogs, I don't have this issue, it just works. Is it on purpose or it is it bad css? Given the title of the…

You'll notice newspapers use columns and do not extend the text all the way left to right either. It's a typographical consideration, for both function and style. From a functional standpoint: Having to scan your eyes left to right a far distance to read makes it more uncomfortable. Of course, you could debate this and I'm sure there are user preferences, but this is the idea behind limiting the content width. From a…

Newspapers have less than 5% margin for whitespace. they're smart enough to have multiple columns. It's also a side-effect of how every line costs money and they need to cramp as much content as possible in one page.

I get not having read all the way to the end and back, I even get having margins, but it should be relative to the screen size. Fixed width is the issue I think. To avoid paragraphs looking too thin, maybe increasing the font relative to the screen size makes sense? I'd think there is a way to specify a reference screen resolution to the browser so that it can auto increase the font sizes and/or adjust the div's width.

Re: Tags to make HTML work like you expect

#168

Post by notepad0x90 »

AlienRobot wrote: post #164
Menu_Overview wrote: post #115

Earlier quoted context omitted.

Often times that is to create a comfortable reading width. ( https://ux.stackexchange.com/questions/108801/what-is-the-be... )

I wonder if this research is really valid. It was published 20 years ago, there is nothing in the abstract about arcdegrees and I can't read the full thing, and it's cited with zero consideration for the actual content being presented. If Wikipedia had 70 characters per line I would never read it.

That's a good point, 2560p wasn't a popular resolution back then. I'm sure people browsing in 4k suffer worse.

Re: Tags to make HTML work like you expect

#169

Post by WorldMaker »

ilaksh wrote: post #19

Anyone else prefer to use web components without bundling? I probably should not admit this, but I have been using Lit Elements with raw JavaScript code. Because I stopped using autocomplete awhile ago. I guess not using TypeScript at this point is basically the equivalent for many people these days of saying that I use punch cards.

I've been leaning that direction more and more every year. ESM loading in browsers is really good at this point (with and without HTTP/2+). Bundle-free living is nice now.

Even frameworks with more dependencies bundling/vendoring just your dependencies at package upgrade time and using an importmap to load them is a good experience.

I'm not giving up Typescript at this point, but Typescript configured to modern `"target"` options where it is doing mostly just type stripping is a good experience, especially in a simple `--watch` loop.

Re: Tags to make HTML work like you expect

#170

Post by dormento »

gs17 wrote: post #107
oskarkk wrote: post #97

Earlier quoted context omitted.

> HN still uses a font-size value that usually renders to 12px by default as well, making it look insanely small on most modern devices, etc. On what devices (or browsers?) it renders "insanely small" for you? CSS pixels are not physical pixels, they're scaled to 1/96th of an inch on desktop computers, for smartphones etc. scaling takes into account the shorter typical distance between your eyes and the screen (to ma…

On my MacBook it's not "insanely small", but I zoom to 120% for a much better experience. I can read it just fine at the default.

On my standard 1080p screen I gotta set it to 200% zoom to be comfortable. Still LOTS of content on the screen and no space wasted.
Post reply on HN