竹取 JS

概要
ブックマークレット
使い方
ダウンロード

JavaScript 版
縦書き化ツール「竹取JS」

縦書きファンのみなさんからご好評をいただきました「竹取Web」に、新しい仲間が加わりました。その名も「竹取JS」。

JavaScript で指定されたブロックを縦書きに変換するツールです。

InternetExplorer5.5 以降に実装されている「writing-mode: tb-rl;」相当の表示を主要ブラウザで再現します。ウィンドウサイズにあわせて高さを調節をするなど、JavaScript ならではの機能が用意されています。

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

番号リストは漢数字番号リストになります。

番号リストです。番号リストです。番号リストです。番号リストです。番号リストです。
番号リストです。番号リストです。番号リストです。番号リストです。番号リストです。

入れ子にしてもだいじょうぶ。
番号リストです。番号リストです。番号リストです。番号リストです。番号リストです。
番号リストです。番号リストです。番号リストです。番号リストです。番号リストです。

番号リストです。番号リストです。番号リストです。番号リストです。番号リストです。

画像の右寄せは下寄せになります。画像の右寄せは下寄せになります。画像の右寄せは下寄せになります。画像の右寄せは下寄せになります。画像の右寄せは下寄せになります。画像の右寄せは下寄せになります。画像の右寄せは下寄せになります。

画像以外のフロートでもバッチリ！

フロートを重ねても縦書きになります。フロートを重ねても縦書きになります。フロートを重ねても縦書きになります。フロートを重ねても縦書きになります。フロートを重ねても縦書きになります。フロートを重ねても縦書きになります。

<strong>（強調）は、傍点に（IE8以上）。

<em>（強調）は、斜体に。

下線。

~~取り消し~~。

IE や Safari ではルビ(ふりがな)にも対応。

セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル
セル	セル	セル	セル	セル

画面をダブルクリックで縦書きと横書きを切り替えることができます。要素を指定して縦書きにしている場合は、次回アクセス時に同じ表示が引き継がれます。

概要
ブックマークレット
使い方
ダウンロード

どんなサイトでも縦書きにするブックマークレット。

↓右クリックで「お気に入り」に保存するか、リンクをドラッグしてブックマークバーにドロップします。

「縦書きにする」

「縦書き可能にする」

注意！
やや動作が重いです！

うまく変換できなかったときは、画面をダブルクリックして表示を切り替えてみてください。

概要
ブックマークレット
使い方
ダウンロード

使い方

縦書き指定の概略

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

設定項目

height（'文字数em'|'高さpx'|'width'）

縦書きブロックの高さ / マルチカラムが有効の場合は一段の高さ(column-width) / width=親要素の幅を高さとする

maxHeight（'文字数em'|'高さpx'）

最大の高さ（height が指定されていないとき、この値を越えない範囲でウィンドウサイズに合わせて高さを調整します。）

multiColumnEnabled

マルチカラムを有効にするかどうか設定します。

false（初期値）: マルチカラムを無効にします。
'auto': マルチカラムに十分に対応したブラウザではマルチカラムを有効にします。現在のところ Firefox のみ有効になります。WebKit 系ブラウザでは文字を回転させると表示が崩れるため、マルチカラムを無効にします。
true【非推奨】: マルチカラムに対応していないブラウザでも疑似的にマルチカラムを再現します。ただし現状では非常に動作が重くなりますのでテスト目的以外で使用しないでください。

fontFamily

縦書き表示時のフォントを設定します。

'serif': 明朝系フォントで表示します。
'sans-serif': ゴシック系フォントで表示します。

gap（'文字数em'|'高さpx'）

下マージン/マルチカラムが有効の場合はカラム間隔=column-gap

togglable

要素があらかじめ指定されているとき、ダブルクリックで表示切り替えをするかどうか設定します。

true: ダブルクリックで表示を切り替えます。
false: ダブルクリックで表示を切り替えません。

これら設定項目は、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) の引数について

.toVertical(true|false) の引数では画面の読み込み待ちをするかどうかを設定します。初期値は「true」（画面の読み込み待ちをする）です。ページを表示した後、ボタンなどで縦書き表示させる場合は「false」を設定してください。

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

<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」を設定すると期待通り表示されることが多いようです。
使用サンプルはありますか？: CMONOS.JP サンプルサイトの「サンプル2/縦書きで読む(竹取JS版)」をご覧ください。
表示されるまで時間がかかり過ぎます。: 縦書き変換ウェブサービス「竹取Web」をお試しください。ダウンロード版もあります。

概要
ブックマークレット
使い方
ダウンロード

ダウンロード

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

【ＰＲ】縦書きするなら、カスタムフィールドＣＭＳ「CMONOS.JP」