ようこそ、縦書きの世界へ!

 自分で作っておいて言うのもなんですが、現在こちらで紹介している「縦書きCSS」+「横→縦変換スクリプト」、結構面倒くさいでしょ?

 というわけで、作ってみました。

JavaScriptで書いてみたのですけれど、この h2v.js と専用スタイルシート h2v.css をページに読み込んでおけば、後は
  • 普通に(横書きレイアウトで)htmlコーディングして
  • このスクリプトで変換をかけるだけ。
横書きレイアウト時のデザインをできるだけ残しつつ、縦書きに変換してしまうのです。

ここをクリックすると、オリジナルの横書きレイアウトを確認できます。(横書き表示されたならば、もう一度クリックして縦書きレイアウトに戻すこともできます)
 劇的に手間要らずになった縦書きWebページ。

 あなたも導入してみませんか。

さまざまなスタイルが、どのように横→縦変換されるのか、こちらのデモページで確かめてみてください。
以下の文章の縦/横を切り替えるにはここをクリック。

更新情報

Aug 08 , 2011:バージョン 1.3.4
  • IE 8におけるブロック要素の表示位置に関する不具合を修正。

Aug 05 , 2011:バージョン 1.3.3
  • ブラウザのバージョン判定の不具合を修正。
  • パラメータ "rotate" の廃止。

Aug 04 , 2011:バージョン 1.3.2
  • 要素に設定された margin の値が正しく適用されない不具合を修正。
  • 矢印記号(↑↓)の向きが正しく変換されない不具合を修正。


これより古い更新情報はこちらを参照してください。

It's Easy!

導入は簡単です。
  • h2v.js と h2v.css を読み込む。
  • 縦書きにしたい部分を id を指定した<div> で囲む。
  • 必要であれば各パラメータの設定をする。
  • それだけ。
以下にサンプルを示します。
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="h2v.js" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="h2v.css">
  <script type="text/javascript">
   /* パラメータの設定 */
   var params ={ 'tategaki' : { 'fontsize' : '14px' ,
                'chars' : 28 ,
                'lineInterval' : 0.6 ,
                'auto' : true
             }
   };

   /* 初期化 & コンバート */
   h2vconvert.init( params );
  </script>
</head>
<body>
  <!-- お好きなように htmlコーディング -->

  <div id="tategaki">  <!-- このdivで囲われたエリアを縦書きに変換 -->

   <!-- お好きなように htmlコーディング -->

  </div>  <!-- ここまで、縦書きに変換されます -->

  <!-- お好きなように htmlコーディング -->

</body>
</html>

Features

  • 元(横書きのとき)のスタイルをできるだけ忠実に縦書きにコンバートします。
    フォントサイズ、マージン、パディング、ボーダー、改行、色指定などを適切に処理します
  • 同一ページ内で複数の縦書きエリアを指定することが可能。
    それぞれのエリアごとにパラメータの設定ができます
    設定可能なパラメータは…
    • エリア内の表示フォントサイズ
    • 一行あたりの文字数
    • 行間スペース
    • 縦書きエリアの横幅
    …など。
  • ページを読み込んだときに自動的に縦書き変換するかどうかの設定が可能。
  • クロスブラウザで動作。主要なウェブブラウザで正しく動作します。
    Firefox 3.5+ , Safari 3+ , Google Chrome , Internet Explorer 8+ , Opera10+ , Android Browser
設定の詳細、制限事項など、こちらのページをご覧ください。

Download

Downloadページからどうぞ。

License

非営利の個人・団体に限り、非営利目的での使用・改変・再配布が可能です。詳細はLicenseページをご覧ください。