Follow Us.RSS

2010年7月5日(月)ウェブにも縦書きを!「竹取JS」公開

  • JavaScript で縦書き表示を実現する「竹取JS」を「MITライセンス」で公開しました。「竹取Web」につづく縦書き応援企画第2弾です。中国語と韓国語の縦書き化にも対応しています。

  • (2010年7月5日(月) 午前9時7分29秒 更新)
  • このエントリーをはてなブックマークに追加TweetBuzzurlにブックマークBuzzurlにブックマーク

CSS3の普及によって90度回転方式縦書き化が可能に!

これまで「writing-mode: tb-rl;」を指定可能な InternetExplorer5.5+ 以外の環境でレイアウトを保ったまま縦書きを表示することは困難でした。

ところが最近、IE 以外の主要ブラウザすべてが、CSS3 の「transform: rotate(deg)」に対応しました。つまり表示を自由に回転させることが可能になったわけです。

ということは、どういうことでしょう?

あるブロックを縦書き化したいとします。「回転できる」となると…、文字ごとに-90度回転させて、そのブロックを90度回転させれば…、そうです! 見た目としては縦書きになりますよね。

そこで、「竹取JS」では、IE5.5+ では「writing-mode: tb-rl;」を利用し、それ以外の Firefox3.5+ / Safari3.2+ / Chrome3.0+ / Opera10.5+ では文字とブロックをそれぞれ回転させる方法で、縦書きを実現しています。

そのため、margin/padding/border などの指定についても、位置が90度回転します(top→right/right→bottom/bottom→left/left→top)。これは縦書きであろうと指定位置が回転することのない CSS 本来の挙動とは異なりますが、現状では現実的な解だと思います。

なお、IE が実装している「writing-mode: tb-rl;」では CSS の規定に従い縦書き時にも指定位置が回転しません。実はこれが「正しい」挙動なのですが、「竹取JS」では IE でも指定を回転させています。

ちなみに、IE5.5-7 までは指定位置が回転しなかったインライン要素の padding が、IE8 では(borderは回転しないのに)90度回転するなど、同じ IE でも挙動の違いがあるようです。

それもそのはず、実のところ CSS3 においても縦書きの仕様は未だ確定していないそうです。

そんな中、現在この「日本で」、CSS に縦書きを盛り込むべく、100年先500年先(!)を見据えた真剣で緻密な議論がかわされています。日本語でも議論に参加できますので、興味のある方はぜひ注目してください。

主要ブラウザには縦書きを可能にするポテンシャルがもう十分にあります。あとは、縦書きをどのように指定して表示させるのか、というところにまで来ているのではないでしょうか。電子書籍の普及が目前に迫る中、次世代の標準を模索する縦書きCSSの議論はまさに要注目です!

「竹取JS」を使おう!

「竹取JS」のライセンスは「MITライセンス」です。

弊社では、たとえ強引な方法であってもウェブに縦書きが増えれば、縦書きの好さを再認識する人々が増え、それが CSS に縦書き関連仕様を盛り込むための一助になるのではないかと考えました。

主要ブラウザ全てが標準で美しい縦書きを表示できるようになる、その日まで、というよりもその日が少しでも早く来るように、ぜひいろいろなサイトで使っていただければと思います。

ただ、縦書き対象文字数が多いとかなり重くなりますので注意してください。使い方については「竹取JS」の配布ページで解説しています。

ちょっと試してみたいときには、ブックマークレットがおすすめです。特に「」はけっこう楽しいですよ。ダブルクリックした場所が縦書きになります。もう一度ダブルクリックすると横書きに戻ります。

実際、個人的には手放せないブックマークレットになっています。長文記事を読むには縦書きの方が読みやすいですね。

段組み表示する「竹取Web」も見た目が雑誌のようでおもしろかったですが、結局横スクロールの方が読み進めやすいような気もしました。縦書きの故郷(?)巻き物っぽいからでしょうか。

最後にブックマークレットで縦書き化したスクリーンショットをご紹介します。

ブックマークレットだから mixi や twitter などでも使えますよ。

中国語も縦書き化できます。

中国語環境はまったくわからないので、フォント指定などが行き届いていないと思いますが、同梱の CSS ファイルを調整してもらえればなんとか使えるのではないでしょうか。

ハングルも縦書き化します。

レイアウトがそっくり横倒しになっているのがわかるかと思います。これは Wikipedia ですが、これだけの分量になると非常に重くなります。利用する際は注意してください。

ウェブで簡単に縦書きできる時代はもうすぐそこまで来ています! ぜひ「竹取JS」で時代を先取りしてください!(^_^)/

