<rt>
Tekst adnotacji w elemencie ruby: wymowa lub znaczenie wyświetlane nad tekstem bazowym.
- Wyświetlanie
- ruby-text
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa (phrasing content)
Przykład
#<p lang="zh" style="font-size: 2rem;">
<ruby>学<rt>xué</rt>习<rt>xí</rt></ruby>
</p>
<p>Po chińsku „uczyć się”. Każdy znak ma tu własną adnotację.</p>Definicja i zastosowanie
#Element <rt> (od angielskiego ruby text) zawiera treść adnotacji w elemencie <ruby>, najczęściej wymowę. Przeglądarka wyświetla go mniejszą czcionką nad tekstem bazowym, a w tekście pionowym obok niego.
Każdy <rt> odnosi się do tekstu bazowego, który stoi przed nim: od początku <ruby> albo od poprzedniego <rt>. Możesz więc dać adnotację każdemu znakowi z osobna albo jedną całemu słowu. Osobne adnotacje pozwalają przeglądarce łamać linię między znakami.
<rt> może stać wyłącznie wewnątrz <ruby>. Znacznik zamykający formalnie można pominąć, jeśli zaraz po nim jest kolejny <rt>, <rp> albo koniec elementu <ruby>, ale czytelniej jest go pisać.
Składnia
#<ruby>字<rt>zì</rt></ruby>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Więcej przykładów
#<p lang="ja" style="font-size: 2rem;">
<ruby>東京<rt>とうきょう</rt></ruby>
</p>
<p>Tokio po japońsku, z wymową zapisaną hiraganą nad całym słowem.</p>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
rt {
display: ruby-text;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Adnotacje powinny być krótkie: wymowa albo jedno słowo tłumaczenia.
- Umieszczaj
<rt>tylko wewnątrz<ruby>. - Rozmiar i kolor adnotacji zmienisz w CSS, np.
rt { font-size: 0.6em; color: gray; }.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.