青空文庫を読みやすくするユーザーCSS
青空文庫をちょっと眺めていたら、ルビのある行だけ行間が空いていて、つらく思えたのでユーザーCSSを書いていました(ほんとはそんなことしてる場合じゃないのに……)。
知見を共有しておきます。
前提
OSはWindows 10、ブラウザはFirefoxです。
ChromeはOpenTypeフォント周りの実装がいろいろ怪しいので。
基本
私のFirefoxで素で青空文庫を表示するとルビのある行だけ行間が空きます。
私が今書いているこのはてなブログでは、ルビを入れてみたところでそこだけ行間が空くことはありません。ここにその例を示してみましょうか。青空文庫もぜひこんな風に自然に読みたいものです。
ですが、はてなブログのほうをブラウザのインスペクターツール(F12キーを押すと出てくるやつです)で覗いてみても特別なCSSの設定をしているようには見えません。
では青空文庫の側の何が悪いのだろうかと思えば、どうもaozora.cssの
div, h1, h2 { line-height: 160%; } ruby { line-height: 100%; } rt { line-height: 50%; }
あたりがよろしくない……?
これを
div.main_text { font-family: "游ゴシック"; font-size: 18px; line-height: 2.0; } ruby, rt { line-height: 2.0; }
で上書きすると行間が一定になりました。
line-height(行高さ)に上では2.0(つまり行間が文字サイズの100%)を指定していますが、これが一定以上ないとだめなようです。フォントにも依存する(例えばデフォルトのメイリオはルビが文字から遠くなる)ため、游ゴシック体にしました。
ただ、このブログのline-heightは1.7。しかしこれと同じ値を指定すると行間が揃いません。ぱっと見て、このブログのルビのほうが文字に近いようです。
しかしインスペクターツールではそれっぽい設定が見当たらず。何故……
このブログは”Sentence”というテーマを借りてきているのですが、何かすごいカスタマイズをしているのでしょうかね……
さて、その他にいくつかカスタマイズを入れたのが次のものです。
/* 青空文庫基本 */ body { font-family: "游明朝"; } div.main_text { font-family: "游ゴシック"; font-size: 18px; font-weight: 500; line-height: 2.0; max-width: 45em; } ruby, rt { line-height: 2.0; } .kaeriten { font-size: 70%; } .sesame_dot { font-style: normal; padding: initial; text-emphasis-style: sesame; background: initial; }
これを「青空文庫基本」という名前でStylusに登録しました。
適用先は正規表現で https://www\.aozora\.gr\.jp/cards/.+/files/.+\.html
と指定します。
適用したものが次になります。
無事、行間が揃いました。
「いくつかカスタマイズ」といったのは次のようなものです。
- 行長を45文字にした
- 行長は文庫本で42文字くらいが相場ですが、少し試したところこれくらいが読みやすいかなと思いました。我々はWebで行長が長めの文章を読み慣れていますからね。
- 余談ですが、tpircsのブックマーク / 2020年3月19日 - はてなブックマークなどで読みづらいと言われていた UI を大幅にアップデート!もっと使いやすくなった Slack | Slack のページですが、これが読みづらいのは行長が短すぎるからだと思います。特にこういったカタカナ語が多い文章は、行が短いと単語が行の終わりでよく途切れてしまうのです。
- 返り点を少し大きくした
- 圏点を画像ではなくCSSの標準機能でつけるように変更
ダークモード
最近流行のダークモード(黒背景白文字表示)もせっかくなのでやってみました。
/* ダーク青空 */ body { color: #eee; background-color: #333; } img.gaiji { filter: invert(1); }
これを別のユーザーCSSとして保存しておくと、適宜ダークモードの有無を切り替えられます。
コツは真っ黒と真っ白にしないことです。外字は画像なので、CSSの階調反転フィルタで黒背景にします。
縦書き
縦書きにもしたいですよね。
なんと最近のCSSは縦書きにするオプションがあるので基本はそれでいけます。
/* 青空縦書き */ body { writing-mode: vertical-rl; } div.main_text { max-width: initial; max-height: 36em; }
かんたん!
注意点は、縦書きでもwidthは横方向になるので、行の長さはheightで指定しないといけないことです(方向に依らない「論理プロパティ」というのもあるみたいですが、まだ実験段階のようです)。
これも別CSSにして適宜有効化できるようにしました。
しかし、一つ問題があります。
縦書きだと横スクロールになりますが、マウスホイールでは横向きにスクロールしてくれないのです。
CSSでの設定で横スクロールするようにできるのかと思ったのですが、どうもCSSではできないようです(なんという片手落ち……)。
JavaScriptでマウスホイールの動作にフックして横向きにスクロールさせる必要があります。
ということで、ユーザーCSSだけでなくユーザースクリプトにも手を出しました。
Tampermonkeyで次のようなスクリプトを読み込むようにします(上のサイトで書かれているスクリプトのコピペですが)。
// ==UserScript== // @name 青空文庫縦書き横スクロール // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.aozora.gr.jp/cards/*/files/*.html // @require https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js // @require https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js // @grant none // ==/UserScript== (function() { 'use strict'; // Your code here... var $ = window.jQuery; $(document).ready( //スクロールバー tategakiScroll() ); function tategakiScroll(){ //スクロールスピード var speed = 50; //マウスホイールで横移動 $(document).mousewheel(function(event, mov) { //ie firefox $(this).scrollLeft($(this).scrollLeft() + mov * speed); //webkit $('body').scrollLeft($('body').scrollLeft() + mov * speed); return false; }); } })();
縦書き表示の時だけこのスクリプトを有効化すればOKです。
ページ区切りのない縦書き表示横スクロールだと、巻物を読んでいるような気分になりますね。