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

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

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

writing-mode: vertical-rl;

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

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

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

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

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

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

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

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

こちらは

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

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

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

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

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

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

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

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

freefielder.jp