Руби-аннотации в веб-статье: как показать чтение рядом с текстом

Руби-аннотация — это короткое чтение, перевод или пояснение, поставленное рядом с основным знаком, чаще всего над иероглифом. В HTML для такой связи есть элементы <ruby> и <rt>, а <rp> даёт запасное отображение в старых средствах просмотра. Разметка помогает читателю связать подсказку с точным фрагментом, если правильно сгруппировать основу и проверить переносы.

Руби — небольшая типографическая подпись, привязанная к слову или отдельным знакам. В японском учебном тексте это может быть фуригана: чтение кандзи. В словаре — произношение незнакомого иероглифа, в примере по китайскому — транскрипция. Такая подсказка не заменяет перевод и не должна превращаться в мелкий комментарий ко всему предложению: её задача — снять конкретную неоднозначность, не отрывая взгляд от исходной формы.

Обычные скобки после слова остаются хорошим вариантом, когда пояснение длинное, должно попадать в поиск отдельно или одинаково важно для всех читателей. Руби уместнее, когда читатель часто сверяет знак и чтение, а вертикальное соседство сокращает движение взгляда. Перед вёрсткой решите, что именно помещается в аннотацию: произношение, транслитерация или короткая глосса. Если в одном материале смешать все три функции без обозначения, запись станет загадкой.

Приём полезен не только в восточноазиатской типографике: HTML-элемент может представлять произношение, перевод или транслитерацию в рамках соответствующей руби-аннотации. Но естественные ожидания читателя и направление письма важны: для русского словаря терминов иногда яснее раскрыть слово в скобках, чем вводить незнакомую типографическую схему.

Контейнер <ruby> объединяет основной текст и связанные с ним аннотации. Внутри <rt> помещают собственно чтение или другое выбранное пояснение. Символы в <rt> не самостоятельная сноска: стандарт трактует руби как исходные сегменты вместе с их связью с аннотациями. Это позволяет браузеру располагать их типографически парой, а не печатать как два независимых слова.

Например, для слова «東京» можно связать основу с чтением «とうきょう». Упрощённая запись выглядит так: <ruby>東京<rt>とうきょう</rt></ruby>. Браузер отображает аннотацию над основой в горизонтальном тексте. Для проверки в исходном коде важна не красота отступов, а границы элементов: весь сегмент, которому соответствует одна подсказка, должен оказаться внутри одного контейнера.

Если подсказка дана каждому знаку отдельно, пары можно записать последовательно: <ruby>東<rt>とう</rt>京<rt>きょう</rt></ruby>. Это наглядно показывает связь «знак — чтение», но выбор сегмента зависит от языка и редакционного правила. Иногда чтение относится к целому слову; тогда разбивка аннотации на знаки может создать ложную точность или нарушить привычную группировку. Не дробите слово только потому, что HTML позволяет это сделать.

В стандартной форме <rp> содержит скобки или похожие символы. В браузере, который понимает руби, эти запасные символы не показываются: остаётся компактное расположение. Если руби не поддерживается, пользователь видит основу и чтение в скобках. Получается понятный резервный вариант без отдельного скрипта и без дублирования фразы вручную.

Пример полной формы: <ruby>東<rp>(</rp><rt>とう</rt><rp>)</rp>京<rp>(</rp><rt>きょう</rt><rp>)</rp></ruby>. Для конкретного словаря скобки можно выбрать согласно его редакционному оформлению. Прежде чем массово добавлять <rp>, проверьте в целевых браузерах, не получается ли избыточная пунктуация. Если используете открывающую и закрывающую скобки, не оставляйте только одну из них при генерации шаблона.

Элементы <rb> и <rtc> иногда встречаются в примерах из старых обсуждений сложной руби-разметки. Для простого сценария они не нужны: по актуальной документации <rtc> устарел и не рекомендуется для новых проектов. Начинайте с обычной пары основы и <rt>; усложняйте структуру только при доказанной необходимости нескольких независимых аннотаций.

