vert-rl

by noromanba 2018-05-06 [2018/05/06 08:56:11]

ng x-browser vertical viewer

• // @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 LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。