Addon/bookmarklet/extension to make websites use full window

[slickrcbd]

I get that it's trendy to make super wide margins on pages. Just like that accursed light to medium grey on white text is popular (thank goodness for "Color Changer").
However, I'm a bit old school in that I prefer to have the text fill up the entire window. If I want narrower text, I'll resize the window to make it narrow and expect the text to rewrap.
I know that on mobile horizontal scrolling is all the rage, but I hate that too.

Is there any extension that will take a website like imdb.com, GoG's forums, and countless others that put these super wide margins and make the page fill the whole screen?

Again, I'm a bit old school, so maybe "margin" is not the right word. Back when I was in school we called blank space on the edges of a page "margins" so that's the term I'm using.

There used to be an extension called "Dr. Body Narrow" designed to narrow web pages, but it could be used to do the opposite and widen them to whatever your screen with was if you set it. However it was never updated after the transition to web extensions and thus doesn't work with modern Firefox. Is there anything like that these days?

[morat]

extension called "Dr. Body Narrow" designed to narrow web pages

I peeked at the source in the .xpi file. It's a simple addon.

Dr. Body Narrow
http://www.softsea.com/review/Dr-Body-Narrow.html

I can create a toggling bookmarklet based on the addon.

* Set page width to 960 pixels
* Align page left

Code: Select all

javascript:(function(){
  var element = document.getElementById("setPageWidth960alignPageLeft");
  if (element) {
    element.parentNode.removeChild(element);
  } else {
    var style = document.createElement("style");
    style.type = "text/css";
    style.id = "setPageWidth960alignPageLeft";
    style.textContent = [
      "body { width: 960px !important; float: left !important; margin: auto !important; }",
    ].join("\n");
    if (document.head) {
      document.head.appendChild(style);
    } else {
      document.documentElement.appendChild(style);
    }
  }
})();

Bookmarklet Builder
http://subsimple.com/bookmarklets/jsbuilder.htm

Test page
http://www.imdb.com/

[slickrcbd]

It seems it works for narrowing (what it was intended to do), but it failed to widen the GoG forum, which I happened to have open in another tab.
Any suggestions on using the full size of the window for sites like this?
https://www.gog.com/forum/general

[morat]

The GoG forum uses a width property on almost every div. Try resetting the width property to the default value.

Code: Select all

javascript:(function(){
  var element = document.getElementById("cowabunga");
  if (element) {
    element.parentNode.removeChild(element);
  } else {
    var style = document.createElement("style");
    style.type = "text/css";
    style.id = "cowabunga";
    style.textContent = [
      "div { width: auto !important; min-width: 0 !important; }",
    ].join("\n");
    if (document.head) {
      document.head.appendChild(style);
    } else {
      document.documentElement.appendChild(style);
    }
  }
})();

CSS Reference
http://www.w3schools.com/cssref/pr_dim_width.php
http://www.w3schools.com/cssref/pr_dim_min-width.php

There may not be a simple style that works for a particular website.

It's not possible to create a complex style that works for every website.

[slickrcbd]

Does this need to be taylored for every website? I was just looking into something because I'm suddenly locked out of one of my Google accounts which keeps demanding my cell phone number that I do not want associated with it. I have a second Google account for my cell phone.
Anyways, while doing the research I kept finding web pages like this one
https://www.infoworld.com/article/28540 ... -give.html
or this one
https://www.vox.com/recode/23604327/wha ... rity-risks
that do not use the full width of the monitor.
If I wanted narrow text, I'd "restore" the window instead of maximizing it.

Didn't find much about what I was actually looking for, and stuff like this is what you get for just opening the first ten matches into tabs and looking at the resulting articles.

Anyways, the point is I'm looking for something to make websites like that use the whole page. I know it's trendy, and those margins aren't that bad compared to some others that only use 1/4 of the screen, but I still find it annoying.
What happened to resizing the window if the user preferred a narrower text field anyways? Isn't that what it's for?

[morat]

Does this need to be taylored for every website?

A simple style may work for multiple websites. The following toggling bookmarklet works with the imdb, infoworld and vox websites. However, that bookmarklet may not work on some pages of those websites.

Code: Select all

javascript:(function(){
  var element = document.getElementById("cowabunga");
  if (element) {
    element.parentNode.removeChild(element);
  } else {
    var style = document.createElement("style");
    style.type = "text/css";
    style.id = "cowabunga";
    style.textContent = [
      "* { max-width: none !important; }",
    ].join("\n");
    if (document.head) {
      document.head.appendChild(style);
    } else {
      document.documentElement.appendChild(style);
    }
  }
})();

Test pages
http://www.imdb.com/ (succeeds)
http://www.imdb.com/title/tt0087182/ (succeeds)
http://www.imdb.com/pressroom/ (fails)

...

There are readability addons and bookmarklets available to improve the readability of web articles.

AMO search results
http://addons.mozilla.org/firefox/search/?q=Readability
http://addons.mozilla.org/firefox/search/?q=Reader

Readability bookmarklets
http://landerlyoung.github.io/assets/st ... ity-0.5.1/
http://brettterpstra.com/share/readability2.html

I changed the protocol to "https:" in the bookmarklets so I don't need to "load unsafe scripts" from "unauthenticated sources".

...

You can disable all styles with the Web Developer addon.

Web Developer
http://addons.mozilla.org/firefox/addon/60

Web Developer button > CSS > [check] Disable All Styles

How to Disable Website CSS Style
http://technocript.com/how-to-disable-w ... efox-edge/

...

Maybe ask your questions in a UX forum.

Why do many sites leave half of each webpage empty?
http://ux.stackexchange.com/questions/104705

UX questions tagged [white-space] sorted by votes
http://ux.stackexchange.com/questions/t ... ?tab=Votes