Quoted post unavailable.
Really? You created a new account to make this one comment?
No post body was provided.
58 bytes of CSS to look great nearly everywhere
241–250 of 254 posts
Re: 58 bytes of CSS to look great nearly everywhere
#242Earlier quoted context omitted.
I honestly prefer the default version. Less scrolling to do.
That's the wrong metric. Scrolling is less straining than moving eyes (or even the head in this case). People complain a lot about "wasted screen estate" but the first version that "doesn't waste blank space" is completely unreadable to me on desktop, I want to stop reading after the first line.
That website really grinds my gears. He's the equivalent of an HN influencer I guess, because I seem to come across him every three days. Like the Stratecherry guy. And it's so naff. It's clearly designed to look like that on purpose and it's kind of a thumbing-your-nose at your audience thing. "My words are so important that you can get fucked if you want max-width". It REALLY annoys me way more than it should. After all, it's just another dude on the internet.
Re: 58 bytes of CSS to look great nearly everywhere
#243Earlier quoted context omitted.
> I wonder if everyone has a different optimum here based on different eyesight, screen size, and usage patterns. I always have a slightly different zoom on every website I visit. I would think so. And because of that, accessibility is an essential topic. Luckily, this snippet will automatically follow your zoom level and/or font size settings.
But it would be better still if browsers offered an opt-in modern default style, to relieve us developers of having to make assumptions about the user's visual needs, which should be the domain of the user agent.
Firefox had that for a long time, hidden in a menu, but discoverable eventually. It also used to have a menu for Alternate Styles when a webpage included named LINKs to alternate styles (allowing pages to have a heavy, preferred default but offer the user other options, without needing to add a "theme picker" in the HTML somewhere).
Outside of dedicated "Reader Views" it seems like we've given up on the idea that might be something the browser should do. (Which, I appreciate the "Reader View" as an easier to discover way to do this, even if I think moving it into a "modal" with its own liminal space continues the narrative of the browser moving away from being a "user agent" to being an "application runtime".)
Re: 58 bytes of CSS to look great nearly everywhere
#244Earlier quoted context omitted.
Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns
Yes, they've been around forever, but browsers have never properly supported column breaks and orphan control. This tends to make any content with CSS columns unsightly, which is why no one uses them.
One browser did have amazing column break/orphan control: the IE11/Spartan (Edge Classic) renderer. It's amazing/sad how much the web regressed in CSS multi-column support rather than improved since then.
(Some group or groups at Microsoft during Windows 8 development must have passionately loved multi-column text and proper "newspaper inspired" typography and wanted to see it succeed, and they did not seem to survive the backlash against Windows 8, sadly.)
Re: 58 bytes of CSS to look great nearly everywhere
#245Not explicitly mentioned here, but worth bringing up: Text width should always be constrained to a maximum width to optimize for human reading. Every book ever printed has text with set within the same range for a reason. Full width text guarantees most users will have a poor reading experience.
Newspapers use columns for the same reason, to not get too wide lines. Unfortunately I don't think I've ever seen a site use columns, even though CSS supports it. https://developer.mozilla.org/en-US/docs/Web/CSS/columns
I've used it on my personal blog for many years at this point, because it is my personal blog and I can be weird with it, including using horizontal scrolling by default. https://blog.worldmaker.net
I really love multi-column, and appreciate horizontal scrolling. I've got an ultrawide screen, and I love that my site is one of the very few that makes an interesting use of a screen that wide. (There are articles on my blog you can easily read with no scrolling at all.)
I've gotten so many complaints over the years about my use of multi-column, including here on HN. It seems a very polarizing thing, even as I wish it were more common. The one time one of my posts trended it got a lot of hate about my blog CSS. That was a revision ago, though. I've made a bunch of adjustments to it since then, because I did read all of them, and tried to find some tweaks (including a few bits of JS) to smooth the experience a bit.
Re: 58 bytes of CSS to look great nearly everywhere
#246Earlier quoted context omitted.
Don't confuse constraining an entire website's width for constraining the text reading width. You can gracefully have maximum reading width text columns with other content to the left and right of it to maximize real estate. Also, don't ask users to resize their browsers to accomodate for a site's poor UX. That's called "blaming the user."
As a user, I expect to use my browser window to resize the content in my browser. Please don’t second-guess my preference. 9X% of web sites don’t do anything sophisticated, with columns or otherwise. They hard limit the content width regardless of the user’s window size, resulting in a tiny sliver of text.
Why do you think constraining the reading width of a text column means it won't change as you resize your browser?
Don't confuse your preferences with how far apart human eyes are. Your preference isn't relevant here.
Re: 58 bytes of CSS to look great nearly everywhere
#247I think this does not work well for mobile devices. Spacing and the font size is too large. Hence, a lot of screen space is wasted and the user has to scroll more. Larger font sizes on mobile are usually not a good idea as the device tends to be closer to your eyes anyway. A snippet that could work better in my opinion is the following: html { max-width: 70ch; /* larger spacing on larger screens, very small spacing o…
I don't get this: > font-family: system-ui Why render texts with the font that the reader has selected for a different function, ignoring the one that she has selected for texts?
You are correct not to get it. system-ui has been abused from the very start as a proxy for prettier default fonts, but it has semantics, and those semantics make it unsuitable for use as a body font. https://infinnie.github.io/blog/2017/systemui.html gives a simple demonstration of how it can go wrong.
So stick with something like serif or sans-serif.
Re: 58 bytes of CSS to look great nearly everywhere
#248Re: 58 bytes of CSS to look great nearly everywhere
#249Earlier quoted context omitted.
I wonder if everyone has a different optimum here based on different eyesight, screen size, and usage patterns. I always have a slightly different zoom on every website I visit. With this one I tend to agree, I can't see enough text at once and the margins seem a bit wide.
Yeah, the zoom, that almost needs to be customized per website, sigh. But one of the worst misfeatures for old (and maybe not so old) eyes, is the gray text on some "pastel" background. Contrast helps readability (as does a carefully chosen font), but "modern" designers seem to think contrast is bad or outdated or whatever.
> but "modern" designers seem to think contrast is bad or outdated or whatever.
I think much more reasonable is the assumption that many designers have Macs with good monitors and there you can still read it well.
Whereas most people have old or poorly color calibrated monitors where you only get a grey goo.
Re: 58 bytes of CSS to look great nearly everywhere
#250Earlier quoted context omitted.
that's pretty fundamentally incompatible with the scrolling model of the web It isn’t though. If browsers supported overflowing text into a “next” container (defined via hierarchy, selectors, whatever), designers could just design repeating pages of layouts like they usually do with full-height marketing stripes.
I'm not sure what you mean. The only way I can think it would feasibly work is if you have multiple columns with the same content, but offset by the window height. That wouldn't require any container linking and would allow you to scroll normally, but I also think it would be pretty weird. Something like this: https://jsfiddle.net/n87hkdf4/ I think anything else would require tedious scrolling up and down all the tim…
That offset would cut lines in half most of the times. Here is a visual diagram of one of examples of such layout:
0vh
margin
column 1 column 2
text text
text text
margin
100vh
margin
column 3 …
…
200vh