vert-rl

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

ng x-browser vertical viewer

@@ -15,10 +15,11 @@
 
 // e.g.
 // http://www.aozora.gr.jp/cards/000096/files/2093_28841.html
-//  http://www.aozora.gr.jp/cards/000096/card2093.html
+// https://ssig33.com/text/%E3%83%90%E3%83%BC%E3%83%99%E3%82%AD%E3%83%A5%E3%83%BC
+
 // TODO
 // - adjust lines w/ ruby
-// - rotate alnum
+// - rotate punctuations
 {
     'use strict';
 
@@ -26,7 +27,6 @@
     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 {
@@ -34,6 +34,7 @@
                 direction: ltr;
                 overflow-y: hidden;
                 text-align: justify;
+                text-orientation: upright;
                 line-height: 1.5;
             }
 
@@ -48,12 +49,17 @@
             rt {
                 font-size: 11pt;
             }
+
+            img {
+                max-height: 100%;
+            }
         `,
     }));
 
     // TBD replace to WheelEvent
     //     https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
-    document.body.addEventListener('mousewheel', (evt) => {
+    // TODO fix on Firefox
+    document.body.addEventListener('mousewheel', evt => {
         if (evt.wheelDeltaX) {
             document.body.scrollLeft -= evt.wheelDeltaX;
         } else {

• /*
   * @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
  // https://ssig33.com/text/%E3%83%90%E3%83%BC%E3%83%99%E3%82%AD%E3%83%A5%E3%83%BC
  
  // TODO
  // - adjust lines w/ ruby
  // - rotate punctuations
  {
      '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
          // 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;
                  text-orientation: upright;
                  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;
              }
  
              img {
                  max-height: 100%;
              }
          `,
      }));
  
      // TBD replace to WheelEvent
      //     https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent
      // TODO fix on Firefox
      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 です。