ruby-position-modern-japanese-fonts.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>
@font-face {
    font-family: NotoSansCJK;
    src: url("../../third_party/NotoSansCJK/NotoSansCJKjp-Regular-subset.otf");
}

body {
  font-size: 40px;
}

.atomic {
  display: inline-block;
  height: 30px;
  width: 20px;
  background: lightblue;
}
.atomic-inner {
  display: inline-block;
  block-size: 50px;
  inline-size: 20px;
  background: rgba(255,0,0,0.5);
}

.container-modern {
  font-family: NotoSansCJK;
  border: 1px solid lime;
}

.container-legacy {
  font-family: 'Hiragino Maru Gothic ProN', 'MS Gothic';
  border: 1px solid lime;
}

.v {
  display: inline-block;
  writing-mode: vertical-rl;
  height: 6em;
}

.vlr {
  display: inline-block;
  writing-mode: vertical-lr;
  height: 6em;
}
</style>
<body>

<!--
  All gaps between a ruby base and a ruby annotation text should have similar
  size.  crbug.com/1082087
-->
<table border=0>
<tr>
<td class="container-modern"><ruby>焼肉定食<rt>じゃくにくきょうしょく</ruby><br>
  <ruby style="ruby-position:under;">和洋折衷<rt>わようせっちゅう</ruby><br>
  <ruby style="ruby-position:under;">雨過天晴<rt>うか<span class="atomic"></span>てんせい</ruby>
<td class="container-legacy"><ruby>焼肉定食<rt>じゃくにくきょうしょく</ruby><br>
  <ruby style="ruby-position:under;">和洋折衷<rt>わようせっちゅう</ruby><br>
  <ruby style="ruby-position:under;">雨過天晴<rt>うか<span class="atomic"></span>てんせい</ruby>

<tr>
<td><div class="container-modern v"><ruby>弱肉強食<rt>やきにくていしょく</ruby><br>
<ruby>温故知新<rt>おんこちしん<span class="atomic"><span class="atomic-inner"></span></span></ruby></div>
<div class="container-modern vlr"><ruby>弱肉強食<rt>やきにくていしょく</ruby><br>
<ruby>温故知新<rt>おんこちしん<span class="atomic"><span class="atomic-inner"></span></span></ruby></div>

<td><div class="container-legacy v"><ruby>弱肉強食<rt>やきにくていしょく</ruby><br>
<ruby>温故知新<rt>おんこちしん<span class="atomic"><span class="atomic-inner"></span></span></ruby></div>
<div class="container-legacy vlr"><ruby>弱肉強食<rt>やきにくていしょく</ruby><br>
<ruby>温故知新<rt>おんこちしん<span class="atomic"><span class="atomic-inner"></span></span></ruby></div>
</table>

<script>
if (window.testRunner) {
  testRunner.waitUntilDone();
  document.fonts.ready.then(function() {
    testRunner.notifyDone();
  });
}
</script>
</body>
chromium/third_party/blink/web_tests/fast/ruby/ruby-position-modern-japanese-fonts.html
