vert-rl

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

ng x-browser vertical viewer

@@ -16,40 +16,25 @@
 // 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
+// - adjust lines w/ ruby
+// - rotate alnum
 {
     '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;
+    wall.appendChild(Object.assign(document.createElement('style'), {
     // 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;
+                line-height: 1.5;
             }
 
             body {

• /*
   * @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
  // TODO
  // - adjust lines w/ ruby
  // - rotate alnum
  {
      'use strict';
  
      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
      // TBD text-orientation; upright or else
      // https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
          textContent: `
              html {
                  writing-mode: vertical-rl;
                  direction: ltr;
                  overflow-y: hidden;
                  text-align: justify;
                  line-height: 1.5;
              }
  
              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 LOADER Metadata ?

  Permalink

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

  RAW

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

  Packed

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

  Userscript

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

  Loader

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

  Metadata

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