Атрибут hidden тега <ruby>
Описание
Атрибут hidden позволяет скрыть элемент <ruby> и все его содержимое (включая базовый текст и аннотацию) от отображения на странице. Это полезно для временного скрытия ruby-разметки без удаления из DOM.
<ruby hidden>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
</ruby>
<button onclick="document.querySelector('ruby').removeAttribute('hidden')">
Показать ruby
</button>
Особенности работы:
| Характеристика | Описание |
|---|---|
| Влияние на отображение | Эквивалентно CSS: display: none |
| Доступность | Скрытый элемент не доступен для скринридеров |
| Наследование | Скрывает весь ruby-контейнер с содержимым |
Рекомендации по использованию:
- Используйте для временного скрытия ruby-аннотаций в учебных материалах
- Не применяйте для важного контента - скрытые элементы недоступны для пользователей
- Для условного отображения лучше использовать CSS-классы
- Альтернатива - атрибут
aria-hidden="true"для доступности
Пример учебного применения:
<div class="exercise">
<p>Попробуйте вспомнить чтение:</p>
<ruby hidden id="answer">
水 <rp>(</rp><rt>みず</rt><rp>)</rp>
</ruby>
<button onclick="answer.removeAttribute('hidden')">
Показать ответ
</button>
</div>
Ограничения:
- Не сохраняет пространство (в отличие от
visibility: hidden) - Не поддерживает анимации/переходы
- В IE10 и ниже требует полифила
- Скрытый контент всё равно загружается
Примечание: Для элементов
<ruby> атрибут hidden наиболее полезен в:
- Обучающих системах с проверкой знаний
- Интерактивных словарях
- Приложениях для запоминания иероглифов