縦書き変換JavaScript "h2v.js"、バージョン2.0ができました。

PC版へ 2012年10月10日

さてさて、Webページを簡単に縦書きレイアウトに変換する「h2v.js」です。

大幅な機能追加とパフォーマンス改善を果たした version 2.0.0 ができました。ダウンロードはこちらから。

【特徴】

・従来比２倍速の処理速度。
・今までどおり、IE8 や Firefox 3.x などの古いブラウザにも対応。


【新機能】

・ルビ表記に対応しました。
htmlのRUBY / RB / RT / RP / RBC / RTC タグに対応してみました。

例（たと）えばこんな感じで、縦書き時にもルビを表示（ひょうじ）することができます。

別に何も難しいことを考えずに、普段通りにRUBYタグを使用すれば大丈夫。

h2v.jsに同梱の外部スタイルシートファイル "h2v.css" では、横書き時のルビ表示に関するスタイル設定も行っています。なので、RUBYタグに対応していない古いブラウザで閲覧したとき、横書きレイアウト時でも、おそらく適切なルビが実現出来ると思います。
ルビ周りのスタイル設定に関しては、
→ ルビ表記はユーザスタイルシートで! - 徒書
→ ルビの理想と現実 - 404 Blog Not Found
を参考にさせて頂きました。

・ブロック要素のサイズを絶対値設定しなくても良くなりました。
いままでは、縦書きエリア内のブロック要素のサイズが、 px など、絶対値指定されていなければ、適切な変換が行われない場合がありました。
でもこれからは大丈夫。
％指定だろうが、auto だろうが、綺麗な縦書きに変換します。

・マルチカラムモードとシングルカラムモード。
これまでの、「縦書き変換エリアの横幅を超過した場合は自動的に多段組を行う」という動作に加えて、「一段組で、スクロールバーを表示する」というレイアウトを選択できるようになりました。
→ 多段組のサンプル
→ 一段組のサンプル
変換スクリプトに渡すパラメータに、
multiCols : true または false
を指定することで動作を制御できます。パラメータの詳細は別記事で。

・縦書き変換動作中に『変換中です…』ダイアログを表示します。
ブログ記事ひとつ分くらいの分量であれば一瞬で変換が完了するのですが、多量の文章を変換する場合などは、変換処理に数秒かかってしまいます。

まあこれは、縦書きエリア内の全てのノードを解析する…という動作原理上、致し方ないことなのですが。

その変換処理の間、ブラウザが固まってしまったのではないですよ、JavaScriptが一生懸命走っているのですよ、ということを知らせるために、『変換中です…』というダイアログを表示するようにしました。

パラメータ
splash : true または false
で、ダイアログを出すか出さないかを制御することができます。
・その他、動作不具合を改善。


…ということで、詳しい説明の準備が整うまで、もう少しだけお待ちください。

関連記事

コメント

現在、コメント機能は停止しています。