「竹取JS」について

概要

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

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

使い方

設置

下記2ファイルを同じ階層にアップロードします。

縦書き指定の概略

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

設定項目

lang
言語を明示的に指定します。
'ja-jp'
表示を日本語環境に最適化します。
'zh-tw'
表示を中国語-台湾(繁体字)に最適化します。
fontFamily
縦書き表示時のフォントを設定します。
'serif'
明朝系フォントで表示します。
'sans-serif'
ゴシック系フォントで表示します。
'cursive'
行書体系フォントで表示します。
'kai'
楷書体系フォントで表示します。
height（'文字数em'|'高さpx'|'width'）
縦書きブロックの高さ / マルチカラムが有効の場合は一段の高さ(column-width) / width=親要素の幅を高さとする
maxHeight（'文字数em'|'高さpx'）
最大の高さ（height が指定されていないとき、この値を越えない範囲でウィンドウサイズに合わせて高さを調整します。）
multiColumnEnabled
マルチカラムを有効にするかどうか設定します。
false（初期値）
マルチカラムを無効にします。
'auto'
マルチカラムに十分に対応したブラウザではマルチカラムを有効にします。
true【非推奨】
マルチカラムに対応していないブラウザでも疑似的にマルチカラムを再現します。ただし現状では非常に動作が重くなりますのでテスト目的以外で使用しないでください。
gap（'文字数em'|'高さpx'）
下マージン/マルチカラムが有効の場合はカラム間隔=column-gap
togglable
要素があらかじめ指定されているとき、ダブルクリックで表示切り替えをするかどうか設定します。
true
ダブルクリックで表示を切り替えます。
false
ダブルクリックで表示を切り替えません。
cacheDisabled
縦書き変換済み HTML をキャッシュするかどうか設定します。
true
縦書き変換済み HTML をキャッシュしません。
false（初期値）
縦書き変換済み HTML をキャッシュします。

これら設定項目は、class 名「class="taketori-設定項目-設定値"」として個別に指定することもできます（togglable を除く）。

class="taketori-maxHeight-30em taketori-fontFamily-sans-serif"

要素の指定方法

'要素ID'
要素ID を指定します。
'要素タグ名.要素class名'
要素タグ名と要素class名で指定します。class名のみで指定することはできません。
'=auto'
日本語文章を自動検出して縦書きにします。
'=dblclick'
ダブルクリックされたブロックを縦書きにします。

指定したい要素のパターンが複数ある場合はカンマで区切って指定します。

(new Taketori()).set({fontFamily:'sans-serif',togglable:true,height:'10em'}).element('id-1','div.tategaki').toVertical();

関数

.toVertical(true|false)
縦書き変換を実行します。引数で画面の読み込み待ちをするかどうかを設定します。初期値は「true」（画面の読み込み待ちをする）です。ページを表示した後、ボタンなどで縦書き表示させる場合は「false」を設定してください。
.toggleAll()
全ての縦書き変換対象要素について、縦書き・横書きを切り替えます。
.toggle(element,ttbDisabled,keepTargets)
指定された要素(element)の縦書き・横書きを切り替えます。
element【必須】
要素を指定します。
ttbDisabled
必ず横書きにしたい場合、「true」を設定します。対象要素が縦書きの場合は縦書きを解除し、対象要素が横書きの場合は何もしません。
keepTargets
縦書きを解除しても、縦書き対象要素からは除外しない場合、「true」を設定します。
.clearAll()
全ての縦書き変換対象要素について、縦書きを横書きに戻し、縦書き済み HTML のキャッシュを消去します。
.clear(element)
指定された要素(element)を横書きに戻し、縦書き済み HTML のキャッシュを消去します。
element【必須】
要素を指定します。

ダブルクリックではなく切り替えボタンで表示を切り替える例

<div class="tategaki">
縦書き領域です。
</div>
<a href="#" id="toggle">表示切り替え</a>
<script type="text/javascript" src="taketori.js" charset="UTF-8"></script>
<script type="text/javascript">
//<![CDATA[
var taketori = (new Taketori()).set({fontFamily:'sans-serif'}).element('div.tategaki').toVertical();
taketori.document.element('toggle').addEventListener('click',function (e) {
	taketori.toggleAll();
	taketori.document.stopPropagation(e);
	taketori.document.preventDefault(e);
	return false;
});
//]]>
</script>

