HOME > > > jqueryを使って縦書きのレイアウトにする

jqueryを使って縦書きのレイアウトにする

文字を縦書きにする

jqueryで文字を縦書きにする

Webと言えば左から右へ読んでいく横書きが通常ですが、縦書きもいいものです。
ただ今まではcssでごまかしごまかし縦書きにしていたのでなんだが文字列が汚いし、ブラウザによるし。ページ全体を縦文字にすると対処も面倒で大変でした。
こちらのjqueryではかなり綺麗に縦書きレイアウトが実現できます。

ファイルをダウンロードします

配布ファイルのダウンロードはこちら

ファイルはこちらの「h2v.js : Webページを縦書きレイアウトに変換するJavaScript」さんで配布しています。

設置方法

設置方法の手順をご説明します。

サンプルはこちら

ドキュメントに読み込む

ダウンロードしたファイルの中に「h2v.js」「h2v.css」があるので、ドキュメントを読み込んでください。

<link rel="stylesheet" type="text/css" href="css/h2v.css">
<script type="text/javascript" src="h2v-min.js" charset="utf-8"></script>

IEでも正しく表示させるために

IE8以上を対応する場合、こちらのmetaを記述してください。
互換表示モードに関わらず、正しく表示されます。

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

縦書きにする部分をdivで囲みます

縦書きにしたい部分をdivで囲み、idを振ってください。

<div id="box_1">~</div>
<div id="box_2">~</div>

パラメーターを設定します

box1、2それぞのパラメーターを記述しました。
htmlソース上に設置してください。

<script>
h2vconvert.init( { 'box_1' : { 'bar':true,'showcredit':false,auto:true,lineInterval:0.8,fontsize:'14px',chars : 20,splash:false } ,
'box_2' : { 'bar':true,'showcredit':true,auto:true,lineInterval:0.8 ,chars:20,fontsize:'14px',splash:false}});
</script>

完成

以上で縦書きレイアウトができました。

記事参考・ファイル配布

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

参考にさせて頂きました。ありがとうございました。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.02.26