テキストを縦書きにできるJavascripth2vR.jsのご紹介です。
ファイルも軽量でjQuery不要で使えますし、ちょっと縦書きにして表示したいテキストにピンポイントでクラスを付与するだけなので、CSSでも縦書きの指定ができますが個人的にはh2vR.jsを使う手もありかなと思います。
h2vR.jsのダウンロード
以下のページよりh2vR.jsのファイル一式をダウンロードします。
http://tategaki.info/h2vr/
h2vR.jsの使い方
ダウンロードしたh2vR425.zipを解凍して、h2vR.css、h2vR.jsのファイルを読み込ませます。
|
1 2 |
<link rel="stylesheet" href="./h2vR425/h2vR.css"> <script src="./h2vR425/h2vR.js"></script> |
あとは、縦書きにしたい要素（テキスト）に対してh2vr_「数字」>のクラスを指定します。
|
1 2 |
<p class="h2vr_10">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p> |
「数字」は縦方向に並ぶ文字数です。h2vr_20にすると20文字、h2vr_30にすると30文字となります。
行間や単語間のスペースの調整
そのままテキストを縦書きにすると行間が詰まって見えるので、CSSで調整すると見栄えが良くなります。また、単語間に若干スペースを設けたい場合も、CSSでスタイルを指定してあげてください。
|
1 2 3 4 5 6 7 8 |
<style type="text/css"> p { line-height:1.5em /*行間の調整*/ letter-spacing:0.5em /*単語間のスペースの調整*/ } <p class="h2vr_10">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。 またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。</p> |
h2vr_数字の値を変えたデモと、行間や単語間の調整したデモを以下にアップしていますので、こちらでも是非参考にしていただければと思います。
h2vR.jsのテキスト縦書きデモ
コメント