Follow Us.RSS

2011年2月1日(火)縦書きのススメ

ウェブ上の縦書きと段組みの意外な相性

Webブラウザでの日本語縦書き表示、順調に進行中。年内には実装の見通し − Publickey」ということで、WebKit への CSS3 縦書き関連プロパティの実装は着実に進んでいるようです。楽しみですね!

そこで個人的に気になっているのが縦書き表示時の Multi-column layout です。ウェブ上の縦書きは段組みととても相性が好い気がするからです。

横組みのウェブページでは、コンテンツを段組みにすると少々やっかいなことになります。コンテンツの内容が多すぎると、折り返し点がウィンドウ表示領域より下になってしまい、コンテンツをすべて見るには一度下までスクロールして、それからまた一番上に戻らなければなりません。

高さがはみでないように、どんどん横にカラムを重ねていくこともできますが、すると今度は横スクロールが必要になります。元の位置に戻らなくてもコンテンツ全体を閲覧できるものの、縦スクロールを前提とした従来のウェブページデザインから段組み部分が浮いてしまうことでしょう。

ところが縦組み(縦書き)のウェブページで段組みにする場合は、こうした問題がウィンドウ高さに合わせた場合に偏ります。

縦組みページで、ウィンドウ高さにあわせて、横へスクロールするように段組みにすると、横スクロールするだけでなく、スクロールを行ったり来たりする問題まで発生してしまいます。

一方、ウィンドウ幅にあわせて段組にした場合は、縦スクロールでどんどん読み進めることができます。

横組みウェブ以外めったと見かけない現在、Multi-column layout は印刷時にのみ重宝するプロパティと思われがちですが、縦書きと組み合わせることで、ウェブページでも大いに活躍してくれそうな気がします。

ただ、縦書きに対応していない環境で段組みだけが有効になると、おかしな表示になってしまいます。縦書き時と横書き時とで CSS を分けるなどの工夫が必要となりそうですね。

さて、そんなわけで、縦書き Web 時代には段組みウェブページが増えるのではないかと思っているのですが、どうなるでしょうか。

そこで、擬似的に段組み縦書きを実現する「竹取 Web」を使って、縦書きウェブがどんなかんじになるのか予習してみましょう。

縦書き段組みにすると、ときどき(?)ヒットをとばす「虚構新聞」さんに大新聞の風格が。

「竹取 Web」では URL に表示設定を埋め込むこともできます。この機能を利用して、小説など読み物に適した設定で縦書きにしてみた例がこちら。

心に響くすてきな文章を毎週(!)掲載している「傘をひらいて、空を」さんを縦書きにしてみました。もちろん横書きでもすばらしい文章ですけど、縦書きにすると何かしっとりとした味わいが出てくる気がします。日常の一コマをどうやったらこんなに美しく切り取れるのかと毎回思うブログです。個人的にはいつも縦書きにしてから読んでいます。

今、ウェブにある縦書き

いくつかある現在利用できるウェブ上で縦書きを実現するツールを紹介します。


涅槃

JavaScript 製日本語組版エンジン「涅槃


[開発元]

[ライセンス]
MITライセンス

特長

  • 電子書籍風に表示するためのさまざまな機能が用意されています。
  • 動作が軽く小説など長文に向いています。
  • スクロールではなくページ移動を表現できます。
  • 古いブラウザでも動作します。

注意点

  • HTML を「涅槃」にあわせる必要が(多少)あります。

竹取Web

あらゆるウェブページを縦書き化する無料ウェブサービス「竹取Web


[開発元]
株式会社CMONOS

[ライセンス]
商用会員制サイトでの使用以外 無料

特長

  • リンク先もずんずん縦書き化します。
  • JavaScript 非依存なので、iPad などでも表示できます。
  • ブックマークレットでいつでも好きなページを縦書きに変換できます。

注意点

  • HTML そのものを書き換えてしまうため、ファイルサイズがもとの HTML の十倍から数十倍の容量に膨れあがります。
  • ローカルファイルやログインが必要なページは変換できません。

竹取JS

あらゆるウェブページを縦書き化するJavaScript「竹取JS


[開発元]
株式会社CMONOS

[ライセンス]
MITライセンス

特長

  • 90°回転型の縦書き化を行うので縦書き部分にも90°回転した形で CSS が適用されます。
  • 既存 HTML を変更する必要がありません。
  • 1つの JavaScript ファイルと1つの CSS ファイルを設置するだけで動作します。
  • 記述が簡単です。最も短い記述は「(new Taketori()).set().toVertical();」で、日本語文字列を自動判別し縦書き化します(自動判別ではうまく動作しない場合があります)。
  • ブックマークレットでいつでも好きなページを縦書きに変換できます。

注意点

  • 処理が重いので、小説など長文に向きません。
  • IE以外ではごく最近のブラウザでしか動作しません。

まとめると...

  • 電子書籍風サイトに向いた多機能縦書きツール「涅槃」
  • 好きなページを縦書きで読み進めたいとき便利な「竹取Web」
  • 既存HTMLの一部を縦書き化するのに向いた「竹取JS」

というかんじでしょうか。ぜひ試してみてください。

竹取JSの今後

最後に、弊社で開発を継続している「竹取JS」の今後について触れておきたいと思います。

「竹取JS」ももともとは電子書籍的なものを射程に入れて企画されましたが、レイアウトの保持と引き換えに処理が重くなってしまったため、現在では縦書きCSSと縦書き以前CSSを橋渡しするツールとして開発されています。

たとえば、「竹取JS」では、あらかじめwriting-mode が指定されている要素に対し縦書きが指定されているとき、writing-mode を正しく解釈できる環境では、縦書き変換が動作しないようにしてあります。

これは近い将来 CSS3 の縦書き関連プロパティが普及した暁に、後方互換性のための補助的ツールとして使われることを予想してのことです。

ちなみに「竹取JS」の最近のバージョンでは、台湾でMozillaにも関わってらっしゃる timdream さんのご協力とアドバイスを得て(謝謝)、台湾(繁体字)環境向けのCSSやダイアログが整備されました。ごく一部の台湾の方にも縦書きを楽しんで(?)いただけているようです。

竹取JS の今後ですが、CSS3 縦書き関連プロパティの動向を注視しつつ、縦書き非対応環境を、縦書き対応環境に近づけるためのツールとして使い勝手が良いよう、細かな調整を続けて行く予定です。

レッツエンジョイ縦書き!!

竹取JS で {multiColumnEnabled:'auto'} オプションを指定すると Firefox では段組み表示が可能になります。WebKit では表示が崩れるので無効化しています。

コメント

トラックバック

関連記事

[画像]

CMONOS.JP | 開発者ブログ | ウェブにも縦書きを!「竹取JS」公開

2010年7月5日 ... JavaScript で縦書き表示を実現する「竹取JS」を「MITライセンス」で公開しました。「Web」につづく縦書き応援企画第2弾です。中国語と韓国語の縦書き化にも対応し ています。
https://cmonos.jp/blog/2010070500/1.shtml
[画像]

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

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

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

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

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

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


[日]
[月]
[火] 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
[火]
[水]
[木]
[金]
[土]

最近のコメント

RSS

最近のトラックバック

RSS

このページのトップへ

© CMONOS Co. Ltd.


PC 向けページに移動する