(CMONOS.JP の次期バージョンには「竹取JS」による縦書き表示を組み込んだ小説用設定を用意する予定です。)

コメント

トラックバック

関連記事

[画像]

CMONOS.JP | 開発者ブログ | ついに WebKit が縦書きの実装に着手!

2010年11月25日 ...縦書き CSS の仕様が固まりつつあることを受けて、最新の WebKit Nightly Build が ついに縦書きを実装しました。まだまだ実験的な実装ですが、WebKit が縦書きを サポートする意志を明らかにしたことの影響はかなり大きいと言えるでしょう。
https://cmonos.jp/blog/2010112501/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書き文庫の「涅槃」がすごい!

2010年4月23日 ...縦書き文庫さんが公開している MIT ライセンスの縦書き組版エンジン「涅槃」がとてもよく できていました。JavaScript で手軽に組み込めるのがいいですね!
https://cmonos.jp/blog/2010042300/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 日中韓ウェブをまるっと縦書き化

2011年9月14日 ... 既存ウェブサイトをどんどん縦書き化する無料ウェブサービス「竹取Web」が UTF-8 化。 中国語やハングルも文字化けせずに縦書き化できるようになりました。
https://cmonos.jp/blog/2011091400/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書きのススメ

2011年2月1日 ... WebKit への縦書き実装が着実に進み、ウェブ上で縦書きが読める日ももうすぐです。 そこで今から縦書きウェブの予習をしておきましょう。
https://cmonos.jp/blog/2011020101/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書きWeb、再び

2010年5月14日 ... 今回リリースした「CMONOS.JP」の最新版では縦書き表示機能が強化されました。ルビ や傍点にも対応しています。また、縦書き体験を広げるため、既存ホームページを縦書き 表示する「竹取 Web」を公開しました。
https://cmonos.jp/blog/2010051400/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 縦書きもできるアクセスカウンター

2008年9月12日 ... CMONOS.JP のアクセスカウンターには、縦書き画像も用意されています。もちろん 自作の画像で縦書き画像を作成することも可能。GIF画像の特性を活かして毎回色を 変えられるなど、ユニークな機能がたくさんありますよ...
https://cmonos.jp/blog/2008091200/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 導入事例の裏側大公開!「東龍」様 編

2010年11月25日 ... また「東龍」様の新しいサイトでは、竹取JSを利用して、一部縦書き表示となっています。 京都という立地や、東アジアを意識したデザインにぴったりマッチしていますね! 竹取JS は処理が重いことが難点ですが、この程度の長さの文章であれ ...
https://cmonos.jp/blog/2010112500/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | 簡単スマートフォン対応

2012年1月6日 ... iPhone や Android 携帯でも縦書き. 「竹取Web」は、JavaScript 非依存なので、 iPhone など非力な環境でも縦書き化できます。 あらかじめブックマークレットを登録し ておけば、縦書きしたいページを表示してから、ブックマークを開き、 .
https://cmonos.jp/blog/2012010600/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | フィードミキサーでツイッターを表示!

2010年5月31日 ... JP | 開発者ブログ | フィードミキサーでツイッターを表示! 2010年5月31日 ... JavaScript で縦書き表示を実現する「竹取JS」を「MITライセンス」で公開しました。「Web」につづく縦書き応援企画第2弾です。中国語と韓国語の縦書き化にも .
https://cmonos.jp/blog/2010053100/1.shtml
[画像]

CMONOS.JP | 開発者ブログ | サイト丸ごと携帯対応「cmonos.m」

2011年2月1日 ... iPhone や Android 携帯でも縦書き. 「竹取Web」は、JavaScript 非依存なので、 iPhone など非力な環境でも .... JP | 開発者ブログ | サイト丸ごと携帯対応「cmonos.m」 . 2011年2月1日 ... 2011年9月14日 ... iPhone や Android 携帯でも縦 ...
https://cmonos.jp/blog/2011020100/1.shtml

更新情報

最近の記事

RSS

カレンダー



[日]
[月]
[火]
[水]
[木] 1
[金] 2
[土] 3

[日] 4
[月] 5
[火] 6
[水] 7
[木] 8
[金] 9
[土] 10

[日] 11
[月] 12
[火] 13
[水] 14
[木] 15
[金] 16
[土] 17

[日] 18
[月] 19
[火] 20
[水] 21
[木] 22
[金] 23
[土] 24

[日] 25
[月] 26
[火] 27
[水] 28
[木] 29
[金] 30
[土] 31

最近のコメント

RSS

最近のトラックバック

RSS

このページのトップへ

© CMONOS Co. Ltd.


PC 向けページに移動する