Poznaj Programowanie

Tagi HTML: rp

Piotr Grochal 6 min. czytania

Tag <rp> to rzadko używany, ale bardzo przydatny element HTML, który rozwiązuje konkretny problem w wielojęzycznych treściach. Służy do zapewnienia fallbacku (alternatywnej prezentacji) dla adnotacji ruby – małych adnotacji fonetycznych, popularnych w językach takich jak japoński, chiński czy koreański.

Dzięki <rp> przeglądarki nieobsługujące ruby wyświetlą czytelne nawiasy lub inne znaki wokół adnotacji, zamiast psuć układ strony.

W epoce globalizacji treści <rp> zyskuje na znaczeniu – szczególnie na blogach edukacyjnych, w słownikach online czy serwisach o kulturze Wschodu. W tym wpisie poznasz definicję, składnię, przykłady kodu, wsparcie przeglądarek oraz praktyczne wskazówki i stylizację w CSS.

Czym jest adnotacja ruby i po co tag <rp>?

Adnotacje ruby wywodzą się z typografii japońskiej, gdzie małe znaki (furigana) umieszczane są nad lub obok kanji, podając ich wymowę lub znaczenie. W HTML ruby implementowane jest za pomocą trzech kluczowych tagów:

  • <ruby> – kontener nadrzędny, grupujący tekst bazowy z adnotacjami;
  • <rt> – zawiera samą adnotację (np. wymowę);
  • <rp> – element definiujący, co wyświetlić w przeglądarkach bez wsparcia ruby, najczęściej nawiasy ( ) lub （ ）.

Bez <rp> starsze lub uproszczone przeglądarki „wkleją” adnotację obok tekstu bazowego, co może zaburzyć layout. Tag <rp> zapewnia elegancką degradację – treść pozostaje czytelna w każdych warunkach.

Przykład: w przeglądarce bez wsparcia ruby zobaczysz zapis w stylu „漢(hàn)”, zamiast adnotacji nad znakiem.

Podstawowa składnia i struktura użycia

Tag <rp> zawsze występuje w parach wewnątrz <ruby>, otaczając <rt>. Oto standardowa struktura:

<ruby> Tekst bazowy<rp>(</rp><rt>Anotacja</rt><rp>)</rp>
</ruby>

Najważniejsze zasady pracy ze składnią wyglądają tak:

  • tekst bazowy (np. kanji) to główny element,
  • <rp> przed i po <rt> zawiera identyczną treść fallbacku (np. nawiasy),
  • można zagnieżdżać wiele adnotacji w jednym <ruby>.

<rp> obsługuje atrybuty globalne HTML (np. id, class, style, title) oraz atrybuty zdarzeń (np. onclick, onmouseover). Nie ma własnych atrybutów specyficznych.

Przykłady kodu w akcji

Przykład 1 – podstawowa adnotacja z fallbackiem (język chiński)

