縦書きJavaScript "h2v.js"、文章のセンタリング / 右寄せに対応してみた。

さて、Webで縦書きレイアウトを実現する "h2v.js" です。

　　→ h2v.js - Webページを縦書きレイアウトに変換する JavaScript

新バージョン 1.7.0β では、文章のセンタリング（中央寄せ）と右寄せ（縦書きになるので実際は下詰め）が出来るようになりました。

とりあえず、サンプルを。


これがノーマル、つまり左寄せ。
改行なしで一行の文字数を超えると、もちろん自動的に行送りされますな。

この部分は文章のセンタリング。

text-align : center ;

を適用しています。一行の文字数を超えると、当然、次の行に送られて、その行も中央揃え。
センタリング、ここまで。

そして右寄せ…というか、縦書きなので下詰め。
スタイルに text-align : right ; を指定しています
一行の文字数を超えると、こちらも当然のように次の行に送られて、その行も下詰め。
はい、ここまで。
—というわけです。

IE 8 / 9 での動作検証が不十分なので（いちおう簡単な動作チェックは済んでいます）、とりあえずベータ版という事で。

文章のセンタリングを行う時は、その文章の親ブロック要素に
<div style="text-align: center;"> 〜 </div>
あるいは
<p style="text-align: center;"> 〜 </p>
などと text-align を使ってスタイル指定してやるのが作法なのですが、一部の htmlエディタなどでは、古くからある <center>〜</center> タグで中央揃えを行います。

<center>は現在 "非推奨タグ" ではあるけれど、過去との互換のために今でもちゃんと認識してくれます。なので、h2v.js も、<center>タグを正しく認識して中央揃えを実行します。


さて、バージョン 1.7.0 では、このほかにも大幅な機能の改善を図っています。今まで悩まされてきた不具合の多くが直っている筈。くわしくは、こちらの記事でどうぞ。

 

カテゴリ:

タグ: