The real problem is that the browser won't let you control the width of a tab without resizing the browser window, which is a bit fiddly, exposes stuff behind the window, and makes you resize the window again and again when moving between tabs.

If you could easily shrink a tab, I would prefer websites to not limit text width. Since you can't, I sorta prefer them to do it, though it's much worse than the user controlling it in a nice per tab way

(1) reader mode (made for that purpose)

(2) user stylesheets (permanent solution, but you could have multiple and use an extension to enable disable different widths)

(3) responsive mode (in dev tools, most flexible, but most cumbersome to reach)

(4) Other extensions

There are easy ways to resize the viewport, so the premise is false.

you can "pop out" a single tab to a new window.

You could use the browser's dev tools to emulate a narrower viewport.

It should also be almost trivial to create a browser extension for this, if it doesn't even exist yet.

I use firefox's sidebar (vertical tabs) which makes resizing quite natural imo

I use the developer tools right panel for that.

Right, if you have wide columns then you have to move eyes BOTH from left to right AND when you reach the end of the line you have to move them back to left AND down to next line. Whereas if the line is narrow enough to read without moving eyes horizontally you only need to move your eyes down after each line.

Right, there is a reason why print magazines use columns even for long multi-page articles. With long lines, readers tend to get lost when navigating from the end of one line to the start of the next line, and the reading experience suffers. You can help this somehow by increasing spacing between the lines, but the general recommendation is to have 45-75 characters per line.

This bookmarklet to shrink the width has been in my toolbox for a long time: javascript:(function(){%20var%20myBody%20=%20document.getElementsByTagName('body')[0];%20var%20myBodyWidth%20=%20myBody.style.width;%20if%20(!myBodyWidth%20||%20myBodyWidth%20===%20'auto'%20||%20myBodyWidth%20===%20'inherit')%20{%20myBody.style.width%20=%20'1200px';%20myBody.style.marginLeft%20=%20'auto';%20myBody.style.marginRight%20=%20'auto';%20myBody.style.position%20=%20'relative';%20myBody.style.cssFloat%20=%20'none';%20}%20else%20{%20myBody.style.width%20=%20'auto';%20myBody.style.position%20=%20'static';%20}%20})();

Thanks that's an interesting trick.

This is beautified if somebody wants to see how it is done.

  function() {
    var myBody = document.getElementsByTagName('body')[0];
    var myBodyWidth = myBody.style.width;
    if (!myBodyWidth || myBodyWidth === 'auto' || myBodyWidth === 'inherit') {
        myBody.style.width = '1200px';
        myBody.style.marginLeft = 'auto';
        myBody.style.marginRight = 'auto';
        myBody.style.position = 'relative';
        myBody.style.cssFloat = 'none';
    } else {
        myBody.style.width = 'auto';
        myBody.style.position = 'static';
    }
  }

This summarizes the web ghetto pretty neatly.