擬似ruby属性サンプル

ソース


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>擬似ruby属性サンプル</title>
  <style>
    .rb {
      display: inline-block;
      position: relative;
      top: -1em;
      margin: 0;
      padding: 0;
      white-space: nowrap;
      line-height: 100%;
      vertical-align: text-bottom;
    }
    .rb::after {
      display: block;
      margin: 0;
      margin-top: -3em;
      padding: 0;
      white-space: nowrap;
      font-size: 50%;
      line-height: 100%;
      text-align: center;
      content: attr(data-ruby);
    }
  </style>
</head>
<body>

<h1>擬似ruby属性サンプル</h1>
  <p>これらの<span class="rb" data-ruby="かんじ">漢字</span>は筆順にしたがって書きましょう。</p>

</body>
</html>

ruby要素関連のCSSの仕様が固まって実装されれば、スタイルシートの記述はよりスマートにできると思われるが。