vert-rl Fork

    @@ -7,59 +7,67 @@ * @javascript_url */ - // PDFize and AokinMincho + // "ng" is not "next generation", "not good" + + // PDFize and "AokinMincho" font // http://a2k.aill.org/ // http://a2k.aill.org/text.html // e.g. // http://www.aozora.gr.jp/cards/000096/files/2093_28841.html // http://www.aozora.gr.jp/cards/000096/card2093.html - // FIXME - // 100% cpu usage and freeze in Chrome/mium + // XXX + // 100% cpu usage and freeze on long page in Chrome/mium // TODO // adjust lines w/ ruby { 'use strict'; - const addStyle = (() => { - const wall = document.head || document.body || document.documentElement; + // TBD remove; for split CSS under selector + // const addStyle = (() => { + // const wall = document.head || document.body || document.documentElement; + // + // const style = document.createElement('style'); + // style.type = 'text/css'; + // wall.appendChild(style); + // + // return (css) => { + // style.appendChild(document.createTextNode(css + '\n')); + // }; + // })(); - const style = document.createElement('style'); - style.type = 'text/css'; - wall.appendChild(style); - - return (css) => { - style.appendChild(document.createTextNode(css + '\n')); - }; - })(); - + const wall = document.head || document.body || document.documentElement; // vertical c.f. // https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode // TBD text-orientation; upright or else // https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation - const vertSerif = ` - * { - writing-mode: vertical-rl; - direction: ltr; - overflow-y: hidden; - text-align: justify; - line-height: 1; - } + // + wall.appendChild(Object.assign(document.createElement('style'), { + textContent: ` + html { + writing-mode: vertical-rl; + direction: ltr; + overflow-y: hidden; + text-align: justify; + line-height: 1; + } - body { - font-family: "AokinMincho", "Noto Serif JP", serif !important ; - font-size: 20pt; - margin-top: 1em; - margin-bottom: 1em; - max-height: 100% - } + body { + font-family: "AokinMincho", "Noto Serif JP", serif; + font-size: 20pt; + margin-top: 1em; + margin-bottom: 1em; + max-height: 100% + } - rt { - font-size: 11pt !important ; - } - `; - addStyle(vertSerif); + rt { + font-size: 11pt; + } + `, + })); + // TBD replace to WheelEvent + // https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent document.body.addEventListener('mousewheel', (evt) => { if (evt.wheelDeltaX) { document.body.scrollLeft -= evt.wheelDeltaX;
    @@ -69,24 +77,29 @@ evt.preventDefault(); }); - window.scrollTo(0 ,0); - //window.scroll(document.body.clientWidth, 0); + // TODO handle scroll/jump keybind + + //window.scrollTo(0 ,0); + window.scroll(document.body.clientWidth, 0); } - // scripts/extensions for Chrome/mium or WebKit/Blink - + // DEV + // Scripts/Extensions for Chrome/mium and/or WebKit/Blink + // // aochora // http://subtech.g.hatena.ne.jp/cho45/20110319/1300542682 // https://gist.github.com/cho45/875989 - + // https://gist.githubusercontent.com/cho45/875989/raw/tate.user.js + // // ezoezora // https://cpplover.blogspot.com/2011/03/chrome-extension.html // https://cpplover.blogspot.com/2011/05/blog-post.html // https://cpplover.blogspot.com/2011/03/blog-post_22.html // https://chrome.google.com/extensions/detail/jkjlaidhndkfgjhchppdfipigaobmidh - + // // hatozora // http://rosylilly.hatenablog.com/entry/2012/01/14/214244 // https://github.com/rosylilly/Tatezora // https://github.com/rosylilly/Tatezora/blob/master/for_userscript.user.js + // https://raw.githubusercontent.com/rosylilly/Tatezora/master/for_userscript.user.js
  • /*
     * @title vert-rl
     * @description ng x-browser vertical viewer
     * @include http://*
     * @include https://*
     * @license MIT License https://opensource.org/licenses/MIT
     * @javascript_url
     */
    
    // "ng" is not "next generation", "not good"
    
    // PDFize and "AokinMincho" font
    // http://a2k.aill.org/
    //  http://a2k.aill.org/text.html
    
    // e.g.
    // http://www.aozora.gr.jp/cards/000096/files/2093_28841.html
    //  http://www.aozora.gr.jp/cards/000096/card2093.html
    // XXX
    // 100% cpu usage and freeze on long page in Chrome/mium
    // TODO
    // adjust lines w/ ruby
    {
        'use strict';
    
        // TBD remove; for split CSS under selector
    //    const addStyle = (() => {
    //        const wall = document.head || document.body || document.documentElement;
    //
    //        const style = document.createElement('style');
    //        style.type = 'text/css';
    //        wall.appendChild(style);
    //
    //        return (css) => {
    //            style.appendChild(document.createTextNode(css + '\n'));
    //        };
    //    })();
    
        const wall = document.head || document.body || document.documentElement;
        // vertical c.f.
        // https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
        // TBD text-orientation; upright or else
        // https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
        //
        wall.appendChild(Object.assign(document.createElement('style'), {
            textContent: `
                html {
                    writing-mode: vertical-rl;
                    direction: ltr;
                    overflow-y: hidden;
                    text-align: justify;
                    line-height: 1;
                }
    
                body {
                    font-family: "AokinMincho", "Noto Serif JP", serif;
                    font-size: 20pt;
                    margin-top: 1em;
                    margin-bottom: 1em;
                    max-height: 100%
                }
    
                rt {
                    font-size: 11pt;
                }
            `,
        }));
    
        // TBD replace to WheelEvent
        //     https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
        document.body.addEventListener('mousewheel', (evt) => {
            if (evt.wheelDeltaX) {
                document.body.scrollLeft -= evt.wheelDeltaX;
            } else {
                document.body.scrollLeft += evt.wheelDelta;
            }
            evt.preventDefault();
        });
    
        // TODO handle scroll/jump keybind
    
        //window.scrollTo(0 ,0);
        window.scroll(document.body.clientWidth, 0);
    }
    
    // DEV
    // Scripts/Extensions for Chrome/mium and/or WebKit/Blink
    //
    // aochora
    // http://subtech.g.hatena.ne.jp/cho45/20110319/1300542682
    //  https://gist.github.com/cho45/875989
    //   https://gist.githubusercontent.com/cho45/875989/raw/tate.user.js
    //
    // ezoezora
    // https://cpplover.blogspot.com/2011/03/chrome-extension.html
    // https://cpplover.blogspot.com/2011/05/blog-post.html
    // https://cpplover.blogspot.com/2011/03/blog-post_22.html
    //  https://chrome.google.com/extensions/detail/jkjlaidhndkfgjhchppdfipigaobmidh
    //
    // hatozora
    // http://rosylilly.hatenablog.com/entry/2012/01/14/214244
    //  https://github.com/rosylilly/Tatezora
    //  https://github.com/rosylilly/Tatezora/blob/master/for_userscript.user.js
    //   https://raw.githubusercontent.com/rosylilly/Tatezora/master/for_userscript.user.js
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。