私のパソコン雑記帖
縦書きウェブ
カテゴリー： PC一般
03Nov2013
ウェブ上では横書きが一般的ですが、縦書きのあじわいが欲しいこともあります。電子書籍などはその典型ですが、私の場合、古文書の解読文をウェブで扱いたい要望があった時に特にその必要を感じました。
古文書の解読文は、左側に寄せるレ点など漢文の要素と右側に寄せる文字要素を含みますから複雑です。以前LaTeX 古文書エディタというページを公開していましたが、ややこし過ぎたきらいがありました。加えて古文書の書起し文をウェブで扱いたいというようなニーズには必ずしも適切でなく、改めて方法を探ることになりました。
縦書きはスタイルシートで指定することが出来ます。プロパティー writing-mode: tb-rl; （top-to-bottom right-to-left の意）です。しかしこのプロパティーはマイクロソフト独自の定義で Windows 環境下でしか有効でありません。やはりブラウザーに依存しない方法が望まれます。
ネット検索すると縦書きを実現する JavaScript をいくつか見つけることができました（主要ブラウザーで有効）。結局、これをもとに古文書の書起こし文をウェブで扱ってみることにしました。
縦書きを実現する JavaScript
次の3点が見つかりました。竹取 JS H2V JS Nehan JS
比較して使用目的に最も適っていたのは「竹取 JS」、以下このスクリプトを用いて実装しました。
縦書き実装例
縦書き実装例 ⇒ 下図のような表示になります。
上記「縦書き実装例」から容易にソースコードを入手できます。以下すこし補足します。
JavaScript の設置
竹取サイトからスクリプトをダウンロード・解凍します。taketori.js と taketori.css が入った taketori_js というフォールダ得られます。これを任意の場所にアップロードします。
ウェブページでの指定
<header></header>間に次の記述をします。
<script type="text/javascript" src="./taketori_js/taketori.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
(new Taketori()).set({lang:'ja-jp',fontFamily:'serif',height:'25em',multiColumnEnabled:'false',
gap:'1em',togglable:'true'}).element('tate').toVertical();
//]]>
</script>
最初は実行ファイル takegai.js へのパス。次は各設定項目、ほぼ自明ですが、竹取サイトの解説参照。大事なのが element の指定（ここでは tate）、本文で縦書きしたい箇所に id="tate" を指定することで、縦書きが実現します。element はカンマで区切って複数指定できます。
縦書き構文
次のように本文 div に id="tate" を指定しています。
<body>
<div class="top">縦書き古文書例</div>
<div id="tate" class="main" style="width:520px;">
（縦書き文章）
</div>
<div class="bottom">copyright message</div>
</body>
ここで本文 div の幅が 520px になっていることについて。ヘッダーもフッターも幅 800px にしていますから、本文も幅 800px にして縦書き文書を中央配置したいのですが、それが出来ません、全部右寄せになってしまいます。ページ幅全体にわたる文書の場合は問題ありませんが、文章の幅がそこまで及ばない時に中央配置が出来ないのは、縦書き JavaSceipt に共通の課題のように思います。実際は本文 div の幅を文章量に合わせて調整して、その div を中央配置する手段をとっています。仮に調整した幅が足りないときは下にスクロールバーが表示され左右に移動できるので、余り厳密に考える必要はないと思います。
色々な文章様式
縦書き実装例に使われている様式を説明します。
【例一】の送り仮名は <ruby><rb>元字<rt>ふりがな</ruby> で実現できます。送り仮名は【例二】～【例五】にも共通して使えます。
【例二】の助詞は <sup></sup> で実現できます。古文書では「者」「江」「茂」「而」は本来の意味を離れて助詞として使うことがあります。
【例三】の合字「ヨリ」は古文書でよく見かけます。システムフォントが備わっている環境では10進コード ゟ と入力することで表示されます。システムフォントが備わっているとは限らない環境では画像で補うのが確実です。当例では画像を用いています。
【例四】の漢文要素（レ点、一点、二点）は <sub></sub> で実現できます。
【例五】の（レ点、一点の会わせ）は <sub>一レ</sub>で実現できますが、文字間隔の調整などが必要になります。
古文書を扱うときのフォントは serif（明朝系）が望ましいと思います。漢数字の「二」とカタカナの「ニ」、漢数字の「八」とカタカナの「ハ」など sans-serif（ゴシック系）では判別しにくいことがあります。