Помещение ruby текста рядом с символом

Question

Я пытаюсь поместить текст ruby рядом с символом, а не над ним (см. Рисунок)

Теоретически, кажется, быть css свойством, называемым "ruby -position", которое может быть установлено в "inter-symbol" для достижения вышеуказанного результата, однако, похоже, оно поддерживается не всеми браузерами (по крайней мере, моим Browser Safari 13.02, кажется, не поддерживает его)

Пока я собрал следующий код

<style>
ruby {
  display: inline-flex;
  writing-mode: vertical-rl;
  flex-direction: column-reverse;
  align-items: flex-end;
  align-self: center;
}

rb, rt {
  display: inline;
  line-height: 0.7;
}
</style>

<div><ruby>英<rt>ㄧㄥ</rt></ruby><ruby>國<rt>ㄍㄨㄛˊ</rt></ruby></div>

Однако текст ruby внутри тега rt не центрируется, как на рисунке выше, и я не могу понять, как это исправить. Может ли кто-нибудь помочь мне центрировать текст ruby?