Клавиша / esc

<ruby>

Добавляем надстрочные подсказки к символам с помощью HTML.

Время чтения: меньше 5 мин

Кратко

Скопировано

Тег <ruby> используется для аннотации иероглифов или других символов краткими пояснениями — чаще всего это чтение слов в азиатских языках. Внутри тега размещается основной текст и пояснение к нему.

Пример

Скопировано
        
          
          <ruby>  <rp>(</rp><rt>вода</rt><rp>)</rp></ruby><ruby>  <rp>(</rp><rt>огонь</rt><rp>)</rp></ruby><ruby>  <rp>(</rp><rt>гора</rt><rp>)</rp></ruby>
          <ruby><rp>(</rp><rt>вода</rt><rp>)</rp>
</ruby>
<ruby><rp>(</rp><rt>огонь</rt><rp>)</rp>
</ruby>
<ruby><rp>(</rp><rt>гора</rt><rp>)</rp>
</ruby>

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Скопировано

Тег <ruby> оборачивает фразу, к которой нужно добавить аннотацию. Для пояснений используют вложенные теги:

  • <rt> — текст подсказки (аннотация);
  • <rp> — дополнительный текст для браузеров, не поддерживающих <ruby> (чаще всего, круглые скобки).
        
          
          <ruby>  <rp>(</rp>  <rt>дождь</rt>  <rp>)</rp></ruby>
          <ruby><rp>(</rp>
  <rt>дождь</rt>
  <rp>)</rp>
</ruby>

        
        
          
        
      

Как понять

Скопировано

Этот тег нужен для отображения пояснений прямо над символами — часто это читается как "подсказка к чтению". Это важно для языков с иероглифами (китайский, японский), где одно и то же слово может читаться по-разному.

Подсказки

Скопировано

💡 Используйте <ruby> только для небольших фраз или слов.