<!DOCTYPE html>
<html>
<head>
<style>
ruby { border: solid 5px cyan; }
</style>
</head>
<body>
Ruby text should be at the center of ruby base.
<div id="test1" >
<ruby>aaaaa<rt>b</rt></ruby><br>
</div>
<hr>
<div id="test2" >
<ruby>a<rt>bbbb</rt></ruby><br>
</div>
<hr>
<div id="test3" style="-webkit-writing-mode: vertical-rl;">
<ruby>aaaaa<rt>b</rt></ruby><br>
</div>
<hr>
<div id="test4" style="-webkit-writing-mode: vertical-rl;">
<ruby>a<rt>bbbb</rt></ruby><br>
</div>
<script>
setTimeout(function () {
var verticalElement = document.getElementById("test1");
verticalElement.setAttribute("style", "-webkit-writing-mode: vertical-rl;");
verticalElement = document.getElementById("test2");
verticalElement.setAttribute("style", "-webkit-writing-mode: vertical-rl;");
var horizontalElement = document.getElementById("test3");
horizontalElement.setAttribute("style", "");
horizontalElement = document.getElementById("test4");
horizontalElement.setAttribute("style", "");
if (window.testRunner) {
testRunner.notifyDone();
}
}, 0);
if (window.testRunner) {
testRunner.waitUntilDone();
}
</script>
</body>
</html>
Codebase Browser
chromium