On: 58 bytes of CSS to look great nearly everywhere

[TheWoodsy]

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 reader button in Firefox or squish my browser window. Why? Shakes fist at sky

[Accacin → TheWoodsy]

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?

[wruza → Accacin]

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 <viewport sizeable style=“width:n”> 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.

[boardwaalk → wruza]

> There’s no easy way to organize lots of windows

Sure there is: Tiling window managers. Available for every desktop OS in some form or another. I assume people who are power users enough to have large, multiple monitors can help themselves.

[Arnavion → Accacin]

If resizing the browser is an acceptable solution then not setting the max-width already works. Setting the max-width only makes it worse for people who want the space to be filled regardless of their browser size.

[TheWoodsy → Accacin]

Well, OK sure. I'm not the most effective communicator but in the end I'm still genuinely 'not getting it' though.

In my image you can see that either portrait or landscape orientation, there is considerable 'dead' area (edit: either side), by default, even if the text was many paragraphs long.

The usual solution is to smash "ctrl numpad +" four times til things fit perfectly at (usually) 150%. It's actually uncanny how I'll do this without even thinking while browsing.

[zahllos → TheWoodsy]

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.

[IshKebab → TheWoodsy]

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-based media like physical newspapers and PDF papers.

[wruza → IshKebab]

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.

[IshKebab → wruza]

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 time or worse - horizontal scrolling!

[wruza → IshKebab]

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

Content flows naturally through column 1, 2, 3 and so on. No lines are cut in half horizontally (in a sense of overflow-y). When a window height resizes, content reflows accordingly - no scrolling required to read a full page at any window height.

[Arnavion → IshKebab]

>What's your solution?

I don't need solutions to problems I don't have.

If people find it hard to read long lines on my website they can make their browser window thinner. I don't feel compelled to impose my reading abilities (or lack thereof) on them.

[mikl → TheWoodsy]

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.

[ryan-duve → TheWoodsy]

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.

[croes → TheWoodsy]

Even worse when the text has things like code examples that aren't completely readable without horizontal scrolling.

[demindiro → TheWoodsy]

I limit the width on my website because I find moving my eyes constantly from left to right annoying. For me it's harder to find the beginning of the next line if lines are very long.

Besides, the other half of my monitor is usually taken up by another window or two.

[hoseja → TheWoodsy]

Thank you! This is a particularly annoying design trend. I regularly hunt in the dev console for the offending max-width element and nerf it with extreme prejudice.

[Arnavion → TheWoodsy]

For real. I have a dozen style overrides for websites that are just variations of `max-width: none !important` to make them actually usable.

[hisyam → TheWoodsy]

I use a browser extension called Window Resizer where I create 2 resolution profiles (1440x1080 and 1600x1080) and then use CTRL+1 and CTRL+2 keyboard shortcuts to alternate between them.

[jccalhoun → TheWoodsy]

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

[iLoveOncall → jccalhoun]

Well you must have not searched very hard if you didn't find studies, because it took me a grand total of 3 minutes: https://www.semanticscholar.org/paper/Optimal-Line-Length-in...

There are many citations that lead to other studies on the same topic.

[jccalhoun → iLoveOncall]

Thanks.