竹取 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 ではルビ(ふりがな)にも対応。

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

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

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

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

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

「縦書きにする・iPhone 用リンク」

「縦書き可能にする・iPhone 用リンク」

「段組み縦書き可能にする・iPhone 用リンク」

iPhone に登録するには？

とりあえずこのページを共有ボタンからブックマーク。
iPhone 用リンクを長押ししてコピー。
ブックマークを開いて、追加したブックマークを「編集」。
名前を「縦書き可能にする」などに変更し、URL 欄に上記コードをペースト。
最初の「http://」を削除。

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

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

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

使い方

縦書き指定の概略

<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': ゴシック系フォントで表示します。

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 サンプルサイトの「サンプル1/縦書きで読む(竹取JS版)」をご覧ください。

表示されるまで時間がかかり過ぎます。

縦書き変換ウェブサービス「竹取Web」をお試しください。ダウンロード版もあります。

既知の問題

Retina ディスプレイと Chrome の組み合わせで縦組を指定した文字が消える: Chrome ver27 で発生する事を確認できたため、同環境では writing-mode による縦書きから、90度回転型の縦書きに変更しました。ただし、将来的に修正される事を見込み ver30 以降では writing-mode による縦書きに戻るようになっています。ver30 以降で文字が消える場合は、株式会社CMONOS フィードバックフォームよりご連絡ください。

※現状弊社には Retina ディスプレイ+Chrome 環境と Android 端末がないので、これら環境での動作検証にご協力いただける方を探しております・・・（フィードバックフォーム・@cmonos_chee) 。

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

ダウンロード

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

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