最近の若い人達では、縦書ではなく、横書が主になっているようで、
年賀状や、結婚式の受付の記帳なども横書きになっていたりするとか。。。
なんでも縦書だとバランスが取れなくて、バラバラになってしまうです。

そんなこんなで、縦書の美しさを普及するために(特に縦書が好きってわけではないですがww)、
今回は、テキストを自動的に縦書にしてくれるjavascriptのプラグインを紹介したいと思います。

その名も「竹取.js」というものです。

プラグインのサイトは以下のURLです。

竹取 JS

簡単なデモサイトを作ってみましたので、
よろしければご覧ください。

DEMO
(chromeでご覧ください。)

使い方はシンプルで簡単なんですが、
レイアウトが難しい感じでした。
横と縦の捉え方がこんがらがって混乱しながら作っていました・・・笑

竹取.jsの使い方

まずは、ダウンロードしたファイルを読み込みます。

XHTML

<link rel="stylesheet" href="css/taketori.css" > <script src="js/taketori.js"></script>

1 2	<link rel="stylesheet" href="css/taketori.css" > <script src="js/taketori.js"></script>

あとは、

JavaScript

<script type="text/javascript"> //<![CDATA[ //(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか); //DEMOは以下のように設定しました (new Taketori()).set({fontFamily:'serif',height:'auto'}).element('msg','nav','logo').toVertical(); //]]> </script>

1 2 3 4 5 6 7

<script type="text/javascript"> //<![CDATA[ //(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか); //DEMOは以下のように設定しました (new Taketori()).set({fontFamily:'serif',height:'auto'}).element('msg','nav','logo').toVertical(); //]]> </script>

とすればOK!

エレメントを複数指定できるようです。
設定がいろいろありますが、全部把握できておりません。。。

設定は、サイトをご覧下さい。

竹取 JS

縦と横との切り替えを簡単に設定できたりするようです。

縦書は和風のようなデザインに適していると思います。
他にも小説のようなテイストにもできますし、
使うシーンはいろいろありそうですね！