<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<style>
@font-face {
    font-family: 'Litherum';
    src: url("resources/ruby-expansion.svg#Litherum") format(svg);
}
body {
  font: 40px Litherum, 'Lucida Grande';
  -webkit-font-smoothing: none;
  margin: 0px;
  margin-top: -4px;
}
span {
  color: transparent;
}
div {
  height: 78px;
  white-space: pre;
  margin-top: 22px;
}
</style>
</head>
<body>
<div dir=rtl>a<span style="color: green">a</span><span style="color: transparent; margin-right: -10px">aa</span><span style="color: green">a</span><span style="color: transparent;">aaaa</span>a<span style="color: transparent; margin-right: -10px">aa</span>a<span style="color: green; margin-right: 20px;">a</span></div>
<div dir=rtl>a<span style="color: green">a</span><span style="color: transparent; margin-right: -10px">aa</span><span style="color: transparent;">aaaa</span>a<span style="color: green;">a</span><span style="color: transparent; margin-right: -10px">aa</span>a<span style="color: green; margin-right: 20px;">a</span></div>
<div dir=rtl>a<span style="color: green">a</span><span style="color: transparent; margin-right: -10px">aa</span>a<span style="color: green;">a</span><span style="color: transparent; margin-right: -10px">aaaaaa</span>a<span style="color: green; margin-right: 20px;">a</span></div>
<div><span style="color: green;">a</span>a<span style="color: transparent; margin-right: -10px;">aa</span><span style="color: green;">a</span><span style="color: transparent;">aaaa</span>a<span style="color: transparent; margin-right: -10px">aa</span><span style="color: green;">a</span>a<br><span>aaaaaaaaaaaaaaaaaaaa</span></div>
<div><span style="color: green;">a</span>a<span style="color: transparent; margin-right: -10px;">aa</span><span style="color: green;">a</span><span style="color: transparent;">aaaa</span>a<span style="color: transparent; margin-right: -10px">aa</span><span style="color: green;">a</span>a<br><span>aaaaaaaaaaaaaaaaaaaa</span></div>
</body>
</html>