Last night I wondered if it would be possible to combine Readability with the FFN autopager into something workable. Thus we have the following partial port, which in theory should work on FF and Chrome. (Smooth scrolling is ported over with the spacebar and shift+spacebar). As always, no guarantees other than that it works for me.

Code:

// ==UserScript==
// @name Story Readability
// @namespace http://www.fanfiction.net/
// @description A readability plugin for FanFiction.Net.
// @version 1.0
// @include http://*.fanfiction.net/s/*
// @match http://*.fanfiction.net/s/*
// ==/UserScript==

var spaceDown = false;

// @author Zyloch
// Our code is tested on Firefox 4 RC2 and Google Chrome 11.
(function StoryReadable(unsafeWindow) {

    // This workaround is for Chrome, which does not give us access to the
    // variables and functions of the underlying page. We use a variant of
    // the Content Scope Runner technique to run the script twice, once in
    // GreaseMonkey context and once in page context.
    var pageScope = (typeof __STORY_READABLE_PAGE_SCOPE__ !== "undefined");
    var ua = navigator.userAgent.toLowerCase();
    var isChrome = ua.indexOf("chrome") !== -1;
    var isWin = /win/.test(navigator.platform.toLowerCase());

    if (!pageScope) {
        var readStyle = " \
#rdb-article hr { \
  height: 2px !important; \
} \
.sideDropdown { \
  left: 49px !important; \
} \
.sideDropdown a { \
  border-bottom: none !important; \
} \
#rdb-article-meta { \
  margin-top: 5px !important; \
} \
a:link { \
  border-bottom: none; \
} \
";
        GM_addStyle(readStyle);
    }

    // Inject our page scope marker into the page.
    if (isChrome && !pageScope) {
        var src = "(" + StoryReadable.caller.toString() + ")();";
        var marker = "var __STORY_READABLE_PAGE_SCOPE__ = true;";
        var script = document.createElement("script");
        script.setAttribute("type", "application/javascript");
        script.innerHTML = marker + src;

        // Insert the script node into the page, so it will run, and 
        // immediately remove it to clean up. Use setTimeout to force 
        // execution "outside" of the user script scope completely.
        setTimeout(function() {
            document.body.appendChild(script);
            document.body.removeChild(script);
        }, 0);

        // Stop running our script now.
        return;
    }

    // GreaseMonkey gives Firefox access to the actual not sandboxed copy of
    // the window object, called unsafeWindow. Chrome does not. Here, create
    // a local name alias to take care of either case.
    unsafeWindow = unsafeWindow || window;

    // Cookie stuff, from QuirksMode.
    var createCookie = function(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    };

    var readCookie = function(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
            var c = ca[i];
            while (c.charAt(0)==' ') c = c.substring(1,c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
    };

    var eraseCookie = function(name) {
        createCookie(name,"",-1);
    };

    /*
     * TypeHelpers version 1.0
     * Zoltan Hawryluk, Nov 24 2009.  
     * 
     * Released under the MIT License. http://www.opensource.org/licenses/mit-license.php
     * 
     * Works for 
     *   - IE6+ (Windows), 
     *   - Firefox 3.5+ (Windows, Mac, Linux), 
     *   - Safari 4+ (Windows, Mac OS X), 
     *   - Chrome 3.0+ (Windows).
     * Opera 10.10 and under reports unknown support for font-smoothing.
     * 
     * 
     * METHODS
     * -------
     * 
     * hasSmoothing() returns:
     *     true if font smoothing is enabled
     *     false if font smoothing isn't enabled
     *     null if it cannot detect if it's on or not.
     *     
     * addClasses() adds the following classes to the html tag:
     *     "hasFontSmoothing-true" if font smoothing is enabled
     *     "hasFontSmoothing-false" if it isn't
     *     "hasFontSmoothing-unknown" if it cannot detect it.
     *       
     */
    var TypeHelpers = new function() {
       var me = this;
       
       me.hasSmoothing = function() {
       
          // IE has screen.fontSmoothingEnabled - sweet!      
          if (typeof(unsafeWindow.screen.fontSmoothingEnabled) != "undefined") {
             return unsafeWindow.screen.fontSmoothingEnabled;  
          } else {
             try {
                // Create a 35x35 Canvas block.
                var canvasNode = document.createElement("canvas");
                canvasNode.width = "35";
                canvasNode.height = "35"
                
                // We must put this node into the body, otherwise 
                // Safari Windows does not report correctly.
                canvasNode.style.display = "none";
                document.body.appendChild(canvasNode);
                var ctx = canvasNode.getContext("2d");
                
                // draw a black letter "O", 32px Arial.
                ctx.textBaseline = "top";
                ctx.font = "32px Arial";
                ctx.fillStyle = "black";
                ctx.strokeStyle = "black";
                
                ctx.fillText("O", 0, 0);
                
                // start at (8,1) and search the canvas from left to right,
                // top to bottom to see if we can find a non-black pixel.  If
                // so we return true.
                for (var j = 8; j <= 32; j++) {
                   for (var i = 1; i <= 32; i++) {
                   
                      var imageData = ctx.getImageData(i, j, 1, 1).data;
                      var alpha = imageData[3];
                      
                      if (alpha != 255 && alpha != 0) {
                         return true; // font-smoothing must be on.
                      }
                   }
                   
                }
             
                // didn't find any non-black pixels - return false.
                return false;
             } 
             catch (ex) {
                // Something went wrong (for example, Opera cannot use the
                // canvas fillText() method.  Return null (unknown).
                return null;
             }
          }
       }
       
       me.insertClasses = function(){
          var result = me.hasSmoothing();
          var htmlNode = document.getElementsByTagName("html")[0];
          if (result == true) {
             htmlNode.className += " hasFontSmoothing-true";
          } else if (result == false) {
                htmlNode.className += " hasFontSmoothing-false";
          } else { // result == null
                htmlNode.className += " hasFontSmoothing-unknown";
          }
       }
    };

    TypeHelpers.insertClasses();

    var currentYPosition = function() {
        // Firefox, Chrome, Opera, Safari
        if (unsafeWindow.pageYOffset) return self.pageYOffset;
        // Internet Explorer 6 - standards mode
        if (document.documentElement && document.documentElement.scrollTop)
            return document.documentElement.scrollTop;
        // Internet Explorer 6, 7 and 8
        if (document.body.scrollTop) return document.body.scrollTop;
        return 0;
    }

    var smoothScroll = function(dist, speed) {
        var startY = currentYPosition();
        var stopY = startY + dist;
        var dir = stopY > startY ? 1 : -1;
        var littleScroll = function(pastPos) {
            unsafeWindow.scrollBy(0, speed * dir);
            var curPos = currentYPosition();
            if (curPos !== pastPos && (0 + curPos + speed) * dir < stopY * dir) {
                setTimeout(function() {
                    littleScroll(curPos);
                }, 50);
            }
        };
        littleScroll(startY);
    }

    unsafeWindow.addEventListener("keydown", function(evt) {
        var dir, dist;
        if (evt.keyCode === 16) {
            spaceDown = true;
        }
        else if (evt.keyCode === 32) {
            dir = spaceDown ? -1 : 1;
            dist = unsafeWindow.innerHeight;
            smoothScroll(dist * dir, parseInt(curScrollSpd));
            evt.preventDefault();
        }
    }, false);

    unsafeWindow.addEventListener("keyup", function(evt) {
        if (evt.keyCode === 16) {
            spaceDown = false;
        }
    }, false);

    var hasSmooth = false;
    var hasSmoothCookie = readCookie("hasSmooth");
    if (hasSmoothCookie == "1") {
        hasSmooth = true;
    } else if (hasSmoothCookie == "0") {
        hasSmooth = false;
    } else if (isWin && TypeHelpers.hasSmoothing()) {
        hasSmooth = true;
        createCookie("hasSmooth", "1");
    } else {
        hasSmooth = false;
        createCookie("hasSmooth", "0");
    }

    var curSize = readCookie("mysize");
    if (!curSize) curSize = "100%";

    var curStyle = readCookie("mystyle");
    if (!curStyle) curStyle = "style-newspaper";

    var curWidth = readCookie("mywidth");
    if (!curWidth) curWidth = "75%";

    var curScrollSpd = readCookie("myscrollspd");
    if (!curScrollSpd) curScrollSpd = "100";

    var readStyle1 = document.createElement("link");
    readStyle1.setAttribute("rel", "stylesheet");
    readStyle1.setAttribute("href", "https://www.readability.com/media/css/screen.css");
    document.head.appendChild(readStyle1);

    var readStyle2 = document.createElement("link");
    readStyle2.setAttribute("rel", "stylesheet");
    readStyle2.setAttribute("href", "https://www.readability.com/media/css/article.css");
    document.head.appendChild(readStyle2);

    var actualSumm = document.body.innerHTML.match(/(Rated:.+) - id:/);
    if (actualSumm) actualSumm = actualSumm[1];
    else actualSumm = "";

    var sTxtObj = document.getElementById("storytextp").getElementsByTagName("div")[0];
    var sChaps = document.getElementsByName("chapter")[0];
    document.body.innerHTML = "";
    document.body.setAttribute("id", "article");
    document.body.setAttribute("class", curStyle);
    document.body.style.backgroundColor = "";
    document.body.style.marginTop = "";
    document.body.addEventListener("click", function() {
        document.getElementById("dropdown-appearance").style.display = "";
    }, false);

    var storyHead = document.createElement("h1");
    storyHead.setAttribute("id", "article-entry-title");
    storyHead.setAttribute("class", "entry-title");
    storyHead.innerHTML = unsafeWindow.title_t + " by ";
    storyHead.innerHTML += "<a href='/u/" + unsafeWindow.userid + "/'>" + unsafeWindow.author + "</a>";

    if (sChaps) {
        var clearDiv = document.createElement("div");
        clearDiv.style.clear = "both";
        storyHead.appendChild(sChaps);
        sChaps.style.cssFloat = "right";
        sChaps.style.textTransform = "none";
        sChaps.style.letterSpacing = "normal";
        sChaps.style.fontWeight = "normal";
        sChaps.style.lineHeight = "normal";
        sChaps.style.marginTop = "0.4em";
        sChaps.style.fontSize = "0.6em";
        storyHead.appendChild(clearDiv);
    }

    var summDiv = document.createElement("div");
    summDiv.style.textTransform = "none";
    summDiv.style.letterSpacing = "normal";
    summDiv.style.lineHeight = "normal";
    summDiv.innerHTML = actualSumm;

    var storySumm = document.createElement("aside");
    storySumm.setAttribute("id", "rdb-article-meta");
    storySumm.appendChild(summDiv);

    var header = document.createElement("header");
    header.setAttribute("id", "rdb-content-header");
    header.setAttribute("role", "sectionhead");
    header.appendChild(storyHead);
    header.appendChild(storySumm);

    var content = document.createElement("section");
    content.setAttribute("id", "rdb-article-content");
    content.setAttribute("class", "entry-content");
    content.appendChild(sTxtObj);

    var primary = document.createElement("section");
    primary.setAttribute("id", "rdb-primary");
    primary.setAttribute("role", "main");
    primary.appendChild(content);

    var article = document.createElement("article");
    article.setAttribute("id", "rdb-article");
    article.setAttribute("role", "article");
    article.setAttribute("class", "hnews hentry");
    article.style.width = curWidth;
    article.style.fontSize = curSize;
    article.appendChild(header);
    article.appendChild(primary);

    var rdbContent = document.createElement("section");
    rdbContent.setAttribute("id", "rdb-content");
    rdbContent.appendChild(article);

    var wrapper = document.createElement("div");
    wrapper.setAttribute("class", "rdb-wrapper");
    wrapper.appendChild(rdbContent);
    document.body.appendChild(wrapper);

    // Control Panel

    var aLnk = document.createElement("a");
    aLnk.setAttribute("id", "tool-appearance");
    aLnk.setAttribute("href", "#");
    aLnk.setAttribute("accesskey", "a");
    aLnk.setAttribute("title", "Change Appearance Settings");
    aLnk.innerHTML = "Appearance";
    aLnk.addEventListener("click", function(evt) {
        var acp = document.getElementById("dropdown-appearance");
        if (acp.style.display === "block") {
            acp.style.display = "";
        } else {
            acp.style.display = "block";
        }
        evt.preventDefault();
        evt.stopPropagation();
    }, false);

    var aEl = document.createElement("li");
    aEl.setAttribute("class", "first");
    aEl.appendChild(aLnk);

    var pLnk = document.createElement("a");
    pLnk.setAttribute("id", "tool-print");
    pLnk.setAttribute("href", "#");
    pLnk.setAttribute("accesskey", "p");
    pLnk.setAttribute("title", "Print Visible Story");
    pLnk.innerHTML = "Print";
    pLnk.addEventListener("click", function(evt) {
        unsafeWindow.print();
        evt.preventDefault();
    }, false);

    var pEl = document.createElement("li");
    pEl.setAttribute("class", "last");
    pEl.appendChild(pLnk);

    var ul = document.createElement("ul");
    ul.appendChild(aEl);
    ul.appendChild(pEl);

    var aside = document.createElement("aside");
    aside.setAttribute("id", "rdb-article-tools");
    aside.appendChild(ul);

    document.body.appendChild(aside);

    // Appearance Controls
    
    var ahead = document.createElement("header");
    ahead.setAttribute("role", "sectionhead");
    ahead.setAttribute("class", "dropdown-header");
    ahead.innerHTML = "<h1>Appearance</h1>";

    var ablock1lbl = document.createElement("label");
    ablock1lbl.innerHTML = "Font &amp; Color";

    var changeStyle = function(s) {
        return function() {
            var bs = document.body.getAttribute("class");
            bs = bs.replace(/style-\S+/, "style-" + s);
            document.body.setAttribute("class", bs);
            createCookie("mystyle", "style-" + s, 1000);
        };
    };

    var opt1 = document.createElement("li");
    opt1.setAttribute("class", "appearance-style-newspaper");
    opt1.setAttribute("title", "Newspaper");
    opt1.innerHTML = "<span>Newspaper</span>";
    opt1.addEventListener("click", changeStyle("newspaper"), false);

    var opt2 = document.createElement("li");
    opt2.setAttribute("class", "appearance-style-novel");
    opt2.setAttribute("title", "Novel");
    opt2.innerHTML = "<span>Novel</span>";
    opt2.addEventListener("click", changeStyle("novel"), false);

    var opt3 = document.createElement("li");
    opt3.setAttribute("class", "appearance-style-ebook");
    opt3.setAttribute("title", "eBook");
    opt3.innerHTML = "<span>eBook</span>";
    opt3.addEventListener("click", changeStyle("ebook"), false);

    var opt4 = document.createElement("li");
    opt4.setAttribute("class", "appearance-style-inverse");
    opt4.setAttribute("title", "Inverse");
    opt4.innerHTML = "<span>Inverse</span>";
    opt4.addEventListener("click", changeStyle("inverse"), false);

    var opt5 = document.createElement("li");
    opt5.setAttribute("class", "appearance-style-athelas");
    opt5.setAttribute("title", "Athelas");
    opt5.innerHTML = "<span>Athelas</span>";
    opt5.addEventListener("click", changeStyle("athelas"), false);

    var themeOpts = document.createElement("ul");
    themeOpts.setAttribute("id", "appearance-style-swatches");
    themeOpts.setAttribute("class", "appearanceOption");
    themeOpts.appendChild(opt1);
    themeOpts.appendChild(opt2);
    themeOpts.appendChild(opt3);
    themeOpts.appendChild(opt4);
    themeOpts.appendChild(opt5);

    var ablock1inner = document.createElement("div");
    ablock1inner.setAttribute("class", "inner theme-switch");
    ablock1inner.appendChild(themeOpts);

    var ablock1wrap = document.createElement("div");
    ablock1wrap.setAttribute("class", "appearanceOption block-wrap");
    ablock1wrap.appendChild(ablock1inner);

    var ablock1 = document.createElement("div");
    ablock1.setAttribute("class", "appearanceBlock");
    ablock1.appendChild(ablock1lbl);
    ablock1.appendChild(ablock1wrap);

    var ablock2lbl = document.createElement("label");
    ablock2lbl.innerHTML = "Width";

    var widthOpt = document.createElement("input");
    widthOpt.setAttribute("class", "appearance-text");
    widthOpt.setAttribute("type", "text");
    widthOpt.setAttribute("value", curWidth);
    widthOpt.style.fontSize = "12px";
    widthOpt.style.width = "50px";
    widthOpt.style.textAlign = "center";
    widthOpt.addEventListener("focus", function() {
        this.select();
    }, false);
    widthOpt.addEventListener("change", function() {
        article.style.width = this.value;
        createCookie("mywidth", this.value, 1000);
    }, false);

    var ablock2inner = document.createElement("div");
    ablock2inner.setAttribute("class", "inner");
    ablock2inner.style.textAlign = "center";
    ablock2inner.style.padding = "5px 0px";
    ablock2inner.appendChild(widthOpt);

    var ablock2wrap = document.createElement("div");
    ablock2wrap.setAttribute("class", "appearanceOption block-wrap");
    ablock2wrap.appendChild(ablock2inner);

    var ablock2 = document.createElement("div");
    ablock2.setAttribute("class", "appearanceBlock");
    ablock2.appendChild(ablock2lbl);
    ablock2.appendChild(ablock2wrap);

    var ablock3lbl = document.createElement("label");
    ablock3lbl.innerHTML = "Font Size";

    var sizeOpt = document.createElement("input");
    sizeOpt.setAttribute("class", "appearance-text");
    sizeOpt.setAttribute("type", "text");
    sizeOpt.setAttribute("value", curSize);
    sizeOpt.style.fontSize = "12px";
    sizeOpt.style.width = "50px";
    sizeOpt.style.textAlign = "center";
    sizeOpt.addEventListener("focus", function() {
        this.select();
    }, false);
    sizeOpt.addEventListener("change", function() {
        article.style.fontSize = this.value;
        createCookie("mysize", this.value, 1000);
    }, false);

    var ablock3inner = document.createElement("div");
    ablock3inner.setAttribute("class", "inner");
    ablock3inner.style.textAlign = "center";
    ablock3inner.style.padding = "5px 0px";
    ablock3inner.appendChild(sizeOpt);

    var ablock3wrap = document.createElement("div");
    ablock3wrap.setAttribute("class", "appearanceOption block-wrap");
    ablock3wrap.appendChild(ablock3inner);

    var ablock3 = document.createElement("div");
    ablock3.setAttribute("class", "appearanceBlock");
    ablock3.appendChild(ablock3lbl);
    ablock3.appendChild(ablock3wrap);

    var ablock4lbl = document.createElement("label");
    ablock4lbl.innerHTML = "Scroll Speed";

    var scrollOpt = document.createElement("input");
    scrollOpt.setAttribute("class", "appearance-text");
    scrollOpt.setAttribute("type", "text");
    scrollOpt.setAttribute("value", curScrollSpd);
    scrollOpt.style.fontSize = "12px";
    scrollOpt.style.width = "50px";
    scrollOpt.style.textAlign = "center";
    scrollOpt.addEventListener("focus", function() {
        this.select();
    }, false);
    scrollOpt.addEventListener("change", function() {
        this.value = this.value.replace(/\D/g, "");
        curScrollSpd = this.value;
        createCookie("myscrollspd", this.value, 1000);
    }, false);

    var ablock4inner = document.createElement("div");
    ablock4inner.setAttribute("class", "inner");
    ablock4inner.style.textAlign = "center";
    ablock4inner.style.padding = "5px 0px";
    ablock4inner.appendChild(scrollOpt);

    var ablock4wrap = document.createElement("div");
    ablock4wrap.setAttribute("class", "appearanceOption block-wrap");
    ablock4wrap.appendChild(ablock4inner);

    var ablock4 = document.createElement("div");
    ablock4.setAttribute("class", "appearanceBlock");
    ablock4.appendChild(ablock4lbl);
    ablock4.appendChild(ablock4wrap);

    var ablocks = document.createElement("section");
    ablocks.setAttribute("class", "appearanceBlocks");
    ablocks.appendChild(ablock1);
    ablocks.appendChild(ablock2);
    ablocks.appendChild(ablock3);
    ablocks.appendChild(ablock4);

    var amain = document.createElement("section");
    amain.setAttribute("id", "dropdown-appearance");
    amain.setAttribute("class", "dropdown sideDropdown vertical");
    amain.appendChild(ahead);
    amain.appendChild(ablocks);
    amain.addEventListener("click", function(evt) {
        evt.stopPropagation();
    }, false);

    document.body.appendChild(amain);
    
})(unsafeWindow);

 

I can not really give much input since I do not use anything like this and am not really good at the language used here other than, we have a forum specially for coding now. Use it?

 

Nah, he put it in the right forum. It's a script that combines Raven's AutoPager and Readability (whatever that is...). You use it to aid in your spending hours upon hours reading stories, and not realizing what you just did.

 

You make a good point, Militis. I should explain. Readability was this bookmarklet program brought to my attention a few years ago by someone on this forum I think. It's supposed to make the text look prettier when you read it; obviously not everyone will agree but you won't know until you try it.

To use this script, download and save as story_readability.user.js, then open it in either Firefox or Chrome (You need GreaseMonkey installed in Firefox). Since it's just the work of a few hours of hacking, it's not a perfect port. For two of the styles, the script I included does not auto-install the right fonts (although I've fixed it on my personal version, it included embedding a really large style sheet). I have also been thinking about allowing customization of the background and text color beyond the default Readability styles, but I'll hold off on that unless someone uses it and decides they would like it.

Here is a screenshot of what I see on my browser:

 

I gotta learn how to do this.

I mean not how to use this but make stuff like this.

 

Since my tech aptitude tends to negative infinity, all I can do is look at the pretty screenshot and say that it screenshot looks much better than the usual browser display of Firefox. Good luck!

 

If you are using Chrome or Firefox, you don't need much tech aptitude to run the script. First, if running Firefox, install GreaseMonkey and click Add to Firefox. Then, restart Firefox. With Chrome, you don't need any preparation.

Next, you need only copy the source into Notepad, save it as "story_readability.user.js". Then, in Firefox or Chrome, press Ctrl+O and open the file. It should prompt you to automatically install.

 

Zyloch, I tried it with Chrome (since that sounded easier). I saved the file, opened it using Ctrl+O, and then it got installed after a warning about new extensions. The old and new looks of the site don't show a difference. Maybe I missed something. I'll try it with Firefox later.

 

Hm, it seems to work in the newest version of Chrome, which is in beta. I don't recall using anything unique to that version in my script, so it should work in earlier versions, but maybe not. Let me know how it goes in Firefox. Keep in mind it should only change the look of story pages, and not every page.