Руби должен быть меньше основы, но оставаться читаемым на реальном устройстве. Важна не фиксированная цифра, а отношение: аннотация визуально вторична, при этом различимые знаки нельзя сводить к серой пыли. Проверьте её при стандартном масштабе и увеличении страницы. Если чтение теряется на телефоне, сначала попробуйте увеличить кегль руби и добавить вертикальный воздух, а не затемнять основной текст.

Браузер уже располагает руби относительно основы. Начните с нативного отображения и минимального CSS. Не задавайте <rt> абсолютное позиционирование и не вырывайте его из потока: так при масштабировании и переносе легко потерять связь или наложить подсказку на предыдущую строку. Если дизайн использует ruby-position, меняйте положение только ради сценария чтения, затем сравните результат в нескольких целевых браузерах. Для вертикального письма проверяйте именно вертикальный режим, а не переносите автоматически правила горизонтальной статьи.

Типографическая иерархия должна быть устойчивой при смене гарнитуры. Некоторые шрифты имеют подходящее покрытие для основного набора знаков, но не для чтения; браузер тогда подставит другую гарнитуру, и высота строки изменится. Проверьте fallback для обоих наборов и посмотрите на линию целиком. Если межстрочный интервал становится слишком тесным, увеличьте пространство вокруг абзаца вместо отрицательных отступов, которые могут наложить руби на соседний текст.

На широкой колонке длинное слово с руби обычно не вызывает трудностей. На узком экране исходная группа и аннотация могут переноситься не так, как ожидает редактор: слишком длинная подсказка увеличивает ширину строки, а попытка закрепить весь абзац через неразрывность создаёт горизонтальную прокрутку. Сначала проверьте естественную раскладку: короткие фразы, длинные чтения, соседние знаки, пунктуацию и конец строки.

Не добавляйте пробелы между каждым иероглифом ради визуального выравнивания: пробел становится частью текстового потока и может изменить перенос, копирование и поиск. Не вставляйте <br> после каждого слова; жёсткий разрыв пригоден для стихотворной строки или намеренного набора, но обычно делает адаптивный абзац хрупким. Если длинная аннотация относится к выражению, рассмотрите короткое чтение в руби и полноценное пояснение после предложения.

Сравните ширины не только на условных «десктопе» и «мобильном», но и в промежуточном состоянии, когда рядом с текстом появляется боковая панель или увеличивается масштаб браузера. Проверьте, не выталкивает ли руби пунктуацию на отдельную строку и не ухудшает ли он выравнивание соседних строк. Неравномерный рисунок сам по себе не ошибка, если связь остаётся ясной и текст читается без угадывания.

Чтение над иероглифом может быть визуально очевидным, но не всякая комбинация браузера, экранного диктора и языка озвучивания произносит основу и аннотацию одинаково. Поэтому проверьте реальные пары «браузер — вспомогательная технология» для аудитории сайта. В тесте полезно услышать короткое слово и фразу с несколькими аннотациями, а не делать вывод по одной картинке или автоматической проверке.

Укажите язык фрагмента, если он отличается от языка окружающего текста: это помогает браузеру и вспомогательным средствам выбрать подходящее произношение. Атрибут языка должен соответствовать содержимому, а не стране читателя. Не добавляйте role или aria-label на всякий случай: сначала проверьте, что нативная структура корректно представлена в вашей комбинации технологий и не приводит к двойному чтению одной и той же подсказки.

Руби не заменяет альтернативный способ понять термин. Если аннотация содержит единственное значение, без которого предложение нельзя понять, убедитесь, что она сохраняется в копируемом тексте и доступна при озвучивании. Для критически важного перевода или объяснения лучше продублировать смысл обычным текстом в контексте, а руби оставить поддерживающим элементом. Так статья не зависит от конкретного способа рендеринга.

