vert-rl
by
noromanba
2018-05-06 [2018/05/06 08:56:11]
ng x-browser vertical viewer
@@ -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;
-
- const style = document.createElement('style');
- style.type = 'text/css';
- wall.appendChild(style);
-
- return (css) => {
- style.appendChild(document.createTextNode(css + '\n'));
- };
- })();
+ // 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
- const vertSerif = `
- * {
- 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%
- }
-
- rt {
- font-size: 11pt !important ;
- }
- `;
- addStyle(vertSerif);
+ //
+ 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;
@@ -69,24 +77,29 @@
evt.preventDefault();
});
- window.scrollTo(0 ,0);
- //window.scroll(document.body.clientWidth, 0);
-}
+ // TODO handle scroll/jump keybind
-// scripts/extensions for Chrome/mium or WebKit/Blink
+ //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
/*
* @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 です。