プログラミング/css/ルビの位置調整 の変更点

更新 
[[公開メモ]]

* Firefox が html のルビ(ruby)に対応しました。 [#y532249c]

今までだと

 <ruby>漢字<rt>かんじ</rt></ruby>

の結果が

　漢字(かんじ)

と表示されていた物が、

　&ruby(かんじ){漢字};

と表示されるようになりました。

* 位置調整 [#odf4cb7c]

Firefox や Chrome では本文とルビとの間が広すぎてちょっと格好が悪いので、

 LANG:css
 ruby {
   position: relative;
 }
 
 ruby rt {
   position: relative;
   top: 0.6ex;
 }

としたところ、Firefox ではちゃんと位置の調整ができました。Chrome には効き目がないみたいです。~
ただし、ルビを本文に近づけても行間は変化せず、広いままでした。

IE だとちょっと近すぎるのですが、しばらくはとりあえずこれで。

* サイズ違いによる影響を見る [#ea533b87]

　SIZE(20){&ruby(かんじ){漢字};}

　SIZE(40){&ruby(かんじ){漢字};}

　SIZE(60){&ruby(かんじ){漢字};}

やはり Firefox ではかなり間が空いてしまうけれど、これ以上詰めると IE では重なってしまう。

* もう少しちゃんと調べてみる [#f388479b]

** まずは無指定 [#hddb06e1]

 LANG:html
 <!DOCTYPE html>
 <html lang="ja">
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>ruby test</title>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"> </link>
 </head>
 
 <style>
 div {
     width: 20em;
 }
 </style>
 
 <div>
 日本語です日本語です日本語です日本語です日本語です日本語です日本語です日本語です日本語です日本語です<ruby><rb>日本語</rb><rt>にほんご</rt></ruby>です日本語です日本語です日本語です日本語です日本語です
 </div>

firefox
>&attachref(ruby-firefox.PNG);

html に対して normalize.css の

 LANG:css
 html { 
   font-family: sans-serif;
 }

が効いている程度。

rt は Client Rect が 48px x 11px、Offset Rect が 48px x 11px

chrome
>&attachref(ruby-chrome.PNG);

デバッグツールに user agent stylesheet が表示されるので、いろいろな指定が効いていることが分かる。

 LANG:css
 ruby, rt { 
   text-indent: 0px; 
 }
 ruby > rt {
   display: block; 
   font-size: 50%;
   text-align: start;
 }
 rt {
   line-height: normal;
   -webkit-text-emphasis: none;
 }

rt は Client Rect が 48px x 15px、Offset Rect が 48px x 15px

ie
>&attachref(ruby-ie.PNG);

html に対して normalize.css の

 LANG:css
 html {
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
 }

が適用されている。

rt は Client Rect が 0px x 0px、Offset Rect が 44px x 8px

計算済みプロパティを比べると、
Counter: 17459 (from 2010/06/03), today: 2, yesterday: 5