Follow Us.RSS

2010年5月14日(金)縦書きWeb、再び

  • 今回リリースした「CMONOS.JP」の最新版では縦書き表示機能が強化されました。ルビや傍点にも対応しています。また、縦書き体験を広げるため、既存ホームページを縦書き表示する「竹取 Web」を公開しました。

  • (2010年5月15日(土) 午後2時2分25秒 更新)
  • このエントリーをはてなブックマークに追加TweetBuzzurlにブックマークBuzzurlにブックマーク

CSS による縦書き表示の現状

CSSwriting-modeCSSInternetExplorer5.5201055W3CEditor's DraftCSSEPUBW3CEditor's DraftIEblock-progressionblock-flowblock-flowwriting-modedirectionblock-flowFirefoxChoromeSafariOperaCSS3CSSmulti-column使使multi-column

日本語はやっぱり縦書き!

ITCMONOS.JPCMONOS.JP2WebWeb調WebCGI2

中島敦の「山月記」を「竹取 Web」で縦書き表示したところ。

スタイルを無効化すると横書き表示になります。

コピー時にスタイルを保とうとしないブラウザではテキストのコピー&ペーストが可能。IEやSafariでは、一文字ごとに改行されてしまいます。テキストをコピーするとき、できるだけスタイルを保とうとするのはなぜなんでしょう...。じゃまなときの方が多いんですが...。

縦書きにもある程度スタイルを適用できます

style調IEwriting-mode:tb-rl;transform:rotate(90deg) scale(1.0,-1.0);90CSS3<hr>90
<ul><ol>(一)(二)(一)(二)(三)<dd>CMONOS.JPCMS CSS3

【追記】検索エンジンにもひっかかるようです。

ちょっと心配だったのですが、検索エンジンにもちゃんと読めるようです。

コメント

開発に期待します

竹取 Web 使ってみました。これイイですね。

CGI スクリプトの方は、特定タグ(例えばとか)のIDやclassで縦書き化をコントロールできるのでしょうか?
さまhttp://blog.modxclub.net/ (2010年5月15日(土) 午前8時12分2秒)
タンジェリン-ニコリン

ありがとうございます!!<イイ

「竹取 Web」は <p> を優先して縦書き変換するようになっているのですが、意外と本文に <p> が使われていないサイトが多いものですね(^^;。

そこで、さま さんのアイディアをいただいて、縦書き対象 id または class を URL で指定できるようにしました。内側に同じ種類の要素を含まない要素のみ指定できます。

指定の仕方は、URL の末尾にスラッシュを二つ加えて、縦書き化したい id を指定「//id」します。class の場合は「//.class名」です。指定した class のうち除外したいものについては「//-.class名」とします。(CGI 付属の ReadMe にも説明を加えました。)

たとえば、Twitter の人気ステータス一覧も URL 末尾に「//timeline」と加えることで、こんなふうに

これでかなり的確に縦書き化できる気がします! 有益なご指摘ありがとうございましたm(_ _)m。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年5月15日(土) 午後0時2分36秒)
タンジェリン-ニコリン

夜になってから、Wikipedia など日本語が URL に混じっているとうまくアクセスできない問題を修正しました。Wikipedia、案外縦書きが合いますね。

竹取 Web の ReadMe に、ブックマークレットがあるので、お気に入りに追加していろんなサイトを縦書き化してもらえるとうれしいです。

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年5月15日(土) 午後11時21分54秒)

対応ありがとうございます

恐ろしく対応速いっすねー
国産システムの強みみたいなものを垣間見た気がしました)

Wikipediaの縦書きはホント味が出ますね。下のシステムと連携したらどうなるだろう、とか・・・夢が膨らみますね。
http://decomoji.jp/

自分のサイトでもチャレンジしてみたいと思います。

開発頑張ってください。

さまhttp://blog.modxclub.net/ (2010年5月17日(月) 午後1時23分13秒)
タンジェリン-エヘッ

こんにちは。いろいろ縦書き化してみたら、作る前に想像していたよりずっと読みやすかったので、あれこれなおしたくなってしまいました(笑)。デコもじさんは初めて知りました。ウェブサイトの表現力はこれからますますあがっていきそうですね。楽しみです。

また何かお気づきの点がありましたらご指摘下さい。お待ちしております!

CMONOS.JP 開発者 ちーhttps://cmonos.jp/ (2010年5月17日(月) 午後2時27分45秒)

トラックバック

関連記事

[画像]

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

2010年7月5日 ... JavaScript で縦書き表示を実現する「竹取JS」を「MITライセンス」で公開しました。「竹 取Web」につづく縦書き応援企画第2弾です。中国語と韓国語の縦書き化にも対応し ています。
https://cmonos.jp/blog/2010070500/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 | 開発者ブログ | 縦書き文庫の「涅槃」がすごい!

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

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

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

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

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

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

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

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

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

CMONOS.JP | 開発者ブログ | iPhone から画像をアップロードしよう

2011年4月26日 ... 竹取Web」は、JavaScript 非依存なので、iPhone など非力な環境でも縦書き化でき ます。 ... 一行文字数や文字サイズを調整したブックマークレットを作りこんでおけば、 iPhone などでも読みやすい縦書き表示でサイトを閲覧できるのではない ...
https://cmonos.jp/blog/2011042602/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
[木] 29
[金] 30
[土]

最近のコメント

RSS

最近のトラックバック

RSS

このページのトップへ

© CMONOS Co. Ltd.


PC 向けページに移動する