青空文庫を読みやすくするユーザーCSS

青空文庫をちょっと眺めていたら、ルビのある行だけ行間が空いていて、つらく思えたのでユーザーCSSを書いていました(ほんとはそんなことしてる場合じゃないのに……)。
知見を共有しておきます。

前提

OSはWindows 10、ブラウザはFirefoxです。
ChromeOpenTypeフォント周りの実装がいろいろ怪しいので。

ユーザーCSSの導入にはStylusというFirefox拡張を使います。

addons.mozilla.org

基本

私のFirefoxで素で青空文庫を表示するとルビのある行だけ行間が空きます。

f:id:suzusime:20200508173900p:plain
素の状態

私が今書いているこのはてなブログでは、ルビを入れてみたところでそこだけ行間が空くことはありません。ここにそのれいを示してみましょうか。青空文庫もぜひこんな風に自然に読みたいものです。

ですが、はてなブログのほうをブラウザのインスペクターツール(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”というテーマを借りてきているのですが、何かすごいカスタマイズをしているのでしょうかね……

sentence.hatenablog.jp


さて、その他にいくつかカスタマイズを入れたのが次のものです。

/* 青空文庫基本 */
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 と指定します。

適用したものが次になります。

f:id:suzusime:20200508180917p:plain
基本CSS適用後

無事、行間が揃いました。

「いくつかカスタマイズ」といったのは次のようなものです。

  • 行長を45文字にした
  • 返り点を少し大きくした
  • 圏点を画像ではなくCSSの標準機能でつけるように変更
    • これが曲者で、青空文庫の標準cssであるaozora.cssでは圏点などの文字装飾を画像で行っています。これは普通に表示するだけならいいのですが、縦書きや黒背景にすると破綻します。
    • 今ではCSSでほとんどの圏点の使い方に対応できるので、そうするように上書きします。
    • が、これがたくさんあって全てに対応するのは面倒なので、今書いたのは普通のごま点だけ。目についたものから上書きしていこうかなと思っています

ダークモード

最近流行のダークモード(黒背景白文字表示)もせっかくなのでやってみました。

/* ダーク青空 */
body {
    color: #eee;
    background-color: #333;
}

img.gaiji {
    filter: invert(1);
}

これを別のユーザーCSSとして保存しておくと、適宜ダークモードの有無を切り替えられます。

コツは真っ黒と真っ白にしないことです。外字は画像なので、CSSの階調反転フィルタで黒背景にします。

f:id:suzusime:20200508183155p:plain
ダークモード

縦書き

縦書きにもしたいですよね。

なんと最近のCSSは縦書きにするオプションがあるので基本はそれでいけます。

/* 青空縦書き */
body {
    writing-mode: vertical-rl;
}

div.main_text {
    max-width: initial;
    max-height: 36em;
}

かんたん!
注意点は、縦書きでもwidthは横方向になるので、行の長さはheightで指定しないといけないことです(方向に依らない「論理プロパティ」というのもあるみたいですが、まだ実験段階のようです)。

これも別CSSにして適宜有効化できるようにしました。

f:id:suzusime:20200508184208p:plain
縦書き

f:id:suzusime:20200508184314p:plain
縦書きダークモード

しかし、一つ問題があります。
縦書きだと横スクロールになりますが、マウスホイールでは横向きにスクロールしてくれないのです。

CSSでの設定で横スクロールするようにできるのかと思ったのですが、どうもCSSではできないようです(なんという片手落ち……)。
JavaScriptでマウスホイールの動作にフックして横向きにスクロールさせる必要があります。

illbenet.jp


ということで、ユーザーCSSだけでなくユーザースクリプトにも手を出しました。
Tampermonkeyで次のようなスクリプトを読み込むようにします(上のサイトで書かれているスクリプトのコピペですが)。

addons.mozilla.org

// ==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です。
ページ区切りのない縦書き表示横スクロールだと、巻物を読んでいるような気分になりますね。

感想

これは結局ちょっとカスタマイズをした程度なので、

www.aozora.gr.jp

で紹介されているような気合いの入ったサービスには敵いません(特に外字周りの処理など)。

縦書き時はダーシや三点リーダの場所が真ん中にならないのも気になります(何故だろう)。

でもWikipediaから飛んだときなんかに気軽にそのまま(普段よりも読みやすい形で)読めるのは便利かなと思いますね(ダークモードがお気に入り)。