よくある質問

InternetExplorer 以外の環境でテキストを選択しようとするとものすごい勢いでスクロールしてしまいます。
スクロールを止める方法を模索中です。もしいい方法がありましたらぜひお知らせください。現状でテキストを選択するには、選択したい文字列の開始点をクリックし、シフトキーを押しながら終了点をクリックします。また、スクロールバーが表示されない状態（マルチカラムを有効にしている場合や縦書き対象テキストが少ない場合）では、問題なくテキストを選択できます。
下線や上線、打ち消し線など、text-decoration が変です。
InternetExplorer 以外の環境では「text-decoration」を疑似的に再現しています。うまく表示できない場合は、「text-decoration:none」とすることをおすすめします。
Opera で日本語文字列のみおかしな場所に表示されます。
おかしな場所に表示される文字列を含む要素に「position: relative」を設定すると期待通り表示されることが多いようです。
Windows + Chrome/Safari で文字が横倒しになってしまいます。
Windows 版 Chrome/Safari の縦書き(-webkit-writing-mode: vertical-rl)は、現在のところ「@ＭＳ 明朝」でのみ可能となっているようです。将来のバージョンで InternetExplorer 同様「@」なしでも縦書き表示となることを期待しましょう。Mac 版 Chrome/Safari ではどんなフォントでも問題なく縦書きになります。
InternetExplorer9 でルビのふられた文字列が横書きになってしまいます。
InternetExplorer9 のバグです。互換モードを指定すると回避できます。
<meta http-equiv="X-UA-Compatible" content="IE=8" >
使用サンプルはありますか？
CMONOS.JP サンプルサイトの「サンプル2/縦書きで読む(竹取JS版)」をご覧ください。
表示されるまで時間がかかり過ぎます。
縦書き変換ウェブサービス「竹取Web」をお試しください。ダウンロード版もあります。

作成者

ライセンス
MITライセンス
著作権
株式会社CMONOS
お問い合わせ
株式会社CMONOS お問い合わせフォーム
ご意見・ご要望
株式会社CMONOS フィードバックフォーム
GitHub
cmonos / TAKETORI-JS
フォーラム（BBS）
株式会社CMONOS フォーラム
責任の制限
過失を含むいかなる場合であっても、株式会社CMONOS は本スクリプトを使用したことに起因する若しくは関連する付随的、間接損害について、一切の責任を負いません。

バージョン履歴

2015年11月8日 ver1.4.4
2015年11月1日 ver1.4.3
2015年8月10日 ver1.4.2
2015年8月2日 ver1.4.1
2015年8月1日 ver1.4.0
2015年4月7日 ver1.3.10
2015年4月4日 ver1.3.9
2015年1月30日 ver1.3.8
2015年1月9日 ver1.3.7
2014年4月17日 ver1.3.6
2013年10月4日 ver1.3.5
2013年9月19日 ver1.3.4
2013年9月18日 ver1.3.3
2013年6月5日 ver1.3.2
2013年5月9日 ver1.3.1
2013年4月25日 ver1.3.0
2012年4月6日 ver1.3.0
2011年12月11日 ver1.2.8
2011年12月9日 ver1.2.7
2011年11月24日 ver1.2.6
2011年11月23日 ver1.2.5
2011年11月22日 ver1.2.4
2011年11月15日 ver1.2.3
2011年11月3日 ver1.2.2
2011年11月3日 ver1.2.1
2011年11月1日 ver1.2.0
2011年9月13日 ver1.1.4
2011年5月20日 ver1.1.3
2011年1月13日 ver1.1.3
2011年1月6日 ver1.1.2
2010年12月15日 ver1.1.1
2010年11月21日 ver1.0.6
2010年7月14日 ver1.0.5
2010年7月13日 ver1.0.4
2010年7月10日 ver1.0.3
2010年7月9日 ver1.0.2
2010年7月5日 22:00 ver1.0.1
2010年7月5日 ver1.0.0