トップページ > com/net > [底] 小説の縦書き表示

[底] 小説の縦書き表示

 最近、pixiv のブラウザ版で、小説の縦書き表示が実装されました。元々日本語の小説は本なら縦書きが一般的なのですが、元々英語圏で開発されたパソコン上で縦書きを扱うのはまだまだしちめんどくさいのです。で、pixiv ではどんな風に実装しているのかをスタートに、自分なりに縦書き表示ができないものかと調べてみました。

 結論から書くと、pixiv の縦書きの基本的な部分は CSS 3 で実現しているということがわかりました。CSS というのは Web ページの見た目を変更する仕組みで、CSS 3 ではかなり複雑なことができるようになっています。私が Web サイトを自力で組んでいた頃はまだ CSS 3 なんてなかったので、今回使った要素も初めて使うものが大半でした。

 pixiv で実装されている要素のうち、真似ができたのはこんな感じです。

  • 縦書き表示 …… -webkit-writing-mode:vertical-rl、direction:ltr、unicode-bidi:bidi-override
  • 小説の表示エリアからはみ出さない …… width:100%、overflow:auto
  • フォントをきれいに表示する …… font-family:Meiryo

 ここでキモになるのが -webkit-writing-mode。これを vertical-rl にすることで右から左に読む縦書き表示モードになります。direction と unicode-bidi はどちらも文字の方向を決めているのですが、これはどうやら指定しなくても適切な方向にデフォルトで設定されるみたいです。試しに逆にしてみてもうまくいきませんでした。

 しかし、-webkit-writing-mode を指定しただけでは、縦書きになった日本語が画面右側に思い切り延びていきます。これを防ぐために、widthoverflow を指定します。width は横幅を指定するもので、これを % で指定すると、親要素、ここでは小説の表示エリアを 100% として実際の表示範囲を決めることができます。これで 100% とすると横幅一杯になりますし、例えば 90% くらいにすると、右側に1割ほど余裕ができます。
 しかしこれだけでは収まりきらない部分が見えません。そこで、追加で overflow を指定します。こいつは指定した範囲から中身がはみ出した時にスクロールバーを出すかどうかを指定するもので、auto に指定するとはみ出している方向のスクロールバー(縦書き表示の場合は横スクロールバー)だけが表示されます。
 最後のフォントをきれいに表示するというのは、たまたま私のブラウザの指定では鉤括弧が次の文字にくっついてしまうフォントを使っていたので、pixiv を参考にメイリオを優先的に使うように指定しただけです。これは私の環境が Windows 7 だからで、Mac だったらヒラギノとかを指定するとよいと思います。Web で公開するなら両方指定しておいて、ある方で表示するようにするのが無難ですね。

 さて、ここまでができたこと。次にできなかったことです。

  • スクロールバーをクリックするまで表示しない …… jQuery プラグインの nicescroll を使用しているみたいです
  • マウスカーソルが縦書きの範囲にある時にホイールを回すと左右にスクロールする …… これも nicescroll です
  • 左右の矢印をクリックすると一定行スクロール …… 正体不明

 特に3番目の矢印をクリックすると一定行スクロール。これができると、ページめくりに近いことが実現できます。これは CSS だけで実現するのは無理なので JavaScript を使っていると思いますし、スクロールバーに nicescroll という jQuery プラグインを使っていることを考えれば、同じ jQuery プラグインの何かを使っているか、jQuery をベースに自力開発したかのどちらかだと思いますが。これはちょろっと試してみる程度では無理で、ちゃんとファイルをいじる必要があるので手を出していません。
 しかし、2番目のホイールで左右のスクロールができると大幅に読みやすくなるので、nicescroll を導入するだけでも意外と実用レベルの縦書き表示は難しくないかもしれません。
 そして、縦書きじゃなくて横書きの方がいい、という方のために切り替え機能を作る必要もあるので、JavaScript で CSS の指定を動的に切り替えるというボタンを作ることになりますが、これは難しくなさそう。実際、お気に入りをクリックすると背景色を変える、というスクリプトを書いたことがあるので、同じことを -webkit-writing-mode に対して行うだけです。

 ただし、一番大きな問題は、Firefox が対象外だということ。Chrome 系ブラウザーや Opera、Safari は大丈夫で、Internet Explorer も別の要素を指定する必要はありますが対応は難しくありません。しかし Firefox は writing-mode に対応していないので肝心の縦書きがそもそも実現できないのです。

 ちょっと余裕がある時かちょっと余裕がない時に、やってみますかねぇ。せっかく小説メインのサイトなのですし。

コメント:2

zonuexe 15-06-13 (土) 15:02

6/23前後にリリースされる見込みのFirefox 39では縦書きサポートされますよ

alohz 15-06-20 (土) 23:38

zonuexe さん、コメントありがとうございます!
確かにリリース・ノートにも writing-mode の縦書きがサポートされると書かれていますね。
https://developer.mozilla.org/ja/Firefox/Releases/39
リリース版ではデフォルトで無効になってるみたいですので about:config での変更が当面は必要ですが、これで一応 Windows/Mac の主立ったブラウザーが縦書きに対応することになりますね。

コメントフォーム
この情報を記録しますか?

トラックバック:0

この記事のトラックバック URL
http://third.system.cx/wordpress/wp-trackback.php?p=445
トラックバック元のサイトへのリンク
[底] 小説の縦書き表示 from the third place -5th take-

トップページ > com/net > [底] 小説の縦書き表示

サイト内検索
紹介

管理人:春屋アロヅ(alohz)
連絡先:alohzhgmail.com
詳細、サイトについては諸々の紹介から。

最近の記事
カテゴリー
昔の記事
外部コンテンツ

ページの先頭に戻る