Any way to disable margins

[slickrcbd]

This isn't limited to fanfiction.net, but it is the most annoying place. Many websites think it's cool to have left and right margins because they think it reduces eye strain or something. Fanfiction.net is one, Google with JavaScript turned off via NoScript or YesScript is another. The margins are apparently done with CSS or something and tend to be dynamic, as their size changes with zoom.
Is there any way to disable this annoying feature so I can use my window size to regulate text? I prefer maximum reading space.
Closet I can recall was an extension called "Dr. Body Narrow", but it actually did the opposite

Here's an example, where the margin changes with zoom, including one "sweet spot" where there is no margin, but the text is a bit too large. Is there anything to just get rid of that annoying margin? A stylesheet that disables it? This kind of thing happens on other websites as well.
https://flic.kr/s/aHsmEr72R1

[morat]

You can reduce the margin, border and padding around an element in the inspector.

CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp

I use a bookmarklet to make web pages more readable.

Readability
http://landerlyoung.github.io/assets/st ... ity-0.5.1/

I mostly use it when reading web novels.

[Brummelchen]

if speak about "margin" this means a border around some element.
if you speak about left and right space from a forum this would mean "width" (most cases #main)

[slickrcbd]

if speak about "margin" this means a border around some element.
if you speak about left and right space from a forum this would mean "width" (most cases #main)

I did not know the term, hence the pictures.

I use a bookmarklet to make web pages more readable.

Could you post what the bookmarklet is? I'm not a web developer, I don't know how to construct custom bookmarklets based on the DOM inspector, stylesheets for Stylus (formerly Stlish), or custom scripts for Greasemonkey.

I haven't studied web design since literally the time Netscape Navigator 3.0 was released. I was looking at HTML 2.0. I don't know how to construct a bookmarklet to affect CSS, which I don't think was introduced until Netscape Communicator (4), and wasn't anything like the current CSS until at least a decade later.

I can barely make a bare-bones HTML 1.0 complaint webpage, and I haven't made a real webpage since I was in high school in the mid 1990's. I've probably forgotten a lot in the last 25 years too.

I was hoping for an extention, stylus stylesheet, greasemonkey script, etc that would do the job since I don't know enough to make one myself. Sorry if I was unclear that I lacked the skill to know how to make a bookmarklet like you said was possible just by telling me about some CSS elements.

[morat]

Could you post what the bookmarklet is?

Here is the readability bookmarklet I use.

Style: Novel
Size: Small
Margin: Narrow

Code: Select all

javascript:(function(){
  readStyle = "style-novel";
  readSize = "size-small";
  readMargin = "margin-narrow";
  var _readability_script = document.createElement("SCRIPT");
  _readability_script.type = "text/javascript";
  _readability_script.src = "https://landerlyoung.github.io/assets/storage/readability-0.5.1/js/readability.js?x=" + (Math.random());
  document.getElementsByTagName("head")[0].appendChild(_readability_script);
  var _readability_css = document.createElement("LINK");
  _readability_css.rel = "stylesheet";
  _readability_css.href = "https://landerlyoung.github.io/assets/storage/readability-0.5.1/css/readability.css";
  _readability_css.type = "text/css";
  _readability_css.media = "screen";
  document.getElementsByTagName("head")[0].appendChild(_readability_css);
  var _readability_print_css = document.createElement("LINK");
  _readability_print_css.rel = "stylesheet";
  _readability_print_css.href = "https://landerlyoung.github.io/assets/storage/readability-0.5.1/css/readability-print.css";
  _readability_print_css.media = "print";
  _readability_print_css.type = "text/css";
  document.getElementsByTagName("head")[0].appendChild(_readability_print_css);
})();

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

Test chapter
http://silenttranslations.com/legend/legend-chapter-1/

After using the readability bookmarklet, I like to increase the zoom until the "sweet spot" as well.

[slickrcbd]

That bookmarklet made things worse. Instead of removing the margin so the text filled the entire window, it greatly increased the margin, scrunching the text up slightly off-center.
My goal was to make the text content have no margin, not increase the margin. I don't know why these narrow text boxes are so popular. I could find an extension to narrow text windows easily, but not widen them to fit the window.

[Brummelchen]

fanfiction main page only

Code: Select all

@-moz-document domain("www.fanfiction.net") {
.maxwidth, 
.timeline-Widget
{
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
}

you need to work with the inspector to get the proper element.
https://developer.mozilla.org/en-US/doc ... _Inspector

google.com

Code: Select all

@-moz-document domain("www.google.com") {
#cnt #center_col, #cnt #foot,
#appbar, #rhscol,
.r, .s, .st, .TbwUpd,
#res a, #res h3
{
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
}
}

and the result is limited by google itself, there is no text after "..."

as you can see each site is specific, either you deal with it or you use the inspector, try & error as we did/do.