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

(3244d) 更新

公開メモ

Firefox が html のルビ(ruby)に対応しました。 †

今までだと

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

の結果が

　漢字(かんじ)

と表示されていた物が、

　漢字(かんじ)

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

位置調整 †

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

LANG:css
ruby {
  position: relative;
}

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

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

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

サイズ違いによる影響を見る †

　漢字(かんじ)

　漢字(かんじ)

　漢字(かんじ)

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

もう少しちゃんと調べてみる †

まずは無指定 †

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

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

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

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

計算済みプロパティを比べると、

添付ファイル: fileruby-ie.PNG 1498件 [詳細] fileruby-chrome.PNG 1629件 [詳細] fileruby-firefox.PNG 1578件 [詳細]
Counter: 16611 (from 2010/06/03), today: 1, yesterday: 3