<style>
    div { font-size: 20px; font-family: ahem; border: solid black; color: indigo; width: 10em; margin: 8px 0; -webkit-font-smoothing: none; }
    ruby { color: blue; }
    ruby rt { color: silver; }
</style>
<div>
    abc<ruby>xx<rt>y y</rt></ruby>def
</div>
<div>
    abc<ruby>xx<rt>yy yy</rt></ruby>def
</div>
<div>
    abc<ruby>xx<rt>yyyyyy</rt></ruby>def
</div>
<div>
    abc<ruby>x x<rt>yyy yyy</rt></ruby>def
</div>
<div>
    <ruby>xx<rt>yy yy</rt></ruby>def g hi
</div>
<div>
    a<ruby>xx<rt>yy yy</rt></ruby>def g h
</div>
<div>
    a b bc b&#8203;<ruby>xx<rt>yy yy</rt></ruby>
</div>
<div>
    a b b b&#8203;<ruby>xx<rt>yy yy</rt></ruby><span style="font-size: 50%">&#8203;de
</div>
<div>
    a b b <ruby>xx<rt>yy yy</rt></ruby><span style="font-size: 150%">d
</div>
<div>
    <span style="font-size: 50%">cb</span><ruby>xx<rt>yy yy</rt></ruby>ij
</div>
<div>
    <span style="font-size: 150%">c</span><ruby>xx<rt>yy yy</rt></ruby>ij
</div>