Вертикально расположенные рубиновые текстовые элементы ⇐ CSS

[Anonymous]

В настоящее время можно размещать несколько элементов аннотации rt вертикально, используя устаревший элемент rtc или встраивая элементы Ruby, как указано в стандарте HTML §4.5.10. в разделе «Текст с фонетическими и семантическими аннотациями (двусторонний рубин)».

Код: Выделить всё

漢
かん

한

hán

字
じ

자

tự

Однако это может легко стать громоздким из-за нескольких уровней вложенности, как это могло быть видно в примере выше. Его было бы легче написать без вложенности (закрывающие теги опущены, если это разрешено)

Код: Выделить всё

漢 かん 한 hán
字 じ 자 tự

Элементы rt располагаются горизонтально и кажутся ожидаемое поведение, как отмечено в том же разделе стандарта,

Если в результате две аннотации охватывают один и тот же базовый сегмент, то эти аннотации можно просто расположены спиной к спине.

Поэтому я пытаюсь использовать свойства Ruby CSS3 для вертикального расположения элементов rt, но безуспешно.

Код: Выделить всё

rt {
display: ruby-text-container;
ruby-position: over;
ruby-align: center;
}

Код: Выделить всё

漢 かん 한 hán
字 じ 자 tự

Есть ли способ добиться того же результата, используя стандартные возможности Ruby в HTML5 +CSS3?
Изменить: я попробовал display: table-row, что оказывает некоторое влияние на Chrome и Firefox — элементы Ruby расположены вертикально, но справа от базу, и это не влияет на Safari.

Код: Выделить всё

rt {
display: table-row;
ruby-position: over;
ruby-align: center;
}

Код: Выделить всё

漢 かん 한 hán
字 じ 자 tự

Подробнее здесь: https://stackoverflow.com/questions/792 ... t-elements