Live data from Hacker News

58 bytes of CSS to look great nearly everywhere

gist.github.com

101–110 of 254 posts

Re: 58 bytes of CSS to look great nearly everywhere

#101

Not 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

Re: 58 bytes of CSS to look great nearly everywhere

#102

It 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…

I think this is due to the desire to fall in the approx 40-75 characters per line that are considered ideal (numbers vary depending on the source of the study but broadly fit this definition) for users to read. It is also why some prefer double-columns in academic papers, because each 'column' has closer to ideal lines, rather than have wide margins on the page.

Of course, this looks like wasted space when you have a landscape-oriented monitor... I personally very rarely maximize my browser so that I read in more of a portrait-style mode, regardless of the orientation of my display.

Re: 58 bytes of CSS to look great nearly everywhere

#104

It 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?

Re: 58 bytes of CSS to look great nearly everywhere

#105

What is wrong with browser default styling, and why do browsers ship with something that is wrong?

> What is wrong with browser default styling, and why do browsers ship with something that is wrong?

The problem with browser default styling is that there should be another level: user default styling. I.e., the styling as chosen by the user.

Re: 58 bytes of CSS to look great nearly everywhere

#106

It 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…

We're in the same group if that makes you feel any better. BTW, since you mentioned reader view in Firefox, here's the userContent.css that I've been using for the past few years:

    @-moz-document url-prefix("about:reader") {
        .container{
            max-width:100% !important;
        }
        .toolbar-container{
            display:none !important;
        }
    }

Make sure to set your preferred size/color first.

Re: 58 bytes of CSS to look great nearly everywhere

#107

It 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…

yep. I hate it. I've seen people say this is a result of studies but I've never been able to find the studies that claim this is better. It seems to have been stated in elements of typographic style and taken as truth http://webtypography.net/2.1.2

Re: 58 bytes of CSS to look great nearly everywhere

#108
I 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

Re: 58 bytes of CSS to look great nearly everywhere

#110
post #31

Earlier quoted context omitted.

Here's a literature review on the topic: https://www.researchgate.net/publication/234578707_Optimal_L... . The article content is inaccessible, but from the abstract: > Research has led to recommendations that line length should not exceed about 70 characters per line. The reason behind this finding is that both very short and very long lines slow down reading by interrupting the normal pattern of eye movements and m…

> (up to 10 inches) here on HN in my 16" MBP, 10 inches is ~230 characters

The context from the linked article, which dates to 2006:

> Her results showed that passages formatted in the longest line length (95 characters per line or 10 inches) resulted in the fastest reading speed.

Post reply on HN