【縦書き】h2vR.js、 ver4.1.0。縦/横切り替え機能を復活させました。

ウェブページで縦書きを実現するJavaScript・h2vR.js です。

暫く前の記事のコメント欄で、こんなやりとりをしました。

h2vR.jsって縦横変換ボタンはついてないんですか？
付いていないです。もう完全に「縦書き」で表示することしか頭にない造りにしてしまいました。

この「縦書き表示と横書き表示を切り替える」という機能、正直「必要ないのかな」と思っていたのですが、このような質問が来るということは必要となる場面もあるということ…と思い直して、復活させてみました。

h2vR.js バージョン4.1.0 のダウンロードは以下から。

h2vR410.zip には、以下のファイルが含まれています。

  • h2vR.js … スクリプト本体
  • h2vR.css … h2vR.js用のスタイルシート
  • h2vR_extensions.js … 縦横切り替え機能を追加するためのエクステンション

設定方法

  • ウェブページに、h2vR.css、h2vR.js および h2vR_extensions.js を読み込む。
  • 縦書き領域を設置。縦書き領域に id を振っておく。例えば…
    <div class="h2vr_20 h2vr_thru" id="tate">
      <!-- この div 内が縦書きになります。-->
      <!-- class に h2vr_thru を指定しておくと、ページロード時には横書きのまま表示されます（ver4.1.0の新機能） -->
     </div>
    ※ 設定方法について、詳しくはこちら。
  • 縦横切り替えボタンを設置。これにも id を振っておく。例えば、
    <span id="switch" style="border:1px solid red;">縦横変換</span>
  • ボタンにイベントリスナを登録。ボタンクリック時に、関数 h2vR.switcher( id ) が呼び出されるようにします。引数の id は、縦横切り替えを行いたい縦書き領域の id です。
    <script>
    document.getElementById( 'switch' ).addEventListener( 'click' , function(){ h2vR.switcher( 'tate' ); } ,false );
    </script>
  • ボタンをクリックするたびに、指定した縦書き領域の「縦書き」「横書き」が切り替わります。

ということで、以下に設置した『縦横変換』ボタンをクリックするたびに、この記事が縦書き→横書き→縦書き…と切り替わります。お試し下さい。

縦横変換

カテゴリ:

タグ: