Мастерство в HTML-руби́-аннотациях

Введение

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

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Настройка HTML-документа

Сначала создадим новый HTML-документ в файле index.html. Добавьте в файл следующий код:

<!doctype html>
<html>
  <head>
    <title>Ruby Annotation Example</title>
  </head>
  <body>
    <h1>Ruby Annotation Example</h1>
  </body>
</html>

Эта базовая структура создает документ, который мы будем использовать для создания примера руби́-аннотации.

Добавление руби́-текста

Далее мы добавим некоторый текст, который мы хотим аннотировать руби́-текстом. Добавьте следующий код после тега h1:

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

Создание руби́-аннотации

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

<p>
  Here is some text that we want to annotate with ruby text. In East Asian
  typography, ruby text is used to provide the pronunciation or translation of a
  character.
</p>

<ruby> 漢 <rt>hàn</rt> </ruby>

В этом примере мы заключаем символ '漢' в тег <ruby>. Затем мы используем тег <rt> для предоставления руби́-текста 'hàn'.

Добавление дополнительных символов

Добавим несколько дополнительных символов в наш пример. Замените код тега <ruby> следующим:

<ruby> 漢 <rt>hàn</rt> </ruby>

<ruby> 字 <rt>zì</rt> </ruby>

<ruby> 表 <rt>biǎo</rt> </ruby>

В этом коде мы добавляем еще два символа в наш пример и аннотируем их соответствующим руби́-текстом.

Тестирование руби́-аннотации

Сохраните файл index.html и откройте его в веб-браузере. Вы должны увидеть следующий вывод:

Ruby Annotation Example Output

В этом выводе вы можете увидеть аннотированные символы с их соответствующим руби́-текстом.

Резюме

Поздравляем! Вы успешно создали руби́-аннотации с использованием HTML-тега <rt>. Руби́-текст является важной составляющей руби́-аннотации в HTML и используется в восточной азиатской типографии для указания произношения или перевода символа.

Пояснение HTML-руби́-аннотации