CSSで游ゴシック+縦書きを指定したページを作ってみた #IE11

URL はコチラ。 だけど、 IE10 ではブチ落ちることがあるので、 要注意! http://test.bluewatersoft.jp/verticalwriting/yugothic.html なお、指定してある CSS は次の通り。 <style type="text/css"> 続きを読む
5
山本康彦@BluewaterSoft @biac

CSSで游ゴシック+縦書きを指定したページを作ってみた #IE11 http://t.co/YP9lifRnBh

2013-07-02 12:30:01
拡大

※ 上の画像は、 Windows 8.1 Preview の IE11

山本康彦@BluewaterSoft @biac

縦書きルビがなんとかならないか、と、また投げてみた #IE11 > マイクロソフト コミュニティ: IE11 + 游ゴシックで、きちんと縦書き表示をするには? http://t.co/cK5HzK9EYP @biac

2013-07-02 12:44:14
山本康彦@BluewaterSoft @biac

そうそう。このページは、IE10 や Win8.1 Preview の IE11 で表示させるとIEがブチ落ちることがあるので、要注意でお願いします。(IEの高さ(上下)を狭くするとブチ落ちる) @biac

2013-09-11 18:35:55
山本康彦@BluewaterSoft @biac

なお、このブチ落ちる話は、connectでは放置されてるけど… http://t.co/9zARJGaBNo Win8.1 RTM の #IE11 では落ちなくなってるっぽい。 @biac

2013-09-11 18:56:10
山本康彦@BluewaterSoft @biac

Win8.1RTMの #IE11 でルビ付き縦書き表示。 ずいぶんマシになった感じで、行間は良い感じ。だけど、こんどは親文字がちょい右にズレた。 レンダリングロジックを変更しなきゃ、根本解決にはなりませんってば。 @biac http://t.co/zgp6SdmUsN

2013-09-11 18:22:22
拡大
山本康彦@BluewaterSoft @biac

Win8.1RTMの #IE11 でルビ付き縦書き表示。 違うフォントだと、今度は左にズレてみたりw @biac http://t.co/4h6e9nl5JE

2013-09-11 18:29:33
拡大
山本康彦@BluewaterSoft @biac

Win8.1RTMの #IE11 でルビ付き縦書き表示。 ただし、writing-modeの指定以外はCSSの指定を切った状態。 @biac http://t.co/u3NB7H1csy

2013-09-13 14:06:00
拡大

 


 

山本康彦@BluewaterSoft @biac

CSS3 Ruby Module (ワーキングドラフト) - 4.3 Ruby overhanging http://t.co/obPJMFRD9y CSS3で、ルビをその前後の親文字にまで掛ける指定が可能になる予定。 @biac http://t.co/ImC4Cq6Pde

2013-09-12 10:48:31
拡大
山本康彦@BluewaterSoft @biac

「OpenTypeフォントって組版情報てんこ盛り」http://t.co/yzUZI2H3GV 「縦組みの場合のベースライン位置などもBASE表に記載されています」 やっぱりそうなんだ。で、それを使おうとするから… @biac http://t.co/q80Ks3HqDC

2013-09-12 10:54:59
拡大
稀Jr. @moonmile

@biac 縦組みは、もう日本人が作るしかない段階(ある意味でIEの縦組みは諦め)と感じています。Kindle whitepaper を買って思ったのですが、各社の文庫本の組版フォントのクオリティまで持って行かないと、縦書きの可読性がかなり損なわれてしまう。

2013-09-12 10:52:32
山本康彦@BluewaterSoft @biac

@moonmile Adobe Air程度でも良いんじゃないかなぁ。

2013-09-12 11:21:13
山本康彦@BluewaterSoft @biac

「えあ草紙」で「吾輩は猫である」を読む(Flash) http://t.co/MHSOzSI9Dz Adobe Airを使うと、けっこうサクっと縦書きができる。 @biac http://t.co/HYBGOQ72jG

2013-09-12 11:25:42
拡大
山本康彦@BluewaterSoft @biac

ルビの親文字の横位置は、IE6が一番マトモだった(IE6はページに縦書きの概念が無くて、縦書きに使えなかったけどw)。 その後、IE7からダメダメになって、IE10 DP で一瞬だけ先祖返り。 http://t.co/c3waBwljCR

2013-09-12 13:12:07
拡大
山本康彦@BluewaterSoft @biac

しかし、IE10 RTW で、再びダメダメに。 IE5からの旧式rubyタグの中は縦書きにならない、というオマケ付きorz (←これもIE7からだったかもしれん) @biac http://t.co/x5fpB7Jjra

2013-09-12 13:16:13
拡大
山本康彦@BluewaterSoft @biac

ちなみに、日本の小説のルビには、こんな長いものがあったりする。 青空文庫をとことん気持ちよく読みたい方に:青空文庫ビューワアプリ「neo文庫」 - ITmedia eBook USER http://t.co/k4ZiodOoWE http://t.co/i8FREmDCdS

2013-09-13 14:21:12
拡大

コメント

たるたる @heporap 2013年9月12日
MSも独自規格でやってたけど、Web標準、W3C-CSSの縦書ルールにあわせようとして変になった。しかもそのW3C-CSSが迷走してるからそのとばっちりを受けているという。
0
たるたる @heporap 2013年9月12日
ルール(要望)が細かすぎたりルール制定そのものが迷走してて、ブラウザが実装できないのではないでしょうか。 http://www.w3.org/TR/css3-writing-modes/
0
たるたる @heporap 2013年9月12日
-webkit-writing-mode: vertical-rlを書いておくとWebkitブラウザでも縦書になります。
0