• RSS

[JS]テキストを縦書きにできるJavascript「h2vR.js」の使い方

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

テキストを縦書きにできるJavascript「h2vR.js」のご紹介です。

ファイルも軽量でjQuery不要で使えますし、ちょっと縦書きにして表示したいテキストにピンポイントでクラスを付与するだけなので、CSSでも縦書きの指定ができますが個人的にはh2vR.jsを使う手もありかなと思います。

h2vR.jsのダウンロード

以下のページよりh2vR.jsのファイル一式をダウンロードします。
テキストを縦書きにできるJavascript「h2vR.js」の使い方

h2vR.jsの使い方

ダウンロードしたh2vR425.zipを解凍して、h2vR.cssh2vR.jsのファイルを読み込ませます。


あとは、縦書きにしたい要素(テキスト)に対してh2vr_数字のクラスを指定します。

数字は縦方向に並ぶ文字数です。h2vr_20にすると20文字、h2vr_30にすると30文字となります。


行間や単語間のスペースの調整

そのままテキストを縦書きにすると行間が詰まって見えるので、CSSで調整すると見栄えが良くなります。また、単語間に若干スペースを設けたい場合も、CSSでスタイルを指定してあげてください。

h2vr_数字の値を変えたデモと、行間や単語間の調整したデモを以下にアップしていますので、こちらでも是非参考にしていただければと思います。
h2vR.jsのテキスト縦書きデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください