├── README.md ├── taketori.css ├── ReadMe.html └── taketori.js /README.md: -------------------------------------------------------------------------------- 1 | About taketori.js 2 | =============== 3 | 4 | What's this ? 5 | ---------------- 6 | 7 | "taketori.js" is a javascript library to make text vertical. 8 | 9 | ### Browser Support 10 | InternetExplorer5.5+ / Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+ 11 | 12 | ### Language 13 | Chinese, Japanese, Korean 14 | 15 | ### License 16 | MIT License 17 | 18 | How To Use 19 | --------------- 20 | 21 | ### Preparation 22 | 23 | Upload these two files same directory. 24 | 25 | * taketori.js 26 | * taketori.css 27 | 28 | ### Sample 29 | 30 | 31 | 36 | 37 | ### Parameters 38 | 39 | lang 40 | 41 | * 'ja-jp' = Japanese 42 | * 'zh-tw' = Taiwanese 43 | 44 | fontFamily 45 | 46 | * 'serif' 47 | * 'sans-serif' 48 | * 'cursive' 49 | * 'kai' 50 | 51 | height（'em'|'px'|'width'=height of parent node.） 52 | 53 | maxHeight（'em'|'px'） 54 | 55 | multiColumnEnabled 56 | 57 | * false(default) 58 | * 'auto' 59 | * true(too slow) 60 | 61 | gap（'em'|'px'）(=column-gap) 62 | 63 | togglable(true|false) 64 | 65 | cacheDisabled(true|false) 66 | 67 | #### Tips 68 | 69 | You can set these parameters as class name. 70 | 71 | > class="taketori-maxHeight-30em taketori-fontFamily-sans-serif" 72 | 73 | ### How to set target elements. 74 | 75 | * 'element ID' 76 | * 'tagName.className' 77 | * '=auto' 78 | * '=dblclick' 79 | 80 | ### Button Sample 81 | 82 |

83 | 縦書き　直排 84 |

85 | Toggle 86 | 87 | 98 | -------------------------------------------------------------------------------- /taketori.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | .taketori-sans-serif-ja-jp { 4 | font-family: Avenir, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, Verdana, Roboto, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'Meiryo UI', 'メイリオ', Meiryo, 'ＭＳＰゴシック', 'MS PGothic', sans-serif; 5 | } 6 | 7 | .taketori-sans-serif-zh-tw { 8 | font-family: 'Heiti TC', 'LiHei Pro', '微軟正黑體', sans-serif !important; 9 | } 10 | 11 | .taketori-serif-ja-jp { 12 | font-family: Garamond, 'Times New Roman', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'HGS明朝E', 'HG明朝E', 'ＭＳＰ明朝', 'MS PMincho', serif; 13 | } 14 | 15 | .taketori-serif-zh-tw { 16 | font-family: 'Apple LiSung', PMingLiu, '新細明體', serif !important; 17 | } 18 | 19 | .taketori-cursive-ja-jp { 20 | font-family: 'ＤＦＰ行書体', 'ＤＦ行書体', 'AGENDA人名行書体L1', 'HGP行書体', 'HGS行書体', 'HG行書体', Garamond, 'Times New Roman', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'HGS明朝E', 'HG明朝E', 'ＭＳＰ明朝', 'MS PMincho', cursive; 21 | } 22 | 23 | .taketori-cursive-zh-tw { 24 | font-family: 'Apple LiSung', PMingLiu, '新細明體', serif !important; 25 | } 26 | 27 | .taketori-kai-ja-jp { 28 | font-family: 'ＤＦＰ楷書体', 'HG正楷書体-PRO', Garamond, 'Times New Roman', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HiraMinProN-W3', '游明朝', 'Yu Mincho', '游明朝体', 'YuMincho', 'HGS明朝E', 'HG明朝E', 'ＭＳＰ明朝', 'MS PMincho', serif; 29 | } 30 | 31 | .taketori-kai-zh-tw { 32 | font-family: '教育部標準楷書', '全字庫正楷體', '標楷體', 'BiauKai', 'STKaiti', Kai, serif !important; 33 | } 34 | 35 | .taketori-atsign-ja-jp, 36 | .taketori-atsign-zh-tw { 37 | font-family: '@ＭＳ明朝' !important; 38 | } 39 | 40 | .taketori-ttb { overflow: hidden; position: relative; } 41 | .taketori-ttb span { cursor: vertical-text; } 42 | .taketori-ttb a span { cursor: pointer !important; } 43 | 44 | .taketori-ttb .taketori-col { 45 | -moz-transform-origin: left bottom; 46 | -webkit-transform-origin: left bottom; 47 | -o-transform-origin: left bottom; 48 | transform-origin: left bottom; 49 | -moz-transform:rotate(90deg); 50 | -webkit-transform:rotate(90deg); 51 | -o-transform:rotate(90deg); 52 | transform:rotate(90deg); 53 | } 54 | .taketori-ttb .taketori-col span.cjk { 55 | display: -moz-inline-block; 56 | display: inline-block; 57 | } 58 | .taketori-ttb span.tcy { 59 | min-width: 1em; 60 | text-align: center !important; 61 | cursor: text; 62 | } 63 | .taketori-ttb span.cjk, .taketori-ttb span.tcy, .taketori-ttb span.ltr { 64 | display: -moz-inline-block; 65 | display: inline-block; 66 | -moz-transform:rotate(-90deg); 67 | -webkit-transform:rotate(-90deg); 68 | -o-transform:rotate(-90deg); 69 | transform:rotate(-90deg); 70 | vertical-align: middle !important; 71 | } 72 | .taketori-ttb span.cjk, .taketori-ttb span.tcy { 73 | letter-spacing: 0 !important; 74 | } 75 | .taketori-ttb ruby rb, .taketori-ttb ruby rt { 76 | line-height: 1; 77 | } 78 | .taketori-ttb img, 79 | .taketori-ttb object, 80 | .taketori-ttb embed, 81 | .taketori-ttb video, 82 | .taketori-ttb audio { 83 | -moz-transform:rotate(-90deg); 84 | -webkit-transform:rotate(-90deg); 85 | -o-transform:rotate(-90deg); 86 | transform:rotate(-90deg); 87 | vertical-align: middle !important; 88 | } 89 | 90 | .taketori-ttb .nocjk { 91 | vertical-align: middle !important; 92 | } 93 | 94 | .taketori-ttb .ltr { 95 | -moz-transform:rotate(-90deg); 96 | -webkit-transform:rotate(-90deg); 97 | -o-transform:rotate(-90deg); 98 | transform:rotate(-90deg); 99 | } 100 | .taketori-ttb .ltr span.cjk, .taketori-ttb .ltr span.tcy, .taketori-ttb .ltr span.ltr { 101 | display: inline; 102 | -moz-transform:none; 103 | -webkit-transform:none; 104 | -o-transform:none; 105 | transform:none; 106 | vertical-align: baseline !important; 107 | } 108 | .taketori-ttb .ltr span { 109 | cursor: text; 110 | } 111 | 112 | .taketori-ttb span.cho-on { 113 | vertical-align: middle !important; 114 | -moz-transform: scale(1.0,-1.0); 115 | -webkit-transform: scale(1.0,-1.0); 116 | -o-transform: scale(1.0,-1.0); 117 | transform: scale(1.0,-1.0); 118 | } 119 | .taketori-ttb span.tou-ten { 120 | margin: -0.64em 0.7em 0.64em -0.7em !important; 121 | } 122 | .taketori-ttb span.ku-ten { 123 | margin: -0.6em 0.64em 0.6em -0.64em !important; 124 | } 125 | .taketori-ttb span.kogaki { 126 | margin: -0.2em 0.15em 0.2em -0.15em !important; 127 | } 128 | .taketori-ttb span.kakko { 129 | vertical-align: middle !important; 130 | } 131 | .taketori-ttb span.ku-ten, 132 | .taketori-ttb span.tou-ten, 133 | .taketori-ttb span.kogaki { 134 | border: none !important; 135 | background: transparent none !important; 136 | } 137 | .taketori-ttb span.kinsoku { 138 | display: -moz-inline-block; 139 | display: inline-block; 140 | } 141 | 142 | .taketori-ttb .underline { 143 | text-decoration: none !important; 144 | } 145 | .taketori-ttb .underline span.nocjk, .taketori-ttb .underline .ltr { 146 | text-decoration: underline !important; 147 | } 148 | .taketori-ttb .underline span.cjk { 149 | border-right: 1px solid; 150 | line-height: 1; 151 | margin: 0.25em -1px 0.25em 0; 152 | } 153 | .taketori-ttb .underline span.cho-on { 154 | border-bottom: 1px solid; 155 | border-right: none; 156 | margin: 0.25em 0 0.25em 0; 157 | } 158 | 159 | .taketori-ttb .overline { 160 | text-decoration: none !important; 161 | } 162 | .taketori-ttb .overline span.nocjk, .taketori-ttb .overline .ltr { 163 | text-decoration: overline !important; 164 | } 165 | .taketori-ttb .overline span.cjk { 166 | border-left: 1px solid; 167 | line-height: 1; 168 | margin: 0.25em 0 0.25em -1px; 169 | } 170 | .taketori-ttb .overline span.cho-on { 171 | border-top: 1px solid; 172 | border-left: none; 173 | margin: 0.25em 0 0.25em 0; 174 | } 175 | 176 | .taketori-ttb .bothline { 177 | text-decoration: none !important; 178 | } 179 | .taketori-ttb .bothline span.nocjk, .taketori-ttb .bothline .ltr { 180 | text-decoration: underline overline !important; 181 | } 182 | .taketori-ttb .bothline span.cjk { 183 | border-left: 1px solid; 184 | border-right: 1px solid; 185 | line-height: 1; 186 | margin: 0.25em -1px 0.25em -1px; 187 | } 188 | .taketori-ttb .bothline span.cho-on { 189 | border-top: 1px solid; 190 | border-bottom: 1px solid; 191 | border-left: none; 192 | border-right: none; 193 | margin: 0.25em 0 0.25em 0; 194 | } 195 | 196 | .taketori-ttb del { 197 | text-decoration: none; 198 | } 199 | .taketori-ttb del span.nocjk, .taketori-ttb del .ltr, .taketori-ttb .ltr del { 200 | text-decoration: line-through; 201 | } 202 | .taketori-ttb del span.cjk:after { 203 | content: "\2503"; 204 | display: -moz-inline-block; 205 | display: inline-block; 206 | position: absolute; 207 | top: 0; 208 | left: 0; 209 | } 210 | .taketori-ttb del span.ku-ten:after, 211 | .taketori-ttb del span.tou-ten:after { 212 | content: ""; 213 | } 214 | .taketori-ttb del span.kogaki:after { 215 | margin: 0.15em 0.2em -0.15em -0.2em; 216 | } 217 | .taketori-ttb del span.cho-on:after { 218 | -moz-transform: scale(1.0,-1.0) rotate(-90deg); 219 | -webkit-transform: scale(1.0,-1.0) rotate(-90deg); 220 | -o-transform: scale(1.0,-1.0) rotate(-90deg); 221 | transform: scale(1.0,-1.0) rotate(-90deg); 222 | } 223 | 224 | .taketori-ttb .italic { 225 | font-style: normal !important; 226 | } 227 | .taketori-ttb .italic span.nocjk, .taketori-ttb .italic .ltr { 228 | font-style: italic !important; 229 | } 230 | .taketori-ttb .italic span.cjk { 231 | -moz-transform:rotate(-90deg) skew(0,-20deg); 232 | -webkit-transform:rotate(-90deg) skew(0,-20deg); 233 | -o-transform:rotate(-90deg) skew(0,-20deg); 234 | transform:rotate(-90deg) skew(0,-20deg); 235 | } 236 | .taketori-ttb .italic span.kakko { 237 | display: -moz-inline-block; 238 | display: inline-block; 239 | -moz-transform:skew(20deg,0); 240 | -webkit-transform:skew(20deg,0); 241 | -o-transform:skew(20deg,0); 242 | transform:skew(20deg,0); 243 | } 244 | .taketori-ttb .italic span.cho-on { 245 | -moz-transform: scale(1.0,-1.0); 246 | -webkit-transform: scale(1.0,-1.0); 247 | -o-transform: scale(1.0,-1.0); 248 | transform: scale(1.0,-1.0); 249 | vertical-align: middle; 250 | } 251 | 252 | .taketori-ttb strong { 253 | font-weight: normal; 254 | } 255 | .taketori-ttb strong span.nocjk, .taketori-ttb strong .ltr, .taketori-ttb .ltr strong { 256 | font-weight: bold; 257 | } 258 | .taketori-ttb strong span.cjk:after { 259 | content: "\3001"; 260 | display: -moz-inline-block; 261 | display: inline-block; 262 | position: absolute; 263 | top: 0; 264 | left: 0; 265 | margin: -0.3em 0 0 1em; 266 | } 267 | .taketori-lang-ja-jp strong span.cjk:after { 268 | margin: -0.3em 0 0 1em; 269 | } 270 | .taketori-lang-zh-tw strong span.cjk:after { 271 | margin: 0 0 0 0.75em; 272 | } 273 | 274 | .taketori-ttb strong span.ku-ten:after, 275 | .taketori-ttb strong span.tou-ten:after { 276 | content: ""; 277 | } 278 | .taketori-ttb strong span.kogaki:after { 279 | margin: -0.15em 0 0 0.8em; 280 | } 281 | .taketori-lang-ja-jp strong span.kogaki:after { 282 | margin: -0.15em 0 0 0.8em; 283 | } 284 | .taketori-lang-zh-tw strong span.kogaki:after { 285 | margin: 0.15em 0 0 0.55em; 286 | } 287 | .taketori-ttb strong span.cho-on:after { 288 | -moz-transform: scale(1.0,-1.0) rotate(-90deg); 289 | -webkit-transform: scale(1.0,-1.0) rotate(-90deg); 290 | -o-transform: scale(1.0,-1.0) rotate(-90deg); 291 | transform: scale(1.0,-1.0) rotate(-90deg); 292 | margin: 1em 0.3em -1em -0.3em; 293 | } 294 | .taketori-lang-ja-jp strong span.cho-on:after { 295 | margin: 1em 0.3em -1em -0.3em; 296 | } 297 | .taketori-lang-zh-tw strong span.cho-on:after { 298 | margin: 0.75em 0 -0.75em 0; 299 | } 300 | 301 | .taketori-ttb ul.cjk, .taketori-ttb ol.cjk { 302 | list-style-type: none; 303 | } 304 | .taketori-ttb ul.cjk li:before, .taketori-ttb ol.cjk li:before { 305 | content: attr(data-marker); 306 | display: -moz-inline-block; 307 | display: inline-block; 308 | width: 3em; 309 | text-align: center; 310 | margin: 0 -0.3em 0 -2.7em; 311 | font-size: 0.8em; 312 | -moz-transform:rotate(-90deg); 313 | -webkit-transform:rotate(-90deg); 314 | -o-transform:rotate(-90deg); 315 | transform:rotate(-90deg); 316 | } 317 | 318 | .taketori-ruby-disabled ruby { 319 | display: -moz-inline-block; 320 | display: inline-block; 321 | position: relative; 322 | } 323 | .taketori-ruby-disabled ruby rp { 324 | display: none; 325 | } 326 | .taketori-ruby-disabled ruby rt { 327 | display: block; 328 | margin: -1em 0 0 0; 329 | font-size: 0.5em; 330 | position: absolute; 331 | top: 0; 332 | left: 0; 333 | vertical-align: bottom; 334 | } 335 | 336 | /* Use Writing Mode */ 337 | .taketori-writingmode-ttb .taketori-col { 338 | -moz-writing-mode: vertical-rl; 339 | -webkit-writing-mode: vertical-rl; 340 | -o-writing-mode: vertical-rl; 341 | -ms-writing-mode: tb-rl; 342 | /writing-mode: tb-rl; 343 | _writing-mode: tb-rl; 344 | } 345 | .taketori-writingmode-ttb .ltr, .taketori-writingmode-ttb span.tcy { 346 | text-indent: 0 !important; 347 | line-height: 1 !important; 348 | -moz-writing-mode: horizontal-tb; 349 | -webkit-writing-mode: horizontal-tb; 350 | -o-writing-mode: horizontal-tb; 351 | -ms-writing-mode: lr-tb; 352 | /writing-mode: lr-tb; 353 | _writing-mode: lr-tb; 354 | vertical-align: middle\9; 355 | } 356 | .taketori-writingmode-ttb span.tcy { 357 | letter-spacing: 0 !important; 358 | } 359 | 360 | .taketori-writingmode-ttb .underline { 361 | text-decoration: overline; 362 | } 363 | 364 | .taketori-writingmode-ttb .overline { 365 | text-decoration: underline; 366 | } 367 | 368 | .taketori-writingmode-ttb strong.bo-ten { 369 | font-weight: normal; 370 | -webkit-text-emphasis-style: filled; 371 | -moz-text-emphasis-style: filled; 372 | -o-text-emphasis-style: filled; 373 | -ms-text-emphasis-style: filled; 374 | text-emphasis-style: filled; 375 | } 376 | .taketori-writingmode-ttb strong.bo-ten span.cjk { 377 | display: inline-block; 378 | } 379 | .taketori-writingmode-ttb strong.bo-ten span.cjk:after { 380 | content: "\3001"; 381 | display: inline-block; 382 | line-height: 1; 383 | position: absolute; 384 | margin: -0.55em -0.05em 0.55em 0.05em; 385 | } 386 | .taketori-lang-ja-jp strong.bo-ten span.cjk:after { 387 | margin: -0.55em -0.05em 0.55em 0.05em; 388 | } 389 | .taketori-lang-zh-tw strong.bo-ten span.cjk:after { 390 | margin: -1em 0.25em 1em -0.25em; 391 | } 392 | 393 | .taketori-writingmode-ttb ul.cjk, .taketori-writingmode-ttb ol.cjk { 394 | list-style-type: none; 395 | } 396 | .taketori-writingmode-ttb ul.cjk li:before, .taketori-writingmode-ttb ol.cjk li:before { 397 | display: -moz-inline-block; 398 | display: inline-block; 399 | content: attr(data-marker); 400 | -moz-writing-mode: horizontal-tb; 401 | -webkit-writing-mode: horizontal-tb; 402 | -o-writing-mode: horizontal-tb; 403 | -ms-writing-mode: lr-tb; 404 | /writing-mode: lr-tb; 405 | _writing-mode: lr-tb; 406 | font-size: 0.8em; 407 | line-height: 1; 408 | margin: -1.2em 0 0.2em -0.2em; 409 | text-align: center; 410 | vertical-align: text-bottom; 411 | } 412 | 413 | .taketori-in-progress { 414 | opacity: 0 !important; 415 | -moz-opacity: 0 !important; 416 | -webkit-opacity: 0 !important; 417 | -o-opacity: 0 !important; 418 | -ms-filter: "alpha(opacity=0)" !important; 419 | filter: alpha(opacity=0) !important; 420 | } 421 | 422 | -------------------------------------------------------------------------------- /ReadMe.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 「竹取JS」について 8 | 50 | 51 | 52 | 53 |

「竹取JS」について

54 | 55 |

概要

56 | 57 |

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

58 | 59 |

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

65 | 66 |

使い方

67 | 68 |

設置

69 | 70 |

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

71 | 72 |

taketori.js
taketori.css

76 | 77 |

縦書き指定の概略

78 |

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

84 | 85 |

設定項目

86 |

lang

89 | 言語を明示的に指定します。 90 |

'ja-jp': 表示を日本語環境に最適化します。
'zh-tw': 表示を中国語-台湾(繁体字)に最適化します。

96 |

fontFamily

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

'serif': 明朝系フォントで表示します。
'sans-serif': ゴシック系フォントで表示します。
'cursive': 行書体系フォントで表示します。
'kai': 楷書体系フォントで表示します。

110 |

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

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

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

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

multiColumnEnabled

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

false（初期値）: マルチカラムを無効にします。
'auto': マルチカラムに十分に対応したブラウザではマルチカラムを有効にします。
true【非推奨】: マルチカラムに対応していないブラウザでも疑似的にマルチカラムを再現します。ただし現状では非常に動作が重くなりますのでテスト目的以外で使用しないでください。

126 |

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

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

togglable

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

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

138 |

cacheDisabled

141 | 縦書き変換済み HTML をキャッシュするかどうか設定します。 142 |

true: 縦書き変換済み HTML をキャッシュしません。
false（初期値）: 縦書き変換済み HTML をキャッシュします。

148 |

150 |

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

151 |

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

152 | 153 |

要素の指定方法

154 |

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

164 |

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

165 |

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

166 | 167 |

関数

168 |

.toVertical(true|false)

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

.toggleAll()

全ての縦書き変換対象要素について、縦書き・横書きを切り替えます。

.toggle(element,ttbDisabled,keepTargets)

175 | 指定された要素(element)の縦書き・横書きを切り替えます。 176 |

element【必須】: 要素を指定します。
ttbDisabled: 必ず横書きにしたい場合、「true」を設定します。対象要素が縦書きの場合は縦書きを解除し、対象要素が横書きの場合は何もしません。
keepTargets: 縦書きを解除しても、縦書き対象要素からは除外しない場合、「true」を設定します。

184 |

.clearAll()

全ての縦書き変換対象要素について、縦書きを横書きに戻し、縦書き済み HTML のキャッシュを消去します。

.clear(element)

189 | 指定された要素(element)を横書きに戻し、縦書き済み HTML のキャッシュを消去します。 190 |

element【必須】: 要素を指定します。

194 |

196 | 197 |

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

198 |

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

214 | 215 |

よくある質問

216 | 217 |

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」をお試しください。ダウンロード版もあります。

233 | 234 |

作成者

235 | 236 |

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

245 | 246 |

バージョン履歴

247 | 248 |

2015年11月8日 ver1.4.4

250 |

1.4.3においても、マルチカラムが有効になっているとき、環境によって縦書き部分の高さを正しく取得できない場合がある不具合を修正しました。

253 |

2015年11月1日 ver1.4.3

255 |

マルチカラムが有効になっているとき、環境によって縦書き部分の高さを正しく取得できない場合がある不具合を修正しました。

258 |

2015年8月10日 ver1.4.2

260 |

タッチ環境で縦書き横書き切り替え（togglable）が有効になっているとき、縦書き部分に対しピンチ操作をしようとすると縦書き横書き切り替えが動作してしまう不具合を修正しました。複数の指がタッチしているとき、切り替え機能が動作しないようにしました。

263 |

2015年8月2日 ver1.4.1

265 |

90度回転方式の縦書きで「class="ltr"」が指定されたインライン要素が適切に配置されない不具合を修正しました。
「letter-spacing」が指定された要素の中にある縦中横の中で「letter-spacing」が無効化されるようにしました。

269 |

2015年8月1日 ver1.4.0

271 |

90度回転方式の縦書きで「letter-spacing」の指定に対応しました。
大文字の英字もしくは数字が連続する場合、あらかじめ全角化して、文字が横倒しにならないようにしました。

275 |

2015年4月7日 ver1.3.10

277 |

Chrome で一部シンボルが中国の縦書き表記とならない問題に対応しました。

280 |

2015年4月4日 ver1.3.9

282 |

繁体字フォント指定に誤りがあり、一部シンボルが中国の縦書き表記とならない不具合を修正しました。

285 |

2015年1月30日 ver1.3.8

287 |

マルチカラム適用時に「column-fill: auto」を設定するようにしました。

290 |

2015年1月9日 ver1.3.7

292 |

InternetExplorer11 で「-ms-writing-mode」を利用しない不具合を修正しました。
InternetExplorer9 でマルチカラムを有効にしたとき、カラム間隔が左マージンになる不具合を修正しました。

296 |

2014年4月17日 ver1.3.6

298 |

text-indent が設定されている要素で、縦中横文字列が右にずれる不具合を修正しました。
line-height が設定されている要素で、縦中横文字列の上下に余白が作られる不具合を修正しました。

302 |

2013年10月4日 ver1.3.5

304 |

スマートフォンでもダブルクリック（ダブルタップ）で縦書きと横書きの切り替えができるようにしました。
Android 4.0 でも Chrome では縦書きの不具合が修正されているそうなので Android4.0 以降の縦書き方式を writing-mode を適用する方式に戻しました。

308 |

2013年9月19日 ver1.3.4

310 |

Android 4.1 で縦書きの不具合が修正されているそうなので、Android 4.0.x のみ90度回転方式となるようにしました。

313 |

2013年9月18日 ver1.3.3

315 |

Android 携帯で縦書きにならずテキストが横倒しになる不具合を修正しました。上記環境では90度回転方式の縦書きとなります。これは Android の WebKit 実装バグですが、将来的に修正されることを信じて Android 4.5 以降は「-webkit-writing-mode」を利用するようにしてあります。バージョンによる切り替えは 156行目「parseFloat(RegExp.$1) > 4.4)」で行っています。「4.4」を書き換えると切り替えるバージョンを変更できます。

