限定公開でまとめを作れば、相互フォローやフォロワー限定でまとめを共有できます!

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

URL はコチラ。 だけど、 IE10 ではブチ落ちることがあるので、 要注意! http://test.bluewatersoft.jp/verticalwriting/yugothic.html なお、指定してある CSS は次の通り。 <style type="text/css"> 続きを読む
インターネット IE11 縦書き ルビ
5965view 4コメント
5
山本康彦@BluewaterSoft @biac
CSSで游ゴシック+縦書きを指定したページを作ってみた #IE11 http://t.co/YP9lifRnBh
 拡大

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

山本康彦@BluewaterSoft @biac
縦書きルビがなんとかならないか、と、また投げてみた #IE11 > マイクロソフト コミュニティ: IE11 + 游ゴシックで、きちんと縦書き表示をするには? http://t.co/cK5HzK9EYP @biac
山本康彦@BluewaterSoft @biac
そうそう。このページは、IE10 や Win8.1 Preview の IE11 で表示させるとIEがブチ落ちることがあるので、要注意でお願いします。(IEの高さ(上下)を狭くするとブチ落ちる) @biac
山本康彦@BluewaterSoft @biac
なお、このブチ落ちる話は、connectでは放置されてるけど… http://t.co/9zARJGaBNo Win8.1 RTM の #IE11 では落ちなくなってるっぽい。 @biac
山本康彦@BluewaterSoft @biac
Win8.1RTMの #IE11 でルビ付き縦書き表示。 ずいぶんマシになった感じで、行間は良い感じ。だけど、こんどは親文字がちょい右にズレた。 レンダリングロジックを変更しなきゃ、根本解決にはなりませんってば。 @biac http://t.co/zgp6SdmUsN
 拡大
山本康彦@BluewaterSoft @biac
Win8.1RTMの #IE11 でルビ付き縦書き表示。 違うフォントだと、今度は左にズレてみたりw @biac http://t.co/4h6e9nl5JE
 拡大
山本康彦@BluewaterSoft @biac
Win8.1RTMの #IE11 でルビ付き縦書き表示。 ただし、writing-modeの指定以外はCSSの指定を切った状態。 @biac http://t.co/u3NB7H1csy
 拡大

 


 

山本康彦@BluewaterSoft @biac
フォントのしくみ http://t.co/OliOH1Qwha (p23)縦書きのメトリック http://t.co/LcnPjR7APW
 拡大
山本康彦@BluewaterSoft @biac
CSS3 Ruby Module (ワーキングドラフト) - 4.3 Ruby overhanging http://t.co/obPJMFRD9y CSS3で、ルビをその前後の親文字にまで掛ける指定が可能になる予定。 @biac http://t.co/ImC4Cq6Pde
 拡大
山本康彦@BluewaterSoft @biac
「OpenTypeフォントって組版情報てんこ盛り」http://t.co/yzUZI2H3GV 「縦組みの場合のベースライン位置などもBASE表に記載されています」 やっぱりそうなんだ。で、それを使おうとするから… @biac http://t.co/q80Ks3HqDC
 拡大
Tomoaki Masuda @moonmile
@biac 縦組みは、もう日本人が作るしかない段階(ある意味でIEの縦組みは諦め)と感じています。Kindle whitepaper を買って思ったのですが、各社の文庫本の組版フォントのクオリティまで持って行かないと、縦書きの可読性がかなり損なわれてしまう。
山本康彦@BluewaterSoft @biac
@moonmile Adobe Air程度でも良いんじゃないかなぁ。
山本康彦@BluewaterSoft @biac
「えあ草紙」で「吾輩は猫である」を読む(Flash) http://t.co/MHSOzSI9Dz Adobe Airを使うと、けっこうサクっと縦書きができる。 @biac http://t.co/HYBGOQ72jG
 拡大
山本康彦@BluewaterSoft @biac
ルビの親文字の横位置は、IE6が一番マトモだった(IE6はページに縦書きの概念が無くて、縦書きに使えなかったけどw)。 その後、IE7からダメダメになって、IE10 DP で一瞬だけ先祖返り。 http://t.co/c3waBwljCR
 拡大
山本康彦@BluewaterSoft @biac
しかし、IE10 RTW で、再びダメダメに。 IE5からの旧式rubyタグの中は縦書きにならない、というオマケ付きorz (←これもIE7からだったかもしれん) @biac http://t.co/x5fpB7Jjra
 拡大
山本康彦@BluewaterSoft @biac
ちなみに、日本の小説のルビには、こんな長いものがあったりする。 青空文庫をとことん気持ちよく読みたい方に:青空文庫ビューワアプリ「neo文庫」 - ITmedia eBook USER http://t.co/k4ZiodOoWE http://t.co/i8FREmDCdS
 拡大

コメント

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