Poniższy kod możesz skopiować i uruchomić w CodePen lub w lokalnym pliku .html:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład tagu &lt;rp&gt;</title>
<style>
ruby { ruby-position: over; font-size: 24px; } /* Stylizacja CSS dla ruby */
rt { font-size: 0.5em; color: #666; }
rp { color: #999; font-size: 0.8em; }
</style>
</head>
<body>
<h2>Adnotacja ruby z &lt;rp&gt; (wsparcie dla starych przeglądarek)</h2>
<p>Tekst chiński z wymową:</p>
<ruby>
漢<rp>(</rp><rt>hàn</rt><rp>)</rp>
</ruby>

<br><br>

<p>Kolejny przykład z grupą znaków:</p>
<ruby>
日本語<rp>（</rp><rt>にほんご</rt><rp>）</rp>
</ruby>
</body>
</html>

Efekt: w nowoczesnych przeglądarkach zobaczysz małe „hàn” nad „漢”, a w tych bez wsparcia ruby – tekst „漢(hàn)”. Właściwość CSS ruby-position: over; umieszcza adnotacje nad tekstem bazowym.

Przykład 2 – zaawansowany z wieloma adnotacjami i listą

W słowniku online warto łączyć wiele adnotacji w jednej grupie ruby, zachowując pełną semantykę list:

<ul>
<li>
<ruby>東京<rp>（</rp><rt>とうきょう</rt><rp>）</rp></ruby> – stolica Japonii.
</li>
<li>
<ruby>
電腦<rp>(</rp><rt>diànnǎo</rt><rp>)</rp>
科學<rp>(</rp><rt>kēxué</rt><rp>)</rp>
</ruby> – informatyka.
</li>
</ul>

Przykład 3 – integracja z JavaScript (dynamiczne ruby)

Dynamiczne generowanie ruby po kliknięciu przycisku wygląda tak:

<button onclick="addRuby()">Dodaj ruby</button>
<div id="container"></div>

<script>
function addRuby() {
const container = document.getElementById('container');
container.innerHTML = `
<ruby>
程式<rp>(</rp><rt>chéngshì</rt><rp>)</rp>
</ruby> – programowanie!
`;
}
</script>

W aplikacjach SPA dynamicznie wstawiany <rp> gwarantuje czytelność także bez wsparcia ruby.

Wsparcie przeglądarek i kompatybilność

Tag <rp> jest szeroko wspierany w popularnych przeglądarkach. Przykładowe wersje pełnego wsparcia wyglądają następująco:

Przeglądarka Wersja pełnego wsparcia
Chrome 5.0
Edge 12.0
Firefox 38.0
Safari 5.0
Opera 15.0

Uwaga: starsze przeglądarki (np. IE poniżej 9) ignorują ruby, ale <rp> zapewnia czytelny fallback. Warto testować w narzędziach pokroju „Can I Use”.

Stylizacja CSS dla <rp> i ruby

Domyślnie <rp> nie ma stylów – kontrola leży po Twojej stronie. Kluczowe właściwości to:

  • ruby-position: over | under | inter-character; – pozycja adnotacji,
  • ruby-align: space-around | center; – wyrównanie adnotacji,
  • dla <rt> i <rp>: font-size, color, display: ruby-text.

Poniższy przykład CSS ułatwia czytelność i subtelnie wyróżnia fallback:

ruby {
ruby-position: over;
ruby-merge: separate; /* Zachowuje osobne adnotacje */
}
rp {
font-size: 0.6em;
opacity: 0.7; /* Subtelny fallback */
}

Praktyczne zastosowania i dobre praktyki

Najczęstsze zastosowania i wskazówki wdrożeniowe prezentują się tak:

  • Słowniki i edukacja – idealne dla nauki języków azjatyckich oraz materiałów edukacyjnych online;
  • Międzynarodowe projekty – przydatne w aplikacjach z tłumaczeniami (np. komponenty Ruby we frameworkach);
  • SEO i dostępność – semantyczne tagi jak ruby mogą poprawiać doświadczenie użytkowników i czytelność dla czytników ekranu;
  • Najlepsze praktyki – stosuj konsekwentną składnię i testy kompatybilności;
  • Alternatywy – gdy nie używasz ruby, rozważ krótkie dopiski w nawiasach lub przypisy w tekście.

Doprecyzowując najlepsze praktyki, pamiętaj o poniższych zasadach:

  • zawsze używaj <rp> dla kompatybilności,
  • nie nadużywaj – długie adnotacje męczą czytelników,
  • testuj w różnych przeglądarkach i z wyłączonym wsparciem ruby,
  • łącz ruby z metadanymi (np. dopiskiem w tekście) dla łatwiejszej automatycznej obróbki.

Potencjalne pułapki i błędy

Podczas implementacji zwróć uwagę na najczęstsze problemy:

  • Brak zamknięcia tagów – <rp> musi być parowy, inaczej walidacja HTML5 zawiedzie;
  • Zbyt długie adnotacje – zawartość <rt> nie powinna przekraczać 1–2 linii;
  • Brak fallbacku – pominięcie <rp> pogorszy czytelność w przeglądarkach bez wsparcia ruby.