318 |

2013年6月5日 ver1.3.2

320 |

Retina Display と Chrome 〜ver27 の組み合わせで縦組を指定した文字が消える不具合を修正しました。上記環境では90度回転方式の縦書きとなります。これは Chrome のバグですが、将来的に修正されることを信じて ver31 以降は「-webkit-writing-mode」を利用するようにしてあります。バージョンによる切り替えは 156行目「parseInt(RegExp.$1) > 30)」で行っています。「30」を書き換えると切り替えるバージョンを変更できます。（多々良直治さんご指摘、テストのご協力ありがとうございます！）

323 |

2013年5月9日 ver1.3.1

325 |

taketori.js 1407行目でかっこ開始文字の指定に誤りがあったのを修正しました。（株式会社CMONOS フィードバックフォームからのご指摘ありがとうございます！）

328 |

2013年4月25日 ver1.3.0

330 |

CSS を修正し、記述ミスをなくしたほか、writing-mode 非対応環境での長音符の表示を改善しました。taketori.css のみの修正となります。（匿名希望さんご指摘ありがとうございます！）

333 |

2012年4月6日 ver1.3.0

335 |

Firefox でルビがずれる不具合を修正しました。
縦書き変換中、縦書き対象要素を表示しないようにしました。
縦書き変換済み HTML をキャッシュしない cacheDisabled オプションを追加しました。

340 |

2011年12月11日 ver1.2.8

342 |

InternetExplorer9 の縦中横の表示を改善しました。
InternetExplorer9 で padding が回転していた不具合を修正しました。

346 |

2011年12月9日 ver1.2.7

348 |

Safari/Chrome で圏点と漢数字リストが動作しなくなっていた不具合を修正しました。
縦中横の表示を改善しました。

352 |

2011年11月24日 ver1.2.6

354 |

Windows 版 Safari でフォントが横倒しになる不具合を修正しました。

357 |

2011年11月23日 ver1.2.5

359 |

InternetExplorer8-9 以外で圏点にならない不具合を修正しました。

362 |

2011年11月22日 ver1.2.4

364 |

InternetExplorer9 で margin と padding が回転してしまう不具合を修正しました。

367 |

2011年11月15日 ver1.2.3

369 |

WebKit 系ブラウザで background-position が回転しない不具合を修正しました。

372 |

2011年11月3日 ver1.2.2

374 |

Windows 版 Chrome の縦書きが「@ＭＳ明朝」以外では動作しないため CSS に「@ＭＳ明朝」の指定を追加しました。

377 |

2011年11月3日 ver1.2.1

379 |

段組高さを調整しました。
float が設定されているブロックの幅を調整しました。

383 |

2011年11月1日 ver1.2.0

385 |

writing-mode に対応した Safari および Chrome で writing-mode による縦書きに対応しました。最新版 Chrome で90度か移転方式による縦書き化を実行するとスクロールできなくなっていたため、writing-mode による縦書きに変更しました。
text-emphasis に対応した Safari および Chrome で text-emphasis による傍点に対応しました。

389 |

2011年9月13日 ver1.1.4

391 |

囲みつき文字を縦書き対象に追加しました。

394 |

2011年5月20日 ver1.1.3

396 |

InternetExplorer以外で縦書き化したとき、縦書き化領域の上下にあるオブジェクトを操作できなくなる場合がある不具合を修正しました(taketori.css を修正)。

399 |

2011年1月13日 ver1.1.3

401 |

デフォルトの言語判定を見直しました。(timdream さんありがとうございます！)。

404 |

2011年1月6日 ver1.1.2

406 |

縦書き解除時にフォント指定 Class および言語指定 Class が削除されない不具合を修正しました。

409 |

2010年12月15日 ver1.1.1

411 |

timdream/TAKETORI-JS を統合し中国語(台湾)環境での縦書き化を改善しました(timdream さんありがとうございます！)。
言語指定オプションを追加しました。

415 |

2010年11月21日 ver1.0.6

417 |

write-mode 対応環境向け縦書き class 名を「taketori-msie-ttb」から「taketori-writingmode-ttb」に変更しました。
縦書き対象に指定された要素に対して、「writing-mode: tb-rl」または「-webkit-writing-mode: vertical-rl」があらかじめ設定されている場合、縦書き化対象としないようにしました。

421 |

2010年7月14日 ver1.0.5

423 |

「taketori-ie.css」を「taketori.css」に統合しました。
InternetExplorer8 でスタイル指定が90度回転しない場合がある不具合を修正しました。
InternetExplorer5.5+ と Opera10.5+ で、高さが適切に設定されない場合がある不具合を修正しました。
InternetExplorer 以外の環境でも「—」などの記号が90度回転するようにしました。

429 |

2010年7月13日 ver1.0.4

431 |

<head> 内で呼び出すとエラーが返る不具合を修正しました。
InternetExplorer の場合、縦書き対象ブロックに class名「taketori-msie」を追加するようにしました。InternetExplorer と他のブラウザとでは縦書きを実現する方法が異なるため、InternetExplorer にのみ適用するスタイルを指定しやすくしました。

435 |

2010年7月10日 ver1.0.3

437 |

「♪」などの記号が横倒しにならないようにしました。

440 |

2010年7月9日 ver1.0.2

442 |

使用されているフレームワークによっては、そのフレームワークの関数を属性として書き出してしまう場合がある問題を修正しました(見た目上これまでのバージョンでも特に問題は発生しません)。

445 |

2010年7月5日 22:00 ver1.0.1

447 |

非対応環境では動作しないようにしました。

450 |

2010年7月5日 ver1.0.0

452 |

最初に公開されたバージョンです。

455 |

