Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-ruby/ruby-annotation-with-margin.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>Interlinear ruby annotation box with margin</title>
<link rel="match" href="ruby-annotation-with-margin-ref.html">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
body {
font-family: Ahem;
font-size: 10px;
}
ruby {
color: transparent;
}
rt {
color: green;
}
.under ruby {
ruby-position: under;
}
</style>
<div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div>
<div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div>
<div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div>
<div class=under>
<div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div>
<div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div>
<div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div>
</div>
<div style="writing-mode: vertical-lr">
<div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div>
<div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div>
<div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div>
</div>