このサンプルを表示する
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
 <title>コーディング例</title>
<style> /* h2v.css 以外のスタイルシートの適用も、もちろん可能 */ body{ width:550px; line-height:1.5em; } .addition{ margin:0.5em; padding:0.5em; font-size:80%; color:#777; border:1px dashed orange; } </style>
<link rel="stylesheet" type="text/css" href="h2v.css"> <script type="text/javascript" src="h2v-min.js" charset="utf-8"></script> </head> <body> <h1>縦書きのサンプル</h1> <p>  ここは縦書きエリア外なので、普通に横書き表示されます。 </p> <div id="tate">  <h2>ここは縦書きエリアです</h2>  指定したパラメータに従って、このエリアが縦書きに変換されます。<br /> <div class="addition">  縦書きエリア内でも、このようにスタイル指定は有効です。ほぼすべての HTML タグも、特別なことを意識すること無く使用できます。 </div> </div> <p>  ここも縦書きエリア外なので横書き表示。<br />h2v.js は、縦書きに指定したエリア外には全く影響を及ぼしません。 </p> <script type="text/javascript">
/* 縦書きエリア "tate" に対して、 フォントサイズ:16px, 行間スペース:0.8文字分、 一行あたり:15文字、 ページロード時に自動変換しない という値を設定します。その他、指定していない値はデフォルト値が適用されます。 */
var params = { 'tate' : { 'fontsize' : '16px' , 'lineInterval' : 0.8 , 'chars' : 15 , 'auto' : false } } ; h2vconvert.init( params );
/* h2vconvert.init( )を呼び出す位置は、header 内でも body 内でもお好きなように。 ただし縦書きエリア内に script タグを置くと誤動作する可能性があります。 */
</script> </body> </html>