Кратко
СкопированоСвойство ruby контролирует, как несколько аннотаций (<rt>) внутри одного элемента <ruby> будут отображаться, когда их несколько. Оно решает, будут ли они «отдельными» (каждый над своей буквой) или объединятся в одну общую подпись, если это удобнее.
Это свойство особенно полезно для отображения групповых руби (Jukugo-ruby), когда одно слово произносится слитно, а не по отдельным иероглифам.
Пример
СкопированоУ нас есть два иероглифа, для каждого своя аннотация:
<ruby> 無常 <rt>む</rt> <rt>じょう</rt></ruby>
<ruby>
無常
<rt>む</rt>
<rt>じょう</rt>
</ruby>
ruby { ruby-merge: merge;}
ruby {
ruby-merge: merge;
}
Браузер объединит む и じょう в одну общую аннотацию むじょう и разместит её над обоими иероглифами.
Как пишется
Скопировано
.element { ruby-merge: separate;}
.element {
ruby-merge: separate;
}
separate— Значение по умолчанию. Каждая аннотация отображается строго над своим базовым символом (или группой символов). Если аннотация длиннее базы, к базе добавляется пространство, чтобы они не накладывались.merge— Все аннотации внутри одного элемента<ruby>объединяются в одну общую аннотацию и центрируются над всей группой базовых символов. Это похоже на то, как если бы вы написали<ruby>無常<rt>むじょう<./ ruby> auto— Браузер сам решает, как лучше отобразить аннотации. Обычно он пытается вести себя какseparate, но если аннотации слишком широкие, он может автоматически применить логикуmerge, чтобы избежать лишних пробелов между символами.
Как понять
СкопированоПредставьте, что вы учите японский и видите слово 上手. Оно состоит из двух иероглифов: 上 и 手, но читается как 「じょうず」 (Дзё:дзу) — одним словом.
Если мы попытаемся написать это с помощью <ruby> в лоб, то получится:
<ruby> 上<rt>じょう</rt> 手<rt>ず</rt></ruby>
<ruby>
上<rt>じょう</rt>
手<rt>ず</rt>
</ruby>
В этом случае, если мы используем ruby, аннотации будут стоять над своими символами. Это выглядит неправильно, потому что чтение разбито по слогам.
Наглядная разница
СкопированоВот как выглядят три значения на примере слова 上手 (ё:дзу):
-
separate(по умолчанию):
Аннотации отдельно. Над上—じょう, над手—ず. Чтобы поместить длиннуюじょうнад узким上, браузер добавит пробел вокруг иероглифа上. -
merge:
Аннотации объединяются. Мы видим одну общую надписьじょうずнад обоими иероглифами. -
auto:
Браузер оценивает ситуацию. Если есть место и аннотации не длинные, он может оставить их раздельными. Но если, как в примере,じょうочень длинная, он их объединит, чтобы избежать «рваной» верстки.
Подсказки
Скопировано💡 Подробнее о всех свойствах руби-аннотаций можно прочитать в официальной спецификации CSS Ruby Layout Module Level 1.
💡 Чаще всего ruby используют со значением merge или auto. separate используется по умолчанию для простых случаев, когда чтение совпадает с написанием.
💡 Значение auto — хороший выбор для «безопасной» типографики. Если аннотации короткие, они будут выглядеть как отдельные. Если длинные — объединятся, не сломав макет.
💡 Помните, что при merge аннотации, визуально объединяясь, теряют привязку к конкретному символу. Это нормально для сложных слов, но не подходит для пометки каждого иероглифа по отдельности.
💡 Свойство отлично комбинируется с ruby, чтобы задать точное выравнивание получившейся общей надписи.
.kanji-word { ruby-merge: merge; ruby-align: center; /* Или space-between, если нужно */}
.kanji-word {
ruby-merge: merge;
ruby-align: center; /* Или space-between, если нужно */
}