<!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>