vert-rl
by
noromanba
2018-05-06 [2018/05/06 08:56:11]
ng x-browser vertical viewer
@@ -1,11 +1,9 @@
-/*
- * @title vert-rl
- * @description ng x-browser vertical viewer
- * @include http://*
- * @include https://*
- * @license MIT License https://opensource.org/licenses/MIT
- * @javascript_url
- */
+// @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
@@ -19,15 +17,20 @@
// http://anond.hatelabo.jp/20130218042353
// TODO
+// - adjust lines w/ <ruby>, <rt>
+// - different ruby-text box size of fonts
+// - rough solution -> line-height: 2;
// - rotate punctuations
// - UTR #50?
// - http://www.unicode.org/reports/tr50/
+// TBD
+// - Noto* series
{
'use strict';
- // don't use `Array.from(arylike, mapfn)` for avoid Global Object Pollution
+ // 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
- // Array.from = $A;
// i.e. unworks below
// Array.from(document.styleSheets, sheet => sheet.disabled = true);
// workarounds and detail c.f.
@@ -58,12 +61,18 @@
max-height: 100%
}
+ rt {
+ font-size: 11pt;
+ }
+
a {
text-decoration-line: none;
+ word-break: break-word;
}
- rt {
- font-size: 11pt;
+ pre, code {
+ word-break: break-word;
+ white-space: pre-wrap;
}
img {
@@ -109,4 +118,15 @@
// 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/2017/03/24/120155
+// http://kudakurage.hatenadiary.com/entry/20120811/1344680512
+//
+// http://flashback.ryden.co.jp/
+// http://flashback.ryden.co.jp/diaries/WRK_OSYAACcA_kPN
+// http://yuheiy.hatenablog.com/entry/2017/05/08/221206
+// https://github.com/yuheiy/flashback
// @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
// http://anond.hatelabo.jp/20130218042353
// TODO
// - adjust lines w/ <ruby>, <rt>
// - different ruby-text box size of fonts
// - rough solution -> line-height: 2;
// - rotate punctuations
// - UTR #50?
// - http://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: 1.5;
font-family: "AokinMincho", "Noto Serif JP", 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
// 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
//
// Blogs of multicolumn layout
//
// http://kurage.hatenablog.com/
// http://kurage.hatenablog.com/entry/2017/03/24/120155
// http://kudakurage.hatenadiary.com/entry/20120811/1344680512
//
// http://flashback.ryden.co.jp/
// http://flashback.ryden.co.jp/diaries/WRK_OSYAACcA_kPN
// http://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 です。