<ruby>, <rt> și <rp> în HTML

<ruby>漢<rp>(</rp><rt>kan</rt><rp>)</rp></ruby>

Ce face <ruby>, <rt> și <rp>

<ruby> afișează un text mic deasupra (sau lângă) textul de bază. Este folosit mai ales în japoneză și chineză, pentru a arăta cum se citește un caracter.

<rt> conține adnotarea (pronunția). <rp> conține paranteze de rezervă: browserele care știu <ruby> le ascund, iar cele care nu știu le afișează, ca adnotarea să apară între paranteze.

Elementele <rb> și <rtc> apar în tutoriale vechi, dar sunt învechite (obsolete) în standardul actual.

Exemple

Exemplul 1: Pronunția unui cuvânt japonez

Fiecare caracter primește propria adnotare.

<p lang="ja">
  <ruby>東<rp>(</rp><rt>Tō</rt><rp>)</rp>京<rp>(</rp><rt>kyō</rt><rp>)</rp></ruby>
</p>

Ce afișează browserul

東京, cu „Tō” și „kyō” scrise mic deasupra fiecărui caracter.
(Într-un browser fără suport: 東(Tō)京(kyō))

Exemplul 2: Adnotare pentru o abreviere românească

<ruby> funcționează cu orice text, deși este gândit pentru limbile asiatice.

<p>Ana are ora de
  <ruby>TIC<rp>(</rp><rt>Tehnologia informației</rt><rp>)</rp></ruby>
  marți.</p>

Ce afișează browserul

Ana are ora de TIC marți. (deasupra lui TIC, mic: „Tehnologia informației”)

Greșeli frecvente

• Omiterea lui <rp>: în cititoare de text simplu sau browsere vechi, adnotarea se lipește de text (東Tō京kyō).
• Folosirea lui <ruby> în loc de <abbr title="..."> pentru explicarea abrevierilor în text obișnuit; <abbr> este alegerea semantică.
• Folosirea elementelor învechite <rb> și <rtc> din exemple vechi.

Comenzi înrudite

• <bdi> și <bdo>: Controlează direcția textului: bdi izolează un text cu direcție necunoscută (de exemplu un nume arab), iar bdo forțează o direcție.
• <span>: Container generic de tip inline, utilizat pentru a grupa o porțiune de text și a-i aplica stiluri CSS sau acțiuni JS.
• <b> și <i>: Elementul b atrage atenția asupra unui cuvânt fără să-l facă mai important, iar i marchează o voce diferită: termeni străini, tehnici sau gânduri.