<!DOCTYPE html>
<html>
    <head>
        <style>
            ruby { border: solid 5px cyan; }
            .vert { -webkit-writing-mode: vertical-rl; }
        </style>
    </head>
    <body>
        Ruby text should be at the center of ruby base.
        <div class="vert">
            <ruby>aaaaa<rt>b</rt></ruby><br>
        </div>
        <hr>
        <div class="vert">
            <ruby>a<rt>bbbb</rt></ruby><br>
        </div>
        <hr>
        <div>
            <ruby>aaaaa<rt>b</rt></ruby><br>
        </div>
        <hr>
        <div>
            <ruby>a<rt>bbbb</rt></ruby><br>
        </div>
    </body>
</html>