<ruby>
Adnotacje ruby: mały tekst nad znakami, najczęściej wymowa znaków chińskich lub japońskich.
- Wyświetlanie
- ruby
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Treść frazowa oraz elementy
<rt>i<rp>
Przykład
#<p lang="zh" style="font-size: 2rem;">
<ruby>你<rt>nǐ</rt>好<rt>hǎo</rt></ruby>
</p>
<p>„Cześć” po chińsku, z wymową w zapisie pinyin nad znakami.</p>Definicja i zastosowanie
#Element <ruby> pozwala dodać do tekstu krótkie adnotacje wyświetlane nad nim (w tekście poziomym). To zapis znany z typografii wschodnioazjatyckiej: w japońskim nad znakami kanji zapisuje się ich wymowę hiraganą (tak zwana furigana), a w chińskim wymowę w zapisie pinyin.
Budowa jest prosta: w <ruby> umieszczasz tekst bazowy, a zaraz po nim <rt> z adnotacją. Możesz dać osobne <rt> każdemu znakowi albo jedno całemu słowu. Opcjonalne elementy <rp> z nawiasami zadbają o czytelność w programach, które nie obsługują ruby.
Adnotacje ruby przydają się nie tylko w językach azjatyckich. Możesz nimi dopisać wymowę trudnego słowa albo tłumaczenie terminu, pod warunkiem że adnotacja jest krótka.
Składnia
#<ruby>tekst bazowy<rt>adnotacja</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="en" style="font-size: 1.5rem;">
<ruby>array<rp> (</rp><rt lang="pl">tablica</rt><rp>)</rp></ruby>
<ruby>loop<rp> (</rp><rt lang="pl">pętla</rt><rp>)</rp></ruby>
<ruby>function<rp> (</rp><rt lang="pl">funkcja</rt><rp>)</rp></ruby>
</p>Domyślny CSS
#Większość przeglądarek wyświetla ten element z takimi stylami domyślnymi:
ruby {
display: ruby;
}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
#- Otaczaj każdy
<rt>elementami<rp>, żeby tekst był czytelny także bez obsługi ruby. - Oznaczaj język tekstu atrybutem
lang, np.lang="ja"albolang="zh", żeby przeglądarka dobrała właściwy krój pisma. - Elementy
<rb>i<rtc>ze starszych poradników są przestarzałe. Wystarczą<ruby>,<rt>i<rp>.
Powiązane hasła
#- <rt>Tekst adnotacji w elemencie ruby: wymowa lub znaczenie wyświetlane nad tekstem bazowym.
- <rp>Nawiasy zapasowe wokół adnotacji ruby, widoczne tylko tam, gdzie ruby nie jest obsługiwane.
- <abbr>Skrót lub akronim, z opcjonalnym rozwinięciem w atrybucie title.
- <bdi>Izoluje fragment tekstu o nieznanym kierunku pisma, np. nazwę użytkownika zapisaną po arabsku.
Widzisz błąd albo brakuje przykładu? Napisz do nas.