vert-rl

  • // @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.
    // https://www.aozora.gr.jp/cards/000096/files/2093_28841.html
    // https://ssig33.com/text/%E3%83%90%E3%83%BC%E3%83%99%E3%82%AD%E3%83%A5%E3%83%BC
    // https://anond.hatelabo.jp/20130218042353
    
    // TODO
    // - adjust lines w/ <ruby>, <rt>
    //  - different ruby-text box size of fonts
    //   - rough solution
    //    - "Noto Serif JP" line-height: 2
    //    - "AokinMincho" line-height: 1.5
    // - rotate punctuations
    //  - UTR #50?
    //   - https://www.unicode.org/reports/tr50/
    // TBD
    //  - Noto* series
    (() => {
        'use strict';
    
        // not recommend to use `Array.from(arylike, mapfn)` whole sites;
        // avoid Global Object Pollution, use `Array.from(arylike).*`
        // e.g. prototype.js; ignoring 2nd map-func due to prototype.js overwritten that
        // i.e. unworks below
        //      Array.from(document.styleSheets, sheet => sheet.disabled = true);
        // workarounds and detail c.f.
        // https://gist.github.com/noromanba/d007fd37daa55a12681db7c7cd800b8e
        [...document.styleSheets].forEach(sheet => sheet.disabled = true);
    
        const wall = document.head || document.body || document.documentElement;
        wall.appendChild(Object.assign(document.createElement('style'), {
            // vertical c.f.
            // https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
            // https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
            textContent: `
                html {
                    writing-mode: vertical-rl;
                    direction: ltr;
                    overflow-y: hidden;
                }
    
                body {
                    text-align: justify;
                    text-orientation: upright;
                    line-height: 2;
                    font-family: "Noto Serif JP", "AokinMincho", serif;
                    font-size: 20pt;
                    font-weight: 500;
                    margin-top: 1em;
                    margin-bottom: 1em;
                    max-height: 100%
                }
    
                rt {
                    font-size: 11pt;
                }
    
                a {
                    text-decoration-line: none;
                    word-break: break-word;
                }
    
                pre, code {
                    word-break: break-word;
                    white-space: pre-wrap;
                }
    
                img {
                    max-height: 100%;
                }
            `,
        }));
    
        // TBD replace to WheelEvent
        //     https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
        // FIXME didn't work on Chrome/ium too
        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
    //
    // Blogs of multicolumn layout
    //
    // http://kurage.hatenablog.com/
    //  http://kurage.hatenablog.com/entry/2011/12/01/170219
    // http://kudakurage.hatenadiary.com/entry/20120811/1344680512
    //
    // http://flashback.ryden.co.jp/
    //  http://flashback.ryden.co.jp/diaries/WRBbaCYAACgA875-
    // https://yuheiy.hatenablog.com/entry/2017/05/08/221206
    //  https://github.com/yuheiy/flashback
    
    
  • Permalink
    このページへの個別リンクです。
    RAW
    書かれたコードへの直接のリンクです。
    Packed
    文字列が圧縮された書かれたコードへのリンクです。
    Userscript
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2018/05/06 08:56:11 - 2018-05-06
  2. 2017/05/14 08:57:27 - 2017-05-14
  3. 2017/05/14 08:44:17 - 2017-05-14
  4. 2017/04/19 09:10:43 - 2017-04-19
  5. 2017/04/19 09:09:33 - 2017-04-19
  6. 2017/04/17 08:53:12 - 2017-04-17
  7. 2017/04/17 08:40:20 - 2017-04-17
  8. 2017/04/17 08:39:14 - 2017-04-17
  9. 2017/04/17 05:05:52 - 2017-04-17
  10. 2017/04/16 09:58:30 - 2017-04-16
  11. 2017/04/16 09:33:09 - 2017-04-16