【縦書き】h2vR.jsの大幅な改修をしようと思います。

さて、「ウェブページで縦書き表示」に取り組み始めてから早、10年。

→ h2vR.js - 縦書きを実現するJavaScript - tategaki.info

"スタイルシートで強引に縦書き" → "JavaScriptで華麗に縦書き" という過程を辿りつつ縦書きレイアウトをサポートしてきたわけですが、時代は進み、現在の主要ブラウザは、

writing-mode: vertical-rl;

というスタイルを適用することにより、簡単に文章の縦書き表示が可能になっています。

→ writing-mode - CSS | MDN

すこし前までは「writing-mode: vertical-rl; を指定した要素内に別のブロック要素を配置すると表示がおかしくなる」などの不具合もあったりしたのですが、現在は解消済み。ルビも問題なく振れるし、実用に耐える実装に近づいているのではなかろうか。

JavaScriptでレイアウトをこねくり回すよりも、ブラウザ標準の機能でレンダリングしたほうが当然、表示も高速です。そろそろh2vR.jsもお役御免の時期ではないか…と思ったのですが。

h2vR.jsがいまだに持っているアドバンテージ。

  1. 多段組レイアウトが容易。
  2. 行の文字数指定が容易。
  3. 日本語禁則処理（特に「ぶら下がり」）が割とまとも。

特に(1)。要素の横幅を超えて縦書き文章が長々と続く場合、自動的に折り返して多段組レイアウトになってくれたら嬉しいのに、ブラウザ標準ではそんなことはしてくれない。

スタイルシートの overflow プロパティの設定に依存して、横幅が際限なく拡がっていったり、横幅固定で横スクロールバーが表示されたり、はみ出た部分をクリップして非表示にしたりします。

例えばこの領域は、横幅を200pxに固定しています。

ブラウザの標準機能ではなく、拙作スクリプト・h2vR.jsを利用して縦書きにしているのですが、うちのスクリプトは、横幅を超えて縦書きが続いてゆく場合には、このように段送り処理が行われて、自動的に多段組レイアウトにすることが可能です。

こちらは

writing-mode: vertical-rl;による縦書きです。

overflow: hidden; を指定しているので、このままダラダラと書き続けていると、指定した横幅200pxを超えたらクリップされてしまいます。

"writing-mode: vertical-rl;" で縦書きにする場合には、縦書き要素の幅などを事前に計算した上でかっちりとしたスタイル指定をしてやらないと、満足のゆくページデザインにならない可能性が大です。

うん。まだまだJavaScriptに頼ったほうが楽なコーディングができそうだ。というわけで、

  • 基本的に "writing-mode: vertical-rl;" を用いて、ブラウザ標準機能で縦書きレイアウトにする。
  • 領域の横幅をはみ出す場合はJavaScriptで自動的に多段組にすることも可能。
  • その他、日本語禁則処理の表示をJavaScriptでアシストする。

…という感じ、つまり「ブラウザ標準機能の未だ足りない部分を補う」という方針でh2vR.jsを大幅に作り直すことにします。

もちろん、以下のポイントを押さえることは大前提です。

  1. これまでに書いた html を書き直す必要の無いようにする。
  2. 見栄えをこれまでと同等にする。
  3. ブラウザ互換性を担保する。

ブラウザ互換性については、そろそろInternet Explorerや旧Microsoft Edgeは無視でよかろう。これも時代の流れ。

ぼちぼち改修に取り掛かります。気長にお待ちください。進捗状況はこのブログで。

カテゴリ:

タグ: