Element <rt> to kluczowy znacznik HTML do tworzenia adnotacji ruby, które wyświetlają tekst pomocniczy (np. wymowę lub tłumaczenie) nad lub obok tekstu bazowego. Używa się go głównie w kontekście typografii wschodnioazjatyckiej, takiej jak japońskie furigana, chińskie lub koreańskie notacje fonetyczne, ale świetnie sprawdza się też w edukacji i glosariuszach.
Czym jest adnotacja ruby i do czego służy <rt>?
Adnotacje ruby wywodzą się z druku wschodnioazjatyckiego, gdzie małe czcionki umieszczane nad znakami kanji, hanzi czy hangul podają ich wymowę (np. w romaji, hiraganie czy pinyinie).
W HTML element <rt> definiuje tekst adnotacji i zawsze musi być dzieckiem <ruby> – w przeciwnym razie zostanie zignorowany lub wyświetlony niepoprawnie.
Główne zastosowania:
- wymowa znaków – w japońskim
<rt>pokazuje hiraganę nad kanji, ułatwiając czytanie dzieciom lub osobom uczącym się; - tłumaczenia – nad obcym słowem można umieścić polskie wyjaśnienie;
- transliteracja – romaji nad kanji, pinyin nad hanzi;
- edukacja – w podręcznikach językowych, słownikach online czy aplikacjach do nauki.
Element <rt> obsługuje wyłącznie globalne atrybuty HTML (np. id, class, style) i nie posiada atrybutów specyficznych. Stylizację przeprowadza się głównie w CSS na elemencie nadrzędnym <ruby>.
Podstawowa struktura z <rt>
Najprostszy przykład to para <ruby> z tekstem bazowym i adnotacją <rt>:
<ruby>猫<rt>ねこ</rt></ruby>
Wynik: nad znakiem 猫 (kot po japońsku) wyświetli się małe ねこ (neko).
Bardziej zaawansowany wariant z wielokrotnymi adnotacjami (po jednej nad każdym znakiem):
<ruby>
漢<rt>kan</rt>
字<rt>ji</rt>
</ruby>
Tak powstaje zapis „kanji” z romaji nad każdym znakiem.
Rola elementu <rp> – nawiasy zapasowe
W przeglądarkach bez wsparcia ruby (dziś rzadko, ale nadal jako fallback) tekst <rt> może „wypaść” z układu. Element <rp> dodaje nawiasy tylko wtedy, gdy ruby nie działa:
<ruby>
漢<rp>(</rp><rt>kan</rt><rp>)</rp>
字<rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
Efekt: przy pełnym wsparciu – adnotacja nad tekstem; bez – zapis liniowy: 漢(kan)字(ji).
Inne powiązane elementy ruby
Dla przejrzystości pracy z adnotacjami ruby warto znać również te elementy:
<ruby>– kontener nadrzędny, definiuje blok ruby;<rb>– opcjonalnie zaznacza bazowy tekst (ułatwia stylizację i złożone przypadki);<rtc>– grupuje alternatywną/adodatkową linię adnotacji (np. druga warstwa: tłumaczenie obok wymowy).
Pełny, poprawny przykład z <rb> i dodatkową linią w <rtc> (wymowa + tłumaczenie):
<ruby>
<rb>東京</rb>
<rt>とうきょう</rt>
<rtc>
<rt>Tokyo</rt>
</rtc>
</ruby>
Taki układ umożliwia wyświetlenie dwóch warstw adnotacji: wymowy i tłumaczenia.
Stylizacja <rt> za pomocą CSS
Domyślnie przeglądarki renderują <rt> małą czcionką nad bazą (zależnie od języka). Możesz to łatwo dostosować w CSS:
ruby {
font-size: 2em; /* Powiększa cały blok */
}
rt {
font-size: 0.5em; /* Zmniejsza adnotację */
color: red; /* Kolor adnotacji */
ruby-position: over; /* over (domyślnie), under, inter-character */
}
ruby:lang(ja) {
ruby-position: inter-character; /* Dla japońskiego – między znakami */
}
Przykład kompletnego HTML z prostą stylizacją:
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body { font-size: 22px; }
ruby { font-size: 2em; }
rt { color: blue; font-weight: bold; }
</style>
</head>
<body>
<p><ruby>東京<rt>とうきょう</rt></ruby> to stolica Japonii.</p>
</body>
</html>
Efekt: duże 東京 z niebieską, pogrubioną wymową nad tekstem bazowym.
Praktyczne przykłady użycia <rt> na polskim blogu
1. Nauka japońskiego – furigana
Idealne dla blogów językowych i kursów:
<p>W zdaniu: <ruby>私は<rt>わたしは</rt></ruby>学生です (<ruby>がくせいです<rt>gakusei desu</rt></ruby>).</p>
Czytelne dla początkujących: hiragana + romaji w jednej linii.
2. Chińskie hanzi z pinyin
<ruby>
你<rt>nǐ</rt>
好<rt>hǎo</rt>
</ruby>
„Nǐ hǎo” – popularne powitanie.
3. Polskie glosy edukacyjne
Nawet w tekstach łacińskich lub specjalistycznych przypisy można prezentować ruby:
<ruby>
Cave<rp> </rp><rt>strzeż się</rt><rp> </rp>
Canem<rp> </rp><rt>psa</rt><rp> </rp>
</ruby>
4. Złożony przykład z listą i tabelą
Fragment sekcji ze słowami i tabelą znaczeń może wyglądać tak:
<section>
<h2>Słowa japońskie z furigana</h2>
<ul>
<li><ruby>山<rt>yama</rt></ruby> – góra</li>
<li><ruby>川<rt>kawa</rt></ruby> – rzeka</li>
</ul>
<table>
<tr><th>Kanji</th><th>Furigana</th></tr>
<tr><td><ruby>食<rt>たべる</rt></ruby></td><td>jeść</td></tr>
</table>
</section>
Wsparcie przeglądarek i dobre praktyki
Wsparcie dla <rt> jest bardzo dobre od czasów HTML5 (Chrome, Firefox, Safari, Edge). Dla optymalnego renderingu ustaw język dokumentu, np. lang="ja" lub lang="zh" w znaczniku <html>.
Orientacyjna kompatybilność wygląda tak:
| Przeglądarka | Wsparcie | Uwagi |
|---|---|---|
| Chrome | Tak | Pełne wsparcie renderingu ruby. |
| Firefox | Tak | Stabilne wyświetlanie <rt> i <rp>. |
| Safari | Tak | Dobre wsparcie na macOS i iOS. |
| Edge | Tak | Chromium – zgodność jak w Chrome. |
Dobre praktyki pracy z ruby:
- zawsze otaczaj
<rt>elementem<ruby>, - dodawaj
<rp>jako czytelny fallback dla starszych przeglądarek i czytników, - stylizuj ostrożnie – adnotacja ma być dyskretna i czytelna,
- testuj na urządzeniach mobilnych (ruby dobrze się skaluje),
- unikaj nadużywania – stosuj ruby tam, gdzie adnotacja realnie pomaga.
Zaawansowane triki z JavaScript
Możesz dynamicznie generować ruby (np. w słowniku lub narzędziu edukacyjnym):
function addFurigana(kanji, furigana) {
const ruby = document.createElement('ruby');
ruby.innerHTML = `${kanji}<rt>${furigana}</rt>`;
document.querySelector('#słownik').appendChild(ruby);
}
addFurigana('東京', 'とうきょう');
Takie podejście automatyzuje dodawanie wymowy do wskazanego tekstu.