Согласуйте правило аннотирования до разметки: отмечаете ли вы каждый новый термин, только первое упоминание, или все появления; где даёте чтение по словам, а где по отдельным знакам; как обозначаете перевод. Заведите короткий редакционный гайд с несколькими примерами. Для длинной публикации это предотвращает ситуацию, когда одна глава показывает подсказку над каждым знаком, а следующая использует скобки для того же типа информации.

В CMS храните основу и чтение как отдельные поля или как структурированный фрагмент, если редакторам важно исправлять их независимо. Не поручайте авторам вручную расставлять произвольные HTML-теги, если публикационная система их очищает. Проверьте, что фильтр безопасности сохраняет разрешённые элементы ruby, rt и rp; после санитарной обработки откройте опубликованную страницу и убедитесь, что элементы не удалились и не поменяли порядок.

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

Допустим, в статье есть фраза с именем 東京. В черновике автор поместил всё предложение внутрь одного <ruby> и добавил длинную транскрипцию в единственный <rt>. Визуально это может выглядеть компактно, но читатель уже не понимает, относится ли чтение к слову, к фразе или к отдельному имени. Исправление начинается с редакторского решения о границах аннотации. Затем разметьте только этот фрагмент и сравните вид и озвучивание.

Второй пример — короткое слово переносится на новую строку, но подсказка оказывается визуально ближе к знаку из предыдущей строки. Не добавляйте немедленно абсолютное позиционирование. Проверьте, что элементы остаются последовательными inline-фрагментами, удалите искусственные пробелы и оцените узкую ширину. Если проблема воспроизводится только при необычной комбинации кегля и ширины, сохраните её в тестовом примере до изменения общих правил.

Нет. Это название типографического способа связать короткую аннотацию с основным текстом; фуригана — один знакомый сценарий для японских знаков. В HTML аннотация может передавать чтение, транслитерацию или короткое пояснение, если именно такой вид связи подходит материалу.

Нет, <rp> необязателен для браузера с поддержкой руби. Он даёт запасные скобки вокруг чтения для пользовательских агентов без корректного руби-отображения. Решение зависит от целевых устройств и редакционного оформления; проверьте, что резервные символы не появляются лишними в основном сценарии.

Технически короткая подпись может быть произвольным текстом, но длинный перевод трудно читать в маленьком надстрочном размере и он ломает ритм строки. Для перевода предложения лучше использовать обычный соседний абзац или двуязычное оформление; руби оставьте для компактной подсказки к конкретному знаку или слову.

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

Не добавляйте ARIA автоматически. Сначала проверьте, как исходная структура озвучивается экранными дикторами в поддерживаемых браузерах: подсказка может читаться ожидаемо или, в отдельных сочетаниях, повторяться. Только после теста решайте, требуется ли дополнительная доступная формулировка.

Можно, если читателю действительно нужна компактная привязка произношения или транслитерации к термину. Для пояснения значения обычно проще написать скобки, сноску или определение в тексте. Выбирайте разметку по задаче и объясните условные обозначения при первом появлении.

Посмотрите итоговый HTML и настройки очистки содержимого в CMS. Система могла удалить <ruby> или <rt>, превратить код в обычный текст либо изменить вложенность. Сравните исходник редактора с опубликованной страницей и проверьте, разрешены ли нужные элементы в санитарном фильтре.

Руби-аннотация работает, когда читатель быстро видит, к какому знаку относится подсказка, и может прочитать исходную фразу без помех. Сначала определите редакционные границы и смысл аннотации, затем используйте нативные ruby и rt, добавьте уместный резерв через rp и проверьте страницу на устройствах, при масштабировании и с вспомогательными технологиями. Если для проекта нужен собственный набор знаков, его можно подготовить в Fontgenerator и отдельно проверить, как основа и аннотация смотрятся вместе.

HTML Standard, разделы о ruby, rt и rp: https://html.spec.whatwg.org/multipage/text-level-semantics.html. MDN, элемент rt: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/rt. HTML Standard, правила отображения руби: https://html.spec.whatwg.org/multipage/rendering.html.