<script src="../../resources/ahem.js"></script>
<style>
div.container {
inline-size: 8em;
font: 20px Ahem;
-webkit-font-smoothing: none;
outline: thin dashed lightblue;
-webkit-ruby-position: after;
margin: 8px 0;
}
span.emphasis {
-webkit-text-emphasis-style: "w";
-webkit-text-emphasis-color: purple;
}
ruby {
color: blue;
}
rt {
color: orange;
}
</style>
<div style="float: left;">
<div class="container">
xxxxx xx <ruby>xxxx<rt>yyy</rt></ruby> xxx xxx xxxx
<ruby>xxxxx<rt>y<br>y</rt></ruby> <span class="emphasis">xx</span>
xxx xxxx
</div>
<div class="container" style="-webkit-writing-mode: vertical-lr; -webkit-text-orientation: sideways-right;">
xxxxx xx <ruby>xxxx<rt>yyy</rt></ruby> xxx xxx xxxx
<ruby>xxxxx<rt>y<br>y</rt></ruby> <span class="emphasis">xx</span>
xxx xxxx
</div>
</div>
<div style="float: left; margin-left: 8px; margin-top:148px;">
<div class="container" style="-webkit-writing-mode: vertical-rl; -webkit-text-orientation: sideways-right;">
xxxxx xx <ruby>xxxx<rt>yyy</rt></ruby> xxx xxx xxxx
<ruby>xxxxx<rt>y<br>y</rt></ruby> <span class="emphasis">xx</span>
xxx xxxx
</div>
</div>