457 | 458 | 459 | 460 | -------------------------------------------------------------------------------- /taketori.js: -------------------------------------------------------------------------------- 1 | /* Taketori - Make Text Vertical 2 | * Copyright 2010-2015 CMONOS Co. Ltd. (http://cmonos.jp) 3 | * 4 | * Version: 1.4.4 5 | * Lisence: MIT Lisence 6 | * Last-Modified: 2015-11-08 7 | */ 8 | 9 | 10 | var TaketoriDblClickAlert = { // should be unicode entity for Opera. 11 | 'ja-jp' : "\uFEFF\u7E26\u66F8\u304D\u5316\u3057\u305F\u3044\u90E8\u5206\u3092\u30C0\u30D6\u30EB\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u304F\u3060\u3055\u3044\u3002", 12 | 'zh-tw' : "\u9ede\u5169\u4e0b\u4ee5\u5207\u63db\u5230\u76f4\u6392\u986f\u793a\u3002", 13 | 'zh-cn' : "Double click to make text vertical.", 14 | 'ko-kr' : "Double click to make text vertical." 15 | }; 16 | var TaketoriDefaultLang = (document.getElementsByTagName('html')[0] && document.getElementsByTagName('html')[0].lang) ? 17 | (document.getElementsByTagName('html')[0].lang.search(/tw/i) != -1) ? "zh-tw" 18 | // : (document.getElementsByTagName('html')[0].lang.search(/(zh|cn)/i) != -1) ? "zh-cn" 19 | // : (document.getElementsByTagName('html')[0].lang.search(/(ko|kr)/i) != -1) ? "ko-kr" 20 | : "ja-jp" 21 | : "ja-jp"; 22 | //var TaketoriDefaultLang = "ja-jp"; // or .. simply set your language. 23 | 24 | var TaketoriTool = function () {}; 25 | TaketoriTool.prototype = { 26 | 27 | element : function(element) { 28 | if (arguments.length > 1) element = Array.prototype.slice.call(arguments); 29 | this.elements = new Array(); 30 | return this.appendElement(element); 31 | }, 32 | 33 | list : function () { return (this.elements) ? this.elements : [] }, 34 | 35 | appendElement : function(element) { 36 | if (arguments.length > 1) element = Array.prototype.slice.call(arguments); 37 | if (!element) return this; 38 | if (!this.elements) this.elements = new Array(); 39 | if (element.constructor == Array) { 40 | for (var i=0; i 30)) 157 | || typeof (document.createElement('div')).style.OWritingMode != 'undefined' 158 | ) ? true : false), 159 | isMultiColumnReady : (( 160 | typeof (document.createElement('div')).style.MozColumnWidth != 'undefined' 161 | || typeof (document.createElement('div')).style.webkitColumnWidth != 'undefined' 162 | || (typeof (document.createElement('div')).style.webkitWritingMode != 'undefined' && typeof (document.createElement('div')).style.webkitColumnWidth != 'undefined') 163 | || typeof (document.createElement('div')).style.OColumnWidth != 'undefined' 164 | || typeof (document.createElement('div')).style.msColumnWidth != 'undefined' 165 | || typeof (document.createElement('div')).style.columnWidth != 'undefined' 166 | ) ? true : false), 167 | isLegacy : ((navigator.appVersion.search(/MSIE/) != -1 168 | || typeof (document.createElement('div')).style.MozTransform != 'undefined' 169 | || typeof (document.createElement('div')).style.webkitTransform != 'undefined' 170 | || typeof (document.createElement('div')).style.OTransform != 'undefined' 171 | || typeof (document.createElement('div')).style.transform != 'undefined') ? false : true), 172 | isTextEmphasisReady : (( 173 | typeof (document.createElement('div')).style.MozTextEmphasisStyle != 'undefined' 174 | || typeof (document.createElement('div')).style.webkitTextEmphasisStyle != 'undefined' 175 | || typeof (document.createElement('div')).style.OTextEmphasisStyle != 'undefined' 176 | || typeof (document.createElement('div')).style.msTextEmphasisStyle != 'undefined' 177 | || typeof (document.createElement('div')).style.textEmphasisStyle != 'undefined' 178 | ) ? true : false), 179 | supportTouch : ((((!window.navigator.msPointerEnabled && !window.navigator.pointerEnabled) || navigator.userAgent.search(/iphone|ipad|android/i) != -1) && ('createTouch' in document || 'ontouchstart' in document)) ? true : false), 180 | 181 | document : (new TaketoriTool()), 182 | 183 | importCSS : function() { 184 | if (this.cssImported) return true; 185 | this.cssImported = false; 186 | var links = document.getElementsByTagName('link'); 187 | for (var i=0; i'); 212 | } 213 | this.cssImported = true; 214 | }, 215 | 216 | setTemporaryCSS : function(cssText) { 217 | if (!this.temporaryStyle) { 218 | this.temporaryStyle = document.createElement('style'); 219 | this.temporaryStyle.setAttribute('type','text/css'); 220 | document.getElementsByTagName('head')[0].appendChild(this.temporaryStyle); 221 | } 222 | this.temporaryStyle.appendChild(document.createTextNode(cssText)); 223 | }, 224 | 225 | removeTemporaryCSS : function() { 226 | if (this.temporaryStyle) { 227 | document.getElementsByTagName('head')[0].removeChild(this.temporaryStyle); 228 | this.temporaryStyle = null; 229 | } 230 | }, 231 | 232 | init : function() { 233 | if (!this.windowWidth) { 234 | var taketori = this; 235 | this.document.element(window).addEventListener('resize', function () { 236 | if (taketori.resizeTimer) clearTimeout(taketori.resizeTimer); 237 | taketori.resizeTimer = setTimeout(function () { taketori.refresh(); },500); 238 | }); 239 | } 240 | this.windowWidth = ((self.innerWidth) ? self.innerWidth : (document.compatMode != null && document.compatMode != "BackCompat") ? self.document.documentElement.clientWidth : self.document.body.clientWidth); 241 | this.windowHeight = ((self.innerHeight) ? self.innerHeight : (document.compatMode != null && document.compatMode != "BackCompat") ? self.document.documentElement.clientHeight : self.document.body.clientHeight); 242 | if (!this.isMSIE && this.rubyDisabled == null) { 243 | if (!!window.opera) { 244 | this.rubyDisabled = true; 245 | } else { 246 | var ruby = document.createElement('ruby'); 247 | var rubyDisplay = this.getStyle(ruby).display; 248 | this.rubyDisabled = (rubyDisplay == 'block') ? true : false; 249 | } 250 | } 251 | }, 252 | 253 | set : function (hash) { 254 | if (this.isLegacy) return this; 255 | if (!this.config) this.config = {}; 256 | if (hash != null) this.merge(this.config,hash); 257 | if (this.config.lang) this.config.lang = this.config.lang.toLowerCase(); 258 | return this; 259 | }, 260 | 261 | merge : function (original,hash) { 262 | if (!original) original = {}; 263 | if (hash != null) { 264 | for (var key in hash) { 265 | if (hash[key] != null) { 266 | if (hash[key].constructor == Array) { 267 | this.merge(original[key],hash[key]); 268 | } else if (typeof hash[key] == "string" || typeof hash[key] == "number" || typeof hash[key] == "boolean") { 269 | original[key] = hash[key]; 270 | } 271 | } 272 | } 273 | } 274 | return original; 275 | }, 276 | 277 | element : function (element) { 278 | if (this.isLegacy) return this; 279 | if (arguments.length > 1) element = Array.prototype.slice.call(arguments); 280 | if (!this.config.elements) this.config.elements = new Array(); 281 | if (element && element.constructor == Array) { 282 | for (var i=0; i 0) { 320 | elements = elements.sort(function (a,b) { return b.readabilityScore - a.readabilityScore }); 321 | var readableElements = new Array(); 322 | for (var i=0; i').replace(/"/g,'"').replace(/&/g,'&'); 386 | }, 387 | 388 | getCookie : function(name) { 389 | var cookies = new Array(); 390 | var cookiePairs = document.cookie.split(/;\s*/); 391 | for (var i=0; i < cookiePairs.length; i++) { 392 | if (cookiePairs[i] != "") { 393 | var eq = cookiePairs[i].indexOf("="); 394 | if (eq >= 0) { 395 | var key = cookiePairs[i].substring(0, eq); 396 | var value = cookiePairs[i].substring(eq+1, cookiePairs[i].length); 397 | cookies[key] = value; 398 | } 399 | } 400 | } 401 | return (name != null && cookies[name] != null) ? cookies[name] : ""; 402 | }, 403 | 404 | setCookie : function(name,value,expires) { 405 | if (!expires) { 406 | if (this.config.cookieExpires) { 407 | expires = this.config.cookieExpires; 408 | } else { 409 | expires = new Date(); 410 | expires.setTime(expires.getTime() + 86400000000); 411 | } 412 | } 413 | document.cookie = name + '=' + value + '; expires=' + expires.toGMTString() + ';' + ((this.config.cookieDomain != null && this.config.cookieDomain != "") ? ' domain=' + this.config.cookieDomain + ';' : '') + ((this.config.cookiePath != null && this.config.cookiePath != "") ? ' path=' + this.config.cookiePath : ''); 414 | }, 415 | 416 | deleteCookie : function(name) { 417 | this.setCookie(name, '', new Date(70, 0, 1, 0, 0, 1)); 418 | }, 419 | 420 | setOnLoad : function(func) { 421 | if (this.isLegacy) return this; 422 | if (typeof window.addEventListener == 'function') { 423 | window.addEventListener('load', func, false); 424 | } else if (typeof window.attachEvent == 'object') { 425 | window.attachEvent('onload', ((!this.isMultiColumnReady) ? function () { setTimeout(func,600) } : func)); 426 | } 427 | return this; 428 | }, 429 | 430 | getStyle : function(element) { 431 | if (element.currentStyle) { 432 | return element.currentStyle; 433 | } else { 434 | var style = document.defaultView.getComputedStyle(element, null); 435 | var div = document.createElement('div'); 436 | if (style.length) { 437 | for (var i=0; i 0 && style.height && style.height.search(/\d+\.?\d*(px|em)/i) != -1 && parseInt(style.height) > 0) { 462 | if (element.currentStyle || (style.cssFloat && style.cssFloat != 'none') || (style.display == 'inline-block')) { 463 | swapWH = true; 464 | } else { 465 | temp.style.width = 'auto'; 466 | temp.style.height = 'auto'; 467 | } 468 | } else if ((style.width && style.width.search(/\d+\.?\d*%/) != -1) || (style.height && style.height.search(/\d+\.?\d*%/) != -1)) { 469 | temp.style.width = (style.height && style.height.search(/\d+\.?\d*%/) != -1) ? style.height : 'auto'; 470 | temp.style.height = (style.width && style.width.search(/\d+\.?\d*%/) != -1) ? style.width : 'auto'; 471 | } else { 472 | if (style.width == '0px') temp.style.width = 'auto'; 473 | if (style.height == '0px') temp.style.height = 'auto'; 474 | } 475 | } 476 | if (!this.isWritingModeReady || swapWH || (this.isWritingModeReady && !cssTextOnly)) { 477 | var mw = 0; 478 | var mh = 0; 479 | var noRotate = false; 480 | if (this.isWritingModeReady) { 481 | mw = this.getMarginSize([style.paddingLeft,style.paddingRight,style.borderLeftWidth,style.borderRightWidth]); 482 | mh = this.getMarginSize([style.paddingTop,style.paddingBottom,style.borderTopWidth,style.borderBottomWidth]); 483 | noRotate = true; 484 | } else { 485 | mw = this.getMarginSize([style.paddingTop,style.paddingBottom,style.borderTopWidth,style.borderBottomWidth]); 486 | mh = this.getMarginSize([style.paddingLeft,style.paddingRight,style.borderLeftWidth,style.borderRightWidth]); 487 | } 488 | var w = (!isNaN(parseInt(style.width)) && parseInt(style.width) > 0) ? parseInt(style.width) : (element.width) ? element.width : (isBlock && element.offsetWidth) ? element.offsetWidth - ((noRotate) ? mw : mh) : null; 489 | var h = (!isNaN(parseInt(style.height)) && parseInt(style.height) > 0) ? parseInt(style.height) : (element.height) ? element.height : (isBlock && element.offsetHeight) ? element.offsetHeight - ((noRotate) ? mh : mw) : null; 490 | var resized = false; 491 | if (!w || !h) { 492 | var clone = (cssTextOnly) ? element.cloneNode(true) : temp; 493 | this.makeClipboard(this.process.target,true); 494 | this.clipboard.appendChild(clone); 495 | w = (clone.offsetWidth) ? clone.offsetWidth - ((noRotate) ? mw : mh) : clone.clientWidth; 496 | h = (clone.offsetHeight) ? clone.offsetHeight - ((noRotate) ? mh : mw) : clone.clientHeight; 497 | this.clipboard.removeChild(clone); 498 | } 499 | if (!isNaN(w) && !isNaN(h)) { 500 | w += mw; 501 | h += mh; 502 | if (h > this.process.config.height) { 503 | w = parseInt(w * this.process.config.height / h); 504 | h = this.process.config.height; 505 | resized = true; 506 | } 507 | if (w > this.process.config.width) { 508 | h = parseInt(h * this.process.config.width / w); 509 | w = this.process.config.width; 510 | resized = true; 511 | } 512 | if (resized || swapWH) { 513 | var cw = w - mw; 514 | var ch = h - mh; 515 | if (swapWH) { 516 | if (element.currentStyle || (style.display == 'inline-block')) { 517 | temp.width = ch; 518 | temp.style.width = ch + 'px'; 519 | } else { 520 | temp.style.width = 'auto'; 521 | } 522 | temp.height = cw; 523 | temp.style.height = cw + 'px'; 524 | } else { 525 | temp.width = cw; 526 | temp.height = ch; 527 | temp.style.width = cw + 'px'; 528 | temp.style.height = ch + 'px'; 529 | if (resized && isBlock) temp.style.overflow = 'auto'; 530 | } 531 | } 532 | } 533 | } 534 | temp.style.borderTopWidth = style.borderLeftWidth || 0; 535 | temp.style.borderRightWidth = style.borderTopWidth || 0; 536 | temp.style.borderBottomWidth = style.borderRightWidth || 0; 537 | temp.style.borderLeftWidth = style.borderBottomWidth || 0; 538 | temp.style.borderTopColor = style.borderLeftColor || ''; 539 | temp.style.borderRightColor = style.borderTopColor || ''; 540 | temp.style.borderBottomColor = style.borderRightColor || ''; 541 | temp.style.borderLeftColor = style.borderBottomColor || ''; 542 | temp.style.borderTopStyle = style.borderLeftStyle || 'none'; 543 | temp.style.borderRightStyle = style.borderTopStyle || 'none'; 544 | temp.style.borderBottomStyle = style.borderRightStyle || 'none'; 545 | temp.style.borderLeftStyle = style.borderBottomStyle || 'none'; 546 | if (isBlock || !cssTextOnly || (this.isWritingModeReady && (!this.isMSIE || this.isMSIE < 8))) { 547 | temp.style.paddingTop = style.paddingLeft || 0; 548 | temp.style.paddingRight = style.paddingTop || 0; 549 | temp.style.paddingBottom = style.paddingRight || 0; 550 | temp.style.paddingLeft = style.paddingBottom || 0; 551 | } 552 | if (this.isWritingModeReady) { 553 | if (isBlock && cssTextOnly) { 554 | temp.style.overflowX = (style.overflowY) ? style.overflowY : 'visible'; 555 | temp.style.overflowY = (style.overflowX) ? style.overflowX : 'visible'; 556 | } 557 | if (style.backgroundPositionX || style.backgroundPositionY) { 558 | temp.style.backgroundPositionX = (style.backgroundPositionY) ? (style.backgroundPositionY == 'top') ? 'left' : (style.backgroundPositionY == 'bottom') ? 'right' : style.backgroundPositionY : '50%'; 559 | temp.style.backgroundPositionY = (style.backgroundPositionX) ? (style.backgroundPositionX == 'left') ? 'top' : (style.backgroundPositionX == 'right') ? 'bottom' : style.backgroundPositionX : '50%'; 560 | } else if (style.backgroundPosition && style.backgroundPosition.search(/(\S+)\s+(\S)/) != -1) { 561 | temp.style.backgroundPosition = RegExp.$2 + ' ' + RegExp.$1 + ';'; 562 | } 563 | if (isBlock || !cssTextOnly || !this.isMSIE || this.isMSIE < 8) { 564 | temp.style.marginTop = style.marginLeft || 0; 565 | temp.style.marginRight = style.marginTop || 0; 566 | temp.style.marginBottom = style.marginRight || 0; 567 | temp.style.marginLeft = style.marginBottom || 0; 568 | } 569 | } else { 570 | temp.style.marginTop = parseInt(((style.marginTop && style.marginTop != 'auto') ? parseInt(style.marginTop) : 0) + ((w - h)/2)) + 'px'; 571 | temp.style.marginRight = parseInt(((style.marginRight && style.marginRight != 'auto') ? parseInt(style.marginRight) : 0) + ((h - w)/2)) + 'px'; 572 | temp.style.marginBottom = parseInt(((style.marginBottom && style.marginBottom != 'auto') ? parseInt(style.marginBottom) : 0) + ((w - h)/2)) + 'px'; 573 | temp.style.marginLeft = parseInt(((style.marginLeft && style.marginLeft != 'auto') ? parseInt(style.marginLeft) : 0) + ((h - w)/2)) + 'px'; 574 | if (style.backgroundPosition && style.backgroundPosition.search(/(\S+)\s+(\S)/) != -1) { 575 | temp.style.backgroundPosition = RegExp.$2 + ' ' + RegExp.$1 + ';'; 576 | } 577 | } 578 | return (cssTextOnly) ? temp.style.cssText + ';' + element.style.cssText : this.outerHTML(temp); 579 | }, 580 | 581 | outerHTML : function(element) { 582 | if (!element) return ''; 583 | var div = document.createElement('div'); 584 | div.appendChild(element.cloneNode(true)); 585 | return div.innerHTML; 586 | }, 587 | 588 | rotatedBlockAdditionalCSSText : function(w,h,g,o) { 589 | if (g == null) g = 0; 590 | if (this.isWritingModeReady) { 591 | return 'width:' + h + 'px;' 592 | + 'height:' + w + 'px;' 593 | + ((g) ? ((this.isMSIE && this.isMSIE == 9) ? (!o) ? 'padding-right:' : 'margin-right:' : (!o) ? 'padding-bottom:' : 'margin-bottom:') + g + 'px;' : '') 594 | + ((!o) ? 'position:relative;overflow:auto;overflow-x:auto;overflow-y:hidden;' : ''); 595 | } else { 596 | return 'width:' + w + 'px;' 597 | + 'height:' + h + 'px;' 598 | + 'margin-top:-' + h + 'px;' 599 | + 'margin-right:' + (h - w - g) + 'px;' 600 | + 'margin-bottom:' + (w + g) + 'px;' 601 | + 'margin-left:0;' 602 | + ((!o) ? 'padding-right:'+g+'px;overflow:auto;overflow-x:visible;overflow-y:auto;' : ''); 603 | } 604 | }, 605 | 606 | toVertical : function(wait,currentConfig) { 607 | if (this.isLegacy) return this; 608 | var taketori = this; 609 | if (wait == null || wait) { 610 | this.importCSS(); 611 | this.setOnLoad(function () { taketori.toVertical(false,currentConfig) }); 612 | } else if (!this.cssImported) { 613 | this.importCSS(); 614 | setTimeout(function () { taketori.toVertical(false,currentConfig) },120); 615 | } else { 616 | var setDblClickEvent = false; 617 | var setOnly = false; 618 | if (!this.targetElements) { 619 | if (!this.config.elements || this.config.elements[0] == '=auto') { 620 | this.targetElements = this.japaneseReadableElements((this.config.minScore == null) ? 3 : this.config.minScore); 621 | this.config.togglable = false; 622 | setDblClickEvent = true; 623 | } else if (this.config.elements[0] == '=dblclick') { 624 | setOnly = setDblClickEvent = true; 625 | } else { 626 | var targets = this.document.element(this.config.elements).list(); 627 | this.targetElements = new Array(); 628 | for (var i=0; i 50 || Math.abs(taketori.touchY - e.pageY) > 50) clicked = false; 647 | } 648 | taketori.touchX = e.pageX; 649 | taketori.touchY = e.pageY; 650 | if (!clicked) { 651 | taketori.dblClickTimer = setTimeout(function () { 652 | if (taketori.dblClickTimer) delete taketori.dblClickTimer; 653 | if (taketori.touchX) delete taketori.touchX; 654 | if (taketori.touchY) delete taketori.touchY; 655 | },500); 656 | return; 657 | } 658 | } 659 | taketori.toggle(taketori.lookUpBlockElements(e.target || e.srcElement)); 660 | taketori.document.stopPropagation(e); 661 | taketori.document.preventDefault(e); 662 | }); 663 | this.toggleEventAttached = true; 664 | } 665 | if (setOnly) { 666 | var user_lang = navigator.browserLanguage || navigator.language || navigator.userLanguage; 667 | user_lang = (user_lang.search(/tw/i) != -1) ? "zh-tw" : 668 | (user_lang.search(/(zh|cn)/i) != -1) ? "zh-cn" : 669 | (user_lang.search(/(ko|kr)/i) != -1) ? "ko-kr" : "ja-jp"; 670 | alert(TaketoriDblClickAlert[user_lang]); 671 | return this; 672 | } 673 | } 674 | if (this.ttbDisabled == null) this.ttbDisabled = (this.getCookie('TTB_DISABLED') == 'true') ? true : false; 675 | if (this.config.togglable) { 676 | if (!this.config.cookieDomain) this.config.cookieDomain = document.domain; 677 | if (!this.config.cookiePath) this.config.cookiePath = '/'; 678 | for(var i=0; i 1) ? true : false; 687 | e = e.touches[0]; 688 | if (clicked) { 689 | clearTimeout(element.taketori.dblClickTimer); 690 | delete element.taketori.dblClickTimer; 691 | if (is_not_tap || Math.abs(element.taketori.touchX - e.pageX) > 50 || Math.abs(element.taketori.touchY - e.pageY) > 50) clicked = false; 692 | } 693 | element.taketori.touchX = e.pageX; 694 | element.taketori.touchY = e.pageY; 695 | if (!clicked) { 696 | if (!is_not_tap) element.taketori.dblClickTimer = setTimeout(function () { 697 | if (element.taketori.dblClickTimer) delete element.taketori.dblClickTimer; 698 | if (element.taketori.touchX) delete element.taketori.touchX; 699 | if (element.taketori.touchY) delete element.taketori.touchY; 700 | },500); 701 | return; 702 | } 703 | } 704 | taketori.document.stopPropagation(e); 705 | taketori.document.preventDefault(e); 706 | if (taketori.ttbDisabled) { 707 | taketori.deleteCookie('TTB_DISABLED'); 708 | taketori.ttbDisabled = false; 709 | } else { 710 | taketori.setCookie('TTB_DISABLED','true'); 711 | taketori.ttbDisabled = true; 712 | } 713 | taketori.toVertical(false); 714 | }); 715 | element.taketori.toggleEventAttached = true; 716 | } 717 | this.toggle(element,this.ttbDisabled,true); 718 | } 719 | } else if (!this.ttbDisabled) { 720 | for(var i=0; i this.windowHeight) ? this.windowWidth : this.windowHeight; 802 | this.clipboard.style.top = '-' + (boardSize + 100) + 'px'; 803 | this.clipboard.style.left = '-' + (boardSize + 100) + 'px'; 804 | this.clipboard.style.width = boardSize + 'px'; 805 | this.clipboard.style.height = boardSize + 'px'; 806 | this.clipboard.style.overflow = 'auto'; 807 | } 808 | }, 809 | 810 | removeClipboard : function () { 811 | if (this.temporaryContent) this.temporaryContent.parentNode.removeChild(this.temporaryContent); 812 | if (this.clipboard) this.clipboard.parentNode.removeChild(this.clipboard); 813 | this.clipboard = null; 814 | this.temporaryContent = null; 815 | }, 816 | 817 | toPx : function (value,fontSize,isLineHeight,parentSize) { 818 | return (!value) ? 0 : (isLineHeight) ? ((value.search(/(\d+\.\d+)/) != -1) ? parseInt(RegExp.$1 * fontSize) : parseInt(1.5 * fontSize)) : (value.search(/\d+\.?\d*em/i) != -1) ? parseInt(parseFloat(value) * fontSize) : (value.search(/\d+\.?\d*%/) != -1) ? parseInt(parseFloat(value) * ((parentSize) ? parentSize : fontSize) / 100) : (value.search(/\d/) != -1) ? parseInt(value) : value; 819 | }, 820 | 821 | getFontSize : function (fontSize) { 822 | if (!isNaN(fontSize) || fontSize.search(/\d+px/) != -1) { 823 | return parseInt(fontSize); 824 | } else { 825 | var bodyFontSize = (this.getStyle(document.body)).fontSize; 826 | bodyFontSize = (bodyFontSize.search(/\d+\.?\d*(em|%)/) != -1) ? this.toPx(bodyFontSize,16) : parseInt(bodyFontSize); 827 | fontSize = this.toPx(fontSize,bodyFontSize); 828 | return (fontSize > 0) ? fontSize : 16; 829 | } 830 | }, 831 | 832 | setCurrentConfig : function (element,currentConfig) { 833 | if (!currentConfig) currentConfig = this.configClone(this.config); 834 | if (!currentConfig.classNameImported) { 835 | var className = element.className; 836 | if (className) { 837 | var configNames = ['width','height','fontFamily','maxHeight','multiColumnEnabled','gap','contentWidth','contentHeight','lang']; 838 | for(var i=0; i maxHeight) ? maxHeight : windowSize; 895 | } 896 | } else if (this.process.config.contentHeight && this.process.config.multiColumnEnabled) { 897 | var h = this.toPx(currentConfig.height,fontSize); 898 | this.process.config.columnCount = Math.ceil(this.process.config.contentHeight / (h+this.process.config.gap)); 899 | this.process.config.height = parseInt((this.process.config.contentHeight + this.process.config.gap) / this.process.config.columnCount) - this.process.config.gap; 900 | } else if (currentConfig.height && currentConfig.height == 'width') { 901 | this.process.config.height = this.process.config.width; 902 | } else if (!this.process.config.multiColumnEnabled) { 903 | this.process.config.height = this.process.config.contentHeight || this.toPx(currentConfig.height,fontSize); 904 | } else { 905 | this.process.config.height = this.toPx(currentConfig.height,fontSize); 906 | } 907 | this.process.currentConfig = currentConfig; 908 | return this; 909 | }, 910 | 911 | getElementWidth : function (element,style) { 912 | return ((element.offsetWidth) ? element.offsetWidth : element.scrollWidth) - this.getMarginSize([style.paddingLeft,style.paddingRight,style.borderLeftWidth,style.borderRightWidth]); 913 | }, 914 | 915 | getMarginSize : function (v) { 916 | var n = 0; 917 | for (var i=0; i 1) { 964 | var columnTotalHeight = this.process.config.width * this.process.config.columnCount; 965 | if (this.process.width + 50 < columnTotalHeight) { 966 | this.setTemporaryContentStyle(); 967 | this.temporaryContent.innerHTML = content; 968 | this.process.width = this.getTemporaryContentWidth(); 969 | } 970 | if (this.process.width + 50 >= columnTotalHeight) { 971 | height = this.getMultiColumnWidth(content); 972 | hasToBreak = (height > this.process.config.contentHeight) ? true : false; 973 | } 974 | } else if (this.isWritingModeReady) { 975 | this.temporaryContent.style.height = this.process.config.contentHeight + 'px'; 976 | this.temporaryContent.innerHTML = content; 977 | this.process.width = this.temporaryContent.scrollWidth || this.temporaryContent.clientWidth || this.temporaryContent.offsetWidth; 978 | hasToBreak = (this.process.width > this.process.config.contentWidth) ? true : false; 979 | } else { 980 | this.temporaryContent.style.width = this.process.config.contentHeight + 'px'; 981 | this.temporaryContent.innerHTML = content; 982 | this.process.width = this.temporaryContent.scrollHeight || this.temporaryContent.clientHeight || this.temporaryContent.offsetHeight; 983 | hasToBreak = (this.process.width > this.process.config.contentWidth) ? true : false; 984 | } 985 | this.clipboard.className = ''; 986 | return hasToBreak; 987 | }, 988 | 989 | getMultiColumnWidth : function (content) { 990 | if (!this.temporaryContent) { 991 | this.temporaryContent = document.createElement('div'); 992 | this.clipboard.appendChild(this.temporaryContent); 993 | } 994 | var width = 0; 995 | this.setTaketoriClassName(this.clipboard); 996 | this.setMultiColumnStyle(this.temporaryContent); 997 | this.temporaryContent.innerHTML = content; 998 | width = (this.isWritingModeReady) ? this.getTotalHeight(this.temporaryContent) : this.getTotalWidth(this.temporaryContent); 999 | this.clipboard.className = ''; 1000 | return width; 1001 | }, 1002 | 1003 | setMultiColumnStyle : function (element) { 1004 | element.className = 'taketori-col taketori-multi-column'; 1005 | element.style.overflow = 'auto'; 1006 | if (this.isWritingModeReady) { 1007 | element.style.width = this.process.config.width + 'px'; 1008 | element.style.height = this.process.config.height + 'px'; 1009 | } else { 1010 | element.style.width = this.process.config.height + 'px'; 1011 | element.style.height = this.process.config.width + 'px'; 1012 | } 1013 | element.style.MozColumnWidth = this.process.config.height + 'px'; 1014 | element.style.webkitColumnWidth = this.process.config.height + 'px'; 1015 | element.style.OColumnWidth = this.process.config.height + 'px'; 1016 | element.style.msColumnWidth = this.process.config.height + 'px'; 1017 | element.style.columnWidth = this.process.config.height + 'px'; 1018 | element.style.MozColumnGap = this.process.config.gap + 'px'; 1019 | element.style.webkitColumnGap = this.process.config.gap + 'px'; 1020 | element.style.OColumnGap = this.process.config.gap + 'px'; 1021 | element.style.msColumnGap = this.process.config.gap + 'px'; 1022 | element.style.columnGap = this.process.config.gap + 'px'; 1023 | element.style.MozColumnFill = 'auto'; 1024 | element.style.webkitColumnFill = 'auto'; 1025 | element.style.OColumnFill = 'auto'; 1026 | element.style.msColumnFill = 'auto'; 1027 | element.style.columnFill = 'auto'; 1028 | }, 1029 | 1030 | setMultiColumnWidth : function (element) { 1031 | if (this.isWritingModeReady) { 1032 | var h = this.getTotalHeight(element); 1033 | element.style.height = h + 'px'; 1034 | element.style.overflow = 'auto'; 1035 | this.fixMargin(element,this.process.config.width,h); 1036 | setTimeout( function () { element.style.height = element.scrollHeight + 'px'; element.style.overflow = 'visible'; }, 120); 1037 | } else { 1038 | var w = this.getTotalWidth(element); 1039 | element.style.width = w + 'px'; 1040 | element.style.overflow = 'auto'; 1041 | this.fixMargin(element,w,this.process.config.width); 1042 | setTimeout( function () { element.style.width = element.scrollWidth + 'px'; element.style.overflow = 'visible'; }, 120); 1043 | } 1044 | }, 1045 | 1046 | getTotalWidth : function (element) { 1047 | var w = element.scrollWidth || element.clientWidth || element.offsetWidth; 1048 | return Math.ceil(w / (this.process.config.height + this.process.config.gap)) * (this.process.config.height + this.process.config.gap) - this.process.config.gap; 1049 | }, 1050 | 1051 | getTotalHeight : function (element) { 1052 | var h = element.scrollHeight || element.clientHeight || element.offsetHeight; 1053 | return Math.ceil(h / (this.process.config.height + this.process.config.gap)) * (this.process.config.height + this.process.config.gap) - this.process.config.gap; 1054 | }, 1055 | 1056 | setTaketoriClassName : function (element) { 1057 | var className = (this.isWritingModeReady) ? 'taketori-writingmode-ttb' : 'taketori-ttb'; 1058 | if (this.rubyDisabled) className += ' taketori-ruby-disabled'; 1059 | if (!this.isTextEmphasisReady) className += ' taketori-text-emphasis-disabled'; 1060 | className += ( 1061 | (this.isWritingModeReady && navigator.userAgent.search(/WebKit/i) != -1 && navigator.userAgent.search(/Windows/i) != -1) ? ' taketori-atsign' : 1062 | (!this.process.currentConfig.fontFamily) ? ' taketori-serif' : 1063 | (this.process.currentConfig.fontFamily == 'sans-serif') ? ' taketori-sans-serif' : 1064 | (this.process.currentConfig.fontFamily == 'cursive') ? ' taketori-cursive' : 1065 | (this.process.currentConfig.fontFamily == 'kai') ? ' taketori-kai' : 1066 | ' taketori-serif' 1067 | ) + '-' + this.process.currentConfig.lang; 1068 | className += ' taketori-lang-' + this.process.currentConfig.lang; 1069 | element.className += ((element.className) ? ' ' : '') + className; 1070 | }, 1071 | 1072 | removeTaketoriClassName : function (element) { 1073 | this.document.element(element).removeClassName('taketori-ttb').removeClassName('taketori-writingmode-ttb').removeClassName('taketori-ruby-disabled').removeClassName('taketori-(lang|serif|sans-serif|cursive|kai)[\\w\\-]*'); 1074 | }, 1075 | 1076 | make : function(element,configReady) { 1077 | this.document.element(element).addClassName('taketori-in-progress'); 1078 | var taketori = this; 1079 | setTimeout( function () { 1080 | if (!configReady) taketori.setCurrentConfig(element); 1081 | taketori.makeClipboard(element); 1082 | taketori.parse(element,true); 1083 | taketori.complement(); 1084 | taketori.removeClipboard(); 1085 | taketori.document.element(element).removeClassName('taketori-in-progress'); 1086 | },120); 1087 | }, 1088 | 1089 | isSkipClass : function (element) { 1090 | if (this.config.skipClass && element.className) { 1091 | for (var i=0; i < this.config.skipClass.length; i++) { 1092 | var regexp = new RegExp("(^|\\s)"+this.config.skipClass[i]+"(?![\\w\\-])"); 1093 | if (this.elements.className.search(regexp) != -1) { 1094 | return true; 1095 | } 1096 | } 1097 | } 1098 | return false; 1099 | }, 1100 | 1101 | isSkipId : function (element) { 1102 | return (this.config.skipId && element.id && this.isIncludedIn(this.config.skipId,thisNode.id)) ? true : false; 1103 | }, 1104 | 1105 | parse : function(thisNode,isRoot) { 1106 | if (thisNode == this.clipboard) return; 1107 | if (thisNode.taketori && thisNode.taketori.ttb) this.toggle(thisNode,true,true); 1108 | var tag = thisNode.nodeName.toLowerCase(); 1109 | var openTag = ''; 1110 | var closeTag = ''; 1111 | var attrText = ''; 1112 | var cssText = ''; 1113 | var className = ''; 1114 | var text = ''; 1115 | var isList = false; 1116 | var nodeType = thisNode.nodeType; 1117 | var lineMarginHeight = null; 1118 | var clearLineMarginHeight = false; 1119 | var hasChildNodes = thisNode.hasChildNodes && thisNode.hasChildNodes(); 1120 | switch (nodeType) { 1121 | case 1: 1122 | var nodeStyle = this.getStyle(thisNode); 1123 | if (this.process.isBreakable) { 1124 | var fontSize = this.getFontSize(nodeStyle.fontSize); 1125 | this.process.lineHeight = this.toPx(nodeStyle.lineHeight,fontSize,true); 1126 | if (!this.process.lineLength) this.process.lineLength = this.process.config.height; 1127 | if (!isRoot && nodeStyle.display == 'block') { 1128 | var parentLineLength = this.process.lineLength; 1129 | this.process.lineLength -= this.getMarginSize([nodeStyle.marginTop,nodeStyle.marginBottom,nodeStyle.paddingTop,nodeStyle.paddingBottom,nodeStyle.borderTopWidth,nodeStyle.borderBottomWidth]); 1130 | if (this.process.lineLength < fontSize) this.process.lineLength = fontSize; 1131 | } 1132 | this.process.roughFormula = fontSize * this.process.lineHeight / this.process.lineLength; 1133 | } 1134 | this.process.letterSpacing = this.letterSpacing(nodeStyle) || 0; 1135 | if (!isRoot) { 1136 | if (this.isIncludedIn(['img','object','embed','video','audio','textarea'],tag)) { 1137 | this.appendHTML(this.counterClockwiseRotatedOuterHTML(thisNode,nodeStyle)); 1138 | return; 1139 | } else if (this.isSkipClass(thisNode) || this.isSkipId(thisNode)) { 1140 | this.appendHTML(this.counterClockwiseRotatedOuterHTML(thisNode,nodeStyle)); 1141 | return; 1142 | } else if (this.isIncludedIn(['link','meta','base','script','style','map'],tag)) { 1143 | this.process.columnHTML += this.outerHTML(thisNode); 1144 | return; 1145 | } else if (tag == '!') { 1146 | return; 1147 | } else if (this.isIncludedIn(['br','input','select','option'],tag) || (this.isMSIE && this.isMSIE < 8 && tag == 'table')) { 1148 | this.appendHTML(this.outerHTML(thisNode)); 1149 | return; 1150 | } 1151 | var attributes = thisNode.attributes; 1152 | var setLtr = false; 1153 | var setKenten = false; 1154 | for (var i=0;i 7)) { 1190 | if (tag == 'li' && this.process.listStyleType && this.process.listStyleType[this.process.listStyleType.length-1] != '') { 1191 | attrText += ' data-marker="'+this.getListMarkerText()+'"'; 1192 | } 1193 | if (tag == 'ul' || tag == 'ol') { 1194 | isList = true; 1195 | this.process.listStart[this.process.listStart.length] = 0; 1196 | var listStyleType = nodeStyle.listStyleType.toLowerCase(); 1197 | if (this.isIncludedIn(['none','disc','circle','square'],listStyleType)) { 1198 | this.process.listStyleType[this.process.listStyleType.length] = ''; 1199 | } else { 1200 | this.process.listStyleType[this.process.listStyleType.length] = listStyleType; 1201 | className += ((className) ? ' ' : '') + 'cjk'; 1202 | } 1203 | } 1204 | if (this.isWritingModeReady) { 1205 | if (tag == 'strong') { 1206 | if (!this.isTextEmphasisReady) { 1207 | if (!this.process.kenten) setKenten = true; 1208 | this.process.kenten = true; 1209 | } 1210 | className += ((className) ? ' ' : '') + 'bo-ten'; 1211 | } 1212 | } 1213 | if (!this.isWritingModeReady && nodeStyle.fontStyle && nodeStyle.fontStyle.toLowerCase() == 'italic' && hasChildNodes) { 1214 | className += ((className) ? ' ' : '') + 'italic'; 1215 | } 1216 | if (nodeStyle.textDecoration && hasChildNodes) { 1217 | var textDecoration = nodeStyle.textDecoration.toLowerCase(); 1218 | if (textDecoration != 'none') { 1219 | if (textDecoration.search(/underline/i) != -1 && textDecoration.search(/overline/i) != -1) { 1220 | className += ((className) ? ' ' : '') + 'bothline'; 1221 | lineMarginHeight = this.lineMarginHeight(nodeStyle); 1222 | } else if (textDecoration.search(/underline/i) != -1) { 1223 | className += ((className) ? ' ' : '') + 'underline'; 1224 | lineMarginHeight = this.lineMarginHeight(nodeStyle); 1225 | } else if (textDecoration.search(/overline/i) != -1) { 1226 | className += ((className) ? ' ' : '') + 'overline'; 1227 | lineMarginHeight = this.lineMarginHeight(nodeStyle); 1228 | } 1229 | if (!this.isWritingModeReady && lineMarginHeight) { 1230 | if (!this.process.lineMarginHeight) clearLineMarginHeight = true; 1231 | this.process.lineMarginHeight = lineMarginHeight; 1232 | } 1233 | } 1234 | } 1235 | } 1236 | if (className) attrText += ' class="'+className+'"'; 1237 | if (cssText) attrText += ' style="'+cssText+'"'; 1238 | if (!isRoot) openTag += '<'+tag+attrText; 1239 | } 1240 | if (!hasChildNodes) { 1241 | if (!isRoot) { 1242 | openTag += '>'; 1243 | this.process.columnHTML += openTag; 1244 | } 1245 | } else { 1246 | if (!isRoot) { 1247 | this.process.columnHTML += openTag + '>'; 1248 | if (isList) openTag += ' start=""'; 1249 | openTag += '>'; 1250 | closeTag = ''; 1251 | this.process.openTags[this.process.openTags.length] = openTag; 1252 | this.process.closeTags[this.process.closeTags.length] = tag; 1253 | } 1254 | for (var i=0; izenkaku 1277 | text = text.replace(/([^\u0000-\u10FF]\s*[0-9]{2}|^\s*[0-9]{2})\s*([a-zA-Z]{1,2})(?=\s*[^\u0000-\u10FF]|$)/g,function (a,p,w) {return p + w.replace(/./g, function (c) {return String.fromCharCode(c.charCodeAt(0) + 65248)})});//hankaku->zenkaku 1278 | var taketori = this; 1279 | var count = 0; 1280 | text.replace(/&#?\w+;|\s+|./g,function (w) { 1281 | 1282 | //CJK 1283 | if (w.search(/^[\u1100-\u11FF\u2030-\u217F\u2460-\u24FF\u2600-\u261B\u2620-\u277F\u2E80-\u2FDF\u2FF0-\u4DBF\u4E00-\u9FFF\uA960-\uA97F\uAC00-\uD7AF\uD7B0-\uD7FF\uF900-\uFAFF\uFE30-\uFE4F\uFF00\uFF01\uFF03-\uFF06\uFF08-\uFF0C\uFF0E-\uFF1B\uFF1F-\uFF3D\uFF40-\uFF5B\uFF5D-\uFFEF]$/) != -1) { 1284 | taketori.setCJK(); 1285 | if (taketori.process.currentConfig.zh && taketori.isWritingModeReady && !taketori.process.ltr && (w == "\uFF1A" || w == "\uFF1B")) { 1286 | w = '' + w + ''; 1287 | } else if ((!taketori.isWritingModeReady || taketori.process.kenten) && !taketori.process.ltr) { 1288 | w = taketori.kinsokuShori('' + w + ''); 1289 | } 1290 | count++; 1291 | 1292 | //space 1293 | } else if (w.search(/^\s+$/) != -1) { 1294 | if (count > 0) count+=0.5; 1295 | 1296 | //NoCJK 1297 | } else { 1298 | if (w.search(/^[0-9a-zA-Z]$/) != -1) { 1299 | count+=0.5; 1300 | taketori.process.latin++; 1301 | } else { 1302 | count++; 1303 | taketori.process.latin = 0; 1304 | } 1305 | if (taketori.process.noCJK == 0) w = '' + w; 1306 | if (!this.isTextEmphasisReady) taketori.process.noCJK++; 1307 | } 1308 | if (!taketori.process.isBreakable || (count > 1 && taketori.isNoBreak(taketori.process.width + (count * taketori.process.roughFormula) + taketori.process.lineHeight))) { 1309 | taketori.process.columnHTML += w; 1310 | } else { 1311 | count = 1; 1312 | taketori.appendHTML(w); 1313 | } 1314 | }); 1315 | this.setCJK(); 1316 | break; 1317 | } 1318 | }, 1319 | 1320 | isNoBreak : function (h) { 1321 | if (this.isWritingModeReady || !this.process.isMultiColumnEnabled) { 1322 | return (h < this.process.config.width) ? true : false; 1323 | } else if (this.process.config.contentHeight && this.process.config.contentWidth) { 1324 | if (this.process.config.columnCount && this.process.config.columnCount > 1) { 1325 | return (h + 50 < this.process.config.width * this.process.config.columnCount) ? true : false; 1326 | } else { 1327 | return (h < this.process.config.contentHeight) ? true : false; 1328 | } 1329 | } else { 1330 | return true; 1331 | } 1332 | }, 1333 | 1334 | setCJK : function () { 1335 | if (this.process.noCJK > 0) { 1336 | this.process.columnHTML = ((this.process.noCJK == this.process.latin && this.process.latin <= 2) ? this.process.columnHTML.replace('','') : this.process.columnHTML.replace('','')) + ''; 1337 | } 1338 | this.process.latin = this.process.noCJK = 0; 1339 | }, 1340 | 1341 | lineMarginHeight : function (nodeStyle) { 1342 | var lineHeight = nodeStyle.lineHeight; 1343 | var fontSize = this.getFontSize(nodeStyle.fontSize); 1344 | if (lineHeight.search(/\d+px/i) != -1) { 1345 | return parseInt((parseInt(lineHeight) - fontSize) / 2); 1346 | } else if (lineHeight.search(/\d+%/) != -1) { 1347 | return parseInt(((parseInt(lineHeight) / 100) * fontSize - fontSize) / 2); 1348 | } else { 1349 | return parseInt((parseFloat(lineHeight) * fontSize - fontSize) / 2); 1350 | } 1351 | }, 1352 | 1353 | letterSpacing : function (nodeStyle) { 1354 | var letterSpacing = nodeStyle.letterSpacing; 1355 | if (letterSpacing.search(/normal/i) != -1) { 1356 | return 0; 1357 | } else if (letterSpacing.search(/\d+px/i) != -1) { 1358 | return parseInt(letterSpacing); 1359 | } else { 1360 | var fontSize = this.getFontSize(nodeStyle.fontSize); 1361 | if (letterSpacing.search(/\d+%/) != -1) { 1362 | return parseInt((parseInt(letterSpacing) / 100) * fontSize); 1363 | } else { 1364 | return parseInt(parseFloat(letterSpacing) * fontSize); 1365 | } 1366 | } 1367 | }, 1368 | 1369 | getListMarkerText : function () { 1370 | var n = ++this.process.listStart[this.process.listStart.length-1]; 1371 | var listType = this.process.listStyleType[this.process.listStyleType.length-1]; 1372 | var list; 1373 | if (listType == "A" || listType == "\u30A2" || listType == "upper-latin" || listType == "katakana") { 1374 | list = ["\u30A2","\u30A2","\u30A4","\u30A6","\u30A8","\u30AA","\u30AB","\u30AD","\u30AF","\u30B1","\u30B3","\u30B5","\u30B7","\u30B9","\u30BB","\u30BD","\u30BF","\u30C1","\u30C4","\u30C6","\u30C8","\u30CA","\u30CB","\u30CC","\u30CD","\u30CE","\u30CF","\u30D2","\u30D5","\u30D8","\u30DB","\u30DE","\u30DF","\u30E0","\u30E1","\u30E2","\u30E4","\u30E6","\u30E8","\u30E9","\u30EA","\u30EB","\u30EC","\u30ED","\u30EF","\u30F0","\u30F1","\u30F2","\u30F3"]; 1375 | return "(" + list[n] + ")"; 1376 | } else if (listType == "a" || listType == "\u3042" || listType == "lower-latin" || listType == "hiragana") { 1377 | list = ["\u3042","\u3042","\u3044","\u3046","\u3048","\u304A","\u304B","\u304D","\u304F","\u3051","\u3053","\u3055","\u3057","\u3059","\u305B","\u305D","\u305F","\u3061","\u3064","\u3066","\u3068","\u306A","\u306B","\u306C","\u306D","\u306E","\u306F","\u3072","\u3075","\u3078","\u307B","\u307E","\u307F","\u3080","\u3081","\u3082","\u3084","\u3086","\u3088","\u3089","\u308A","\u308B","\u308C","\u308D","\u308F","\u3090","\u3091","\u3092","\u3093"]; 1378 | return "(" + list[n] + ")"; 1379 | } else if (listType == "\u30A4" || listType == "katakana-iroha") { 1380 | list = ["\u30A4","\u30A4","\u30ED","\u30CF","\u30CB","\u30DB","\u30D8","\u30C8","\u30C1","\u30EA","\u30CC","\u30EB","\u30F2","\u30EF","\u30AB","\u30E8","\u30BF","\u30EC","\u30BD","\u30C4","\u30CD","\u30CA","\u30E9","\u30E0","\u30A6","\u30F0","\u30CE","\u30AA","\u30AF","\u30E4","\u30DE","\u30B1","\u30D5","\u30B3","\u30A8","\u30C6","\u30A2","\u30B5","\u30AD","\u30E6","\u30E1","\u30DF","\u30B7","\u30F1","\u30D2","\u30E2","\u30BB","\u30B9"]; 1381 | return "(" + list[n] + ")"; 1382 | } else if (listType == "\u3044" || listType == "hiragana-iroha") { 1383 | list = ["\u3044","\u3044","\u308D","\u306F","\u306B","\u307B","\u3078","\u3068","\u3061","\u308A","\u306C","\u308B","\u3092","\u308F","\u304B","\u3088","\u305F","\u308C","\u305D","\u3064","\u306D","\u306A","\u3089","\u3080","\u3046","\u3090","\u306E","\u304A","\u304F","\u3084","\u307E","\u3051","\u3075","\u3053","\u3048","\u3066","\u3042","\u3055","\u304D","\u3086","\u3081","\u307F","\u3057","\u3091","\u3072","\u3082","\u305B","\u3059"]; 1384 | return "(" + list[n] + ")"; 1385 | } else if (listType == "I" || listType == "upper-roman") { 1386 | list = ["I","I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX"]; 1387 | return "(" + list[n] + ")"; 1388 | } else if (listType == "i" || listType == "lower-roman") { 1389 | list = ["i","i","ii","iii","iv","v","vi","vii","viii","ix","x","xi","xii","xiii","xiv","xv","xvi","xvii","xviii","xix","xx"]; 1390 | return "(" + list[n] + ")"; 1391 | } else if (listType == "1" || listType == "decimal" || listType == "\u4E00" || listType == "cjk-ideographic" || listType == "\u58F1") { 1392 | if (n <= 10) { 1393 | list = (listType == "\u58F1") ? ["\u58F1","\u58F1","\u5F10","\u53C2","\u56DB","\u4F0D","\u516D","\u4E03","\u516B","\u4E5D","\u62FE"] : ["\u4E00","\u4E00","\u4E8C","\u4E09","\u56DB","\u4E94","\u516D","\u4E03","\u516B","\u4E5D","\u5341"]; 1394 | return '(' + list[n] + ')'; 1395 | } else { 1396 | return '(' + n + ')'; 1397 | } 1398 | } else { 1399 | return ""; 1400 | } 1401 | }, 1402 | 1403 | appendHTML : function (w,isTerminated) { 1404 | var html = ''; 1405 | if (w == null) w = ''; 1406 | if ((isTerminated || this.process.isBreakable) && this.process.columnHTML != '') { 1407 | if ((this.isWritingModeReady && !this.isMultiColumnReady) || !this.process.isMultiColumnEnabled) { 1408 | if (isTerminated) { 1409 | html = this.columnComplement(); 1410 | } else { 1411 | html = this.columnComplement(this.process.columnHTML + w); 1412 | } 1413 | if (isTerminated || this.process.config.width < this.getWidth(html)) { 1414 | if (!isTerminated) html = this.columnComplement(); 1415 | this.process.content += '

' + html + '

'; 1416 | this.process.columnCount++; 1417 | if (isTerminated || (this.process.config.columnCount && this.process.config.columnCount == this.process.columnCount)) this.containerBreak(); 1418 | } 1419 | } else if (this.process.config.contentHeight && this.process.config.contentWidth) { 1420 | if (isTerminated) { 1421 | html = this.columnComplement(); 1422 | } else { 1423 | html = this.columnComplement(this.process.columnHTML + w); 1424 | } 1425 | if (isTerminated || this.hasToBreak(html)) { 1426 | if (!isTerminated) html = this.columnComplement(); 1427 | if (this.process.config.columnCount && this.process.config.columnCount > 1) { 1428 | this.process.content += '

' + html + '

'; 1429 | } else { 1430 | this.process.content += '

' + html + '

'; 1431 | } 1432 | this.containerBreak(); 1433 | } 1434 | } else if (isTerminated) { 1435 | this.process.content = document.createElement('div'); 1436 | this.setMultiColumnStyle(this.process.content) 1437 | this.process.content.innerHTML = this.columnComplement() 1438 | this.containerBreak(); 1439 | this.setMultiColumnWidth(this.process.target.firstChild) 1440 | } 1441 | } 1442 | this.process.columnHTML += w; 1443 | }, 1444 | 1445 | columnComplement : function (column) { 1446 | var isTrueColumn = false; 1447 | var html = ''; 1448 | if (column == null) { 1449 | html = this.process.columnHTML + ((this.process.noCJK > 1) ? '' : '');; 1450 | isTrueColumn = true; 1451 | } else { 1452 | html = column + ((this.process.noCJK) ? '' : ''); 1453 | } 1454 | if (isTrueColumn) { 1455 | this.process.columnHTML = ''; 1456 | this.process.width = 0; 1457 | if (this.process.noCJK) this.process.noCJK = 1; 1458 | if (this.process.latin) this.process.latin = 1; 1459 | } 1460 | var closeTags = ''; 1461 | var openTags = this.process.openTagsHTML; 1462 | var isNewItem = true; 1463 | for (var i=this.process.closeTags.length-1; i>=0; i--) { 1464 | var closeTag = this.process.closeTags[i]; 1465 | var regexp = new RegExp("<"+closeTag+"(?!\\w)[^>]*>\\s*$"); 1466 | if (html.search(regexp) == -1) { 1467 | closeTags += ''; 1468 | } else if (closeTags == '') { 1469 | html = html.replace(regexp,''); 1470 | if (closeTag == 'li') isNewItem = false; 1471 | } 1472 | } 1473 | if (isTrueColumn) { 1474 | this.process.openTagsHTML = this.process.openTags.join(''); 1475 | if (isNewItem) this.process.openTagsHTML = this.process.openTagsHTML.replace(/ data-marker=".*?"/g,''); 1476 | for (var i=0; i]*class="cjk"[^>]*>.<\/span>)$/,''); 1513 | if (RegExp.$1) w = '' + RegExp.$1 + w + ''; 1514 | this.process.kinsoku = null; 1515 | } 1516 | return w; 1517 | }, 1518 | 1519 | complement : function () { 1520 | this.appendHTML('',true); 1521 | }, 1522 | 1523 | containerBreak : function () { 1524 | if (typeof this.process.config.onbreak == 'function') { 1525 | this.process.config.onbreak(this); 1526 | } else { 1527 | this._containerBreak(); 1528 | } 1529 | }, 1530 | 1531 | _containerBreak : function () { 1532 | if (this.process.target) { 1533 | this.removeClipboard(); 1534 | if (!this.process.target.taketori) this.process.target.taketori = {}; 1535 | if (!this.process.config.contentWidth || !this.process.config.contentHeight || !this.process.done) { 1536 | var alt = this.process.target.innerHTML; 1537 | this.setTaketoriClassName(this.process.target); 1538 | if (typeof this.process.content == 'object') { 1539 | this.process.target.innerHTML = ''; 1540 | this.process.target.appendChild(this.process.content); 1541 | } else { 1542 | this.process.target.innerHTML = this.process.content; 1543 | var columnNode = this.process.target.firstChild; 1544 | var taketori = this; 1545 | var h = this.process.config.width; 1546 | var g = this.process.config.gap; 1547 | setTimeout(function () { 1548 | if (taketori.isWritingModeReady) { 1549 | if (columnNode.clientHeight < columnNode.scrollHeight) { 1550 | columnNode.style.height = columnNode.scrollHeight + 'px'; 1551 | } 1552 | } else { 1553 | if (columnNode.clientWidth < columnNode.scrollWidth) { 1554 | var w = columnNode.scrollWidth; 1555 | columnNode.style.width = w + 'px'; 1556 | taketori.fixMargin(columnNode,w,h,g,taketori.process.config.multiColumnEnabled); 1557 | } 1558 | } 1559 | },600); 1560 | } 1561 | if (this.process.config.contentWidth && this.process.config.contentHeight) this.process.done = true; 1562 | this.process.content = ''; 1563 | this.process.target.taketori.ttb = true; 1564 | this.process.target.taketori.alt = alt; 1565 | this.process.target.taketori.config = this.configClone(this.process.currentConfig); 1566 | this.process.target.taketori.clientWidth = this.process.target.clientWidth; 1567 | this.process.target.taketori.windowHeight = this.windowHeight; 1568 | } 1569 | this.makeClipboard(this.process.target); 1570 | } 1571 | }, 1572 | 1573 | fixMargin : function (rotatedNode,w,h,g,o) { 1574 | if (!g) g = 0; 1575 | if (this.isWritingModeReady) { 1576 | if (g) { 1577 | if (!o) { 1578 | rotatedNode.style.paddingBottom = g + 'px'; 1579 | } else { 1580 | rotatedNode.style.marginBottom = g + 'px'; 1581 | } 1582 | } 1583 | } else { 1584 | rotatedNode.style.marginTop = '-' + h + 'px'; 1585 | rotatedNode.style.marginRight = (h - w - g) + 'px'; 1586 | rotatedNode.style.marginBottom = (w + g) + 'px'; 1587 | rotatedNode.style.marginLeft = 0; 1588 | if (!o && g) rotatedNode.style.paddingRight = g + 'px'; 1589 | } 1590 | }, 1591 | 1592 | refresh : function () { 1593 | if (this.isLegacy) return this; 1594 | this.init(); 1595 | for(var i=0; i