css/css-ruby/ruby-tab-in-base-002-ref.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Ruby Reference: multiple tabulations across ruby nesting levels</title>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
div.test {
  font: 25px/1 Ahem;
  width: max-content;
}
span.tab1 {
  /* First tab starts at 50px  -> 100px stop -> 50px. */
  padding-left: 50px;
}
span.tab2 {
  /* Second tab starts at 125px -> 200px stop -> 75px. */
  padding-left: 75px;
}
</style>
<body>
<div class="test">Z<ruby>M<ruby><span class="tab1"></span>N<rt>p</rt></ruby><span class="tab2"></span>O<rt>q</rt></ruby></div>
</body>