一発芸：縦書き段組レイアウトのためにテキストを分割

2015/9/26 [15:38:08] (土)

Firefox41がようやく縦書きに対応したのでこれからは遠慮なく縦書きを使える、すばらしい、というネタの続き。
WEBブラウザでの縦書き表示のあるべき姿について。いや、横書きでいいというひとにとっては意味のないネタ。


縦書きの場合、テキストをそのままブロック要素に流し込むとスクロールとなる。

これはありえない。
・文字が切れるのをコントロールできない。
・ページは縦にスクロールして見てるのに、なんでここだけ横スクロール。

ということで、前回も書いたように、縦書きでは段組でレイアウトされるのが正しい。

(※どうやら今日時点、Firefoxは縦中横が効かないので「!?」がひっくり返っているけど、ChromeやSafari、IEは問題なし)

で、これがちょっと面倒くさい。
１段落に入る字数と行数によって、どこで次の段落に移動するのかを確認する必要がある。これはやっぱ面倒くさい。
スクリーンショットでいうと「家屋が」で段落が終了して、次の段落が「かしぐ」から始まるというのを判断して段落を分けなきゃいけない。

なもんで、字数行数改行をチェックして文字数を数えて段落単位でテキストを分割するスクリプトを書いた。

[10/02 11:22:44]追記
CSS3のmulti columnを使えばそのまま文字通り段組が実現できる。N字xN行ではなくて、画面幅やテキスト量で柔軟に表示してくれるので、webは本来このCSS3のマルチカラムを使うべき。
版面というかN字xN行のレイアウト表示で見せたい場合にこのスクリプトの出番(css3の完全リフローとは少し違って、N字xN行の箱に入る分のテキストの塊を作るイメージ)


ルビや縦中横に関しては、テキストにHTMLでタグづけされてれば生かす。
でも、わたしは素人のヘタレなので制約はあって。文字数を数えるために。
縦中横の指定のない半角の数字と、半角のアルファベットや記号類は全角に変換。
また、なんちゃって禁則でバグくさいところがある。


https://t2aki.doncha.net/tmp/dangumi-sample.pl
(例によってここは直リンクできないのでこちらからどうぞ)
↑ここでテキストや字詰め行数を入力すると、縦書き段組表示用に分割されたテキスト(縦書き用のスタイルシート付き)のHTMLが手に入ります。

テキトーにテキストを放り込んで試してみてください(わたしはこれで表示の調整をしてました)

縦(字詰め)、横(行数)を確認して縦書きサンプルとして、ブログなどにコピペしてご利用いただければ。

『創作文芸見本誌会場HappyReading』 に登録した立ち読み用のテキストなど、ご自分のサイト、ブログで縦書き表示して読者さんに希求できると思います。
(※HTMLが編集登録できるブログ限定でしょうか)

小説は縦で読んでもらおうず！

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら