[katyos.Lab]


Webサイトのテキスト(文章)を縦書き表示にする方法

2010-07-07 11:34:45 Theme: jQuery の小技
$本を買わずに解決するWeb制作の小技-Webサイトのテキスト(文章)を縦書き表示にする方法

前からWebで縦書きは、スタイルシートで縦書きにすることはできたのですが
通常は横書きです。
Internet Explorer5.5以外のブラウザでの表示が保証されないなどの問題があるので
使えませんでした。

しかし、これを解決する方法がでましたビックリマーク
指定した要素を縦書きにすることができます。

ホームページを縦書き化するツール「竹取 JS」
「竹取JS」は、指定されたブロックを縦書き表示に変換する JavaScript です。InternetExplorer5.5 以降に実装されている「writing-mode: tb-rl;」相当の表示を主要ブラウザで再現します。

対応ブラウザ
InternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+
縦書き対象言語
日本語・中国語・韓国語

使い方
<script type="text/javascript" src="taketori.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
(new Taketori()).set({設定項目:値,設定項目:値}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);
//]]>
</script>

ライセンスはMITライセンスです。


和風のデザインとか旅館などのサイトで文章を縦書き表示をしたくて
画象で対応していた部分もこれで簡単に実現できますね。

PR

Comments

[Publish Your Comment]

Add your comment

[PR]気になるキーワード