I just love this. I still don't get it how in this year, something like wikipedia, and newspapers in a 4k/1440p monitor are a pain to read. I get it, mobile first it's a thing, but with something as simple as this your readers will have a great time.
58 bytes of CSS to look great nearly everywhere
161–170 of 254 posts
Re: 58 bytes of CSS to look great nearly everywhere
#162Not 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.
I don't like that. I can adjust the full text width by adjusting my window but if have a big wide screen and you limit it, then I'm wasting a lot of what I can see. Give me customization, not "alleged optimization" that turns out not to be so
paragraphs are less readable past 90-100 characters width
Re: 58 bytes of CSS to look great nearly everywhere
#163It seems like I'm permanently in some sort of dystopian nightmare 'unpopular opinion' group where wasting two thirds of my monitors useful space is the right way about doing things. I have monitors either side of my primary in portrait mode specifically for looking at a bunch of code/text and it still wastes at least half of the useful display area. https://i.imgur.com/Qk7fM35.png If I wanted this, I'd press the read…
But, you're the one wasting it, right? You have a huge monitor with one window open. I use a WM and very rarely have one window on a whole screen, because that would be a waste of screen. If that text was full width along your screen you'd be wasting vertical screen space instead. Will you ask them to write more to fill your screen up?
There’s no easy way to organize lots of windows, and there is no way your approach would work nice with all web apps, sites and articles in different tabs of the same window.
What would be nice is a special element so a user could either enjoy a default width or drag one side of it to resize its margin at both sides, without resizing a window. Or, instead of an element it could be purely a browser viewport-resize feature, like they do for textareas.
Meta: it’s really frustrating that every time an argument about web ui starts, nobody thinks of how to actually make it better and just holds on some particular use case or preference.
Re: 58 bytes of CSS to look great nearly everywhere
#164font-family: Georgia;
Re: 58 bytes of CSS to look great nearly everywhere
#165The original page seems to be gone from the web, but here's an archive of it: http://web.archive.org/web/20210318102514/https://jrl.ninja/... . That shows the described CSS in practice.
there's a lot of studies about optimal typography for readability in terms of fonts and characters per line etc.
Having dead space on the side is kind of a different problem, more on the lines of the appropriate default settings of the application (or system)
Re: 58 bytes of CSS to look great nearly everywhere
#166It seems like I'm permanently in some sort of dystopian nightmare 'unpopular opinion' group where wasting two thirds of my monitors useful space is the right way about doing things. I have monitors either side of my primary in portrait mode specifically for looking at a bunch of code/text and it still wastes at least half of the useful display area. https://i.imgur.com/Qk7fM35.png If I wanted this, I'd press the read…
Because reading paragraphs of text with extremely long lines is really annoying. If the lines get too long it makes it hard to subconsciously find the next line when you scan back. What's your solution? The only other option I can think of is multi-column newspaper style, but that's pretty fundamentally incompatible with the scrolling model of the web. That's probably why you only see multi-column formats in page-bas…
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.
Re: 58 bytes of CSS to look great nearly everywhere
#167Should you take this sort of advice from someone using block quotes for explanatory sections?
That oddity aside, seems the explanation didn't start 101 enough for me - I've not come across `main` before! Though it's not at all new: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma...
Re: 58 bytes of CSS to look great nearly everywhere
#168It seems like I'm permanently in some sort of dystopian nightmare 'unpopular opinion' group where wasting two thirds of my monitors useful space is the right way about doing things. I have monitors either side of my primary in portrait mode specifically for looking at a bunch of code/text and it still wastes at least half of the useful display area. https://i.imgur.com/Qk7fM35.png If I wanted this, I'd press the read…
Why? Because so many users just run the browser in full screen mode because they don’t how or simply can’t be bothered to manage windows, not because they actually want their screen filled edge to edge with text.
So because long lines are hard to read, line length is clamped to at least provide a decent experience to all those users.
Re: 58 bytes of CSS to look great nearly everywhere
#169I wrote my version here last year: https://www.swyx.io/css-100-bytes html { max-width: 70ch; padding: 3em 1em; margin: auto; line-height: 1.75; font-size: 1.25em; } if you have 100 more to spare: h1,h2,h3,h4,h5,h6 { margin: 3em 0 1em; } p,ul,ol { margin-bottom: 2em; color: #1d1d1d; font-family: sans-serif; } explanation in the blogpost
Element-based selectors, setting the root font-size, mixed units, text color with no background color...I guess the assumption is that you won't add ANY other styling? Big headaches down the road if you do.
well yeah thats the gimmick with these things, ultra minimalist drop in css. its not like its hard to modify later on
Re: 58 bytes of CSS to look great nearly everywhere
#170Earlier quoted context omitted.
Default styling looks terrible and is hard to read. Humans are good at reading columns at around roughly 80 characters, while browsers default to filling the whole width of the screen with text, resulting in a column that's hundreds of characters wide. Text also gets easier to read when more spaced out; the default line height makes the text too close together. Browsers still ship the bad defaults because changing de…
> Humans are good at reading columns at around roughly 80 characters Depends. The reason why it may seem better to have narrow column is so you can skip ahead more easily and thus read faster (reason why newspaper divide an article into columns). Otherwise it doesn't make difference. To me it's absurd that this day the trend is to have wide screen displays (16:9 but nowadays even 21:9 is common) and then all the text…
The problem with your preferred solution is that it requires changing the window width for each web page. My web IRC client requires a somewhat wide window, since it has a sidebars of channels on the left and a sidebar of users on the right, both of which provide utility and I don't want to hide. Reddit is unreadable on narrow screens. But blogs would need an 80 column window (I.e 1/4 the width of the screen) to be comfortable, unless the blog has some sidebar which makes that too narrow. I don't know about you, but I switch between tabs frequently, and I'm extremely happy that I don't have to resize my browser for every tab switch.
I keep my browser window maximised (usually on a secondary screen). I like that all web pages are more or less readable in that configuration.