CSSの「writing-mode: vertical-rl;」を使って青空文庫の縦書きビューワを作った
なんぞこれ
青空文庫を縦書きで読むためのビューワです。
インストールなどは不要で、読みたい本のXHTMLファイルのURLをhttps://www.aozora.gr.jp/〜からhttps://縦書きで読む青空文庫.jp/〜に変えるだけでOK。
例えばゴーゴリの『鼻』であれば、https://www.aozora.gr.jp/cards/000207/files/372_22448.htmlをhttps://縦書きで読む青空文庫.jp/cards/000207/files/372_22448.htmlに変えると縦書きで表示されます。
なんでつくったの
スマホなどの画面の小さな端末では、従来の青空文庫の縦書きビューワのような「ページ送り」ではなく、一般的なWebページのように「スクロール」の方が見やすいのではと考えていました。
かといってサードパーティのアプリなどはインストールが手間です。
そんな思いを抱えていたところ、CSSの「writing-mode: vertical-rl;」など、かねてから気になっていたCSSで縦書きするためのプロパティがおおよそのブラウザで動くようになったらしいと知ります。
これを使ってなにか作りたいな〜という思いと「こんな感じの青空文庫の縦書きビューワが欲しい」という思いが重なり、完成しました。
仕組み
「縦書きで読む青空文庫」にアクセスすると、青空文庫から該当するXHTMLを取得し、本文などを抜き出して縦書き表示のHTMLを生成します。
単純にCSSを追加するだけでもよい気はしますが、青空文庫のXHTMLの文書構造がCSSを当てることをあまり意識せず作られているようなので、いろいろいじることにしました。
バックエンドはPython + Flaskで、Beautiful Soupとrequestsを使ってスクレイピングしています。
フロントエンド（というほどのものでもないけど）は素のCSSとJavaScriptで書きました。もっと大規模になってCSSの管理が辛くなってきたらいろいろ入れるかもしれませんが、Python側さえ環境を整えればflask runですぐ動くメリットの方が今のところ大きいです。
上記のソースコードのうち、縦書きCSSを見たい方はtemplates/template.j2、スクレイピング部分やFlask部分を見たい方はapp.py、トップページのHTMLを見たい方はstatic/index.htmlを見てください。
CSSで縦書きする参考資料
まずは「縦書きWeb普及委員会」を隅から隅までじっくり読みましょう。
以下の記事も読んでおくと「不可解な挙動」がなぜ起きているのか推察できるようになるかもしれません（できるとは言ってない）。
あとは以下のプロパティも設定しておくといいでしょう。
text-align: justify;をつけるといい感じに上下が揃ってくれます。
- font-feature-settings - CSS: カスケーディングスタイルシート | MDN
- line-break - CSS: カスケーディングスタイルシート | MDN
- hanging-punctuation - CSS: カスケーディングスタイルシート | MDN
このくらい読んでおけば、難しいことをしないかぎり意図したとおりに表示されるようになるでしょう。
今後
とりあえず作ってリリースしただけなので、まだ対応できていない機能がたくさんあります。
- 画像で実現されている横書き外字の縦中横（漢字などはちゃんと縦書きになります）
- 数字の縦中横（
text-combine-upright: digits 3;が主要ブラウザではまだ未実装なので、地道に<span class="combine"></span>で囲うしかないけど、単純な文字列置換ではダメなので意外と面倒） - 「：」の縦書き（
text-orientation: mixed;で縦書き表示される気がするけど、されてない） - フォント名・サイズの変更（自分は「しっぽり明朝 B1」が好きだけど、変えられるようにしておきたい）
- その他のエッジケース
自分が使いやすいものを作ったので、使っていくうちに「ここはこうしたいな」という部分が出れば適宜改修していきます。
他にも「こんな機能があると嬉しい」などありましたらぜひ教えてください。
Discussion