Today I learned that HTML has a dedicated element for annotating a pronunciation next to a word — <ruby> — and it is not a tooltip, not an abbreviation, and not something you hack together with <sup>.
<ruby> is the container. <rt> is the small gloss. That is the whole element family.
<ruby>croissant<rt>kwah-SAHN</rt></ruby>Japanese furigana and Chinese pinyin are the famous uses, where each character carries its own gloss:
<ruby>漢<rt>かん</rt>字<rt>じ</rt></ruby><ruby>東京<rt>とうきょう</rt></ruby>ruby { ruby-position: over; /* `under` if you want pinyin below the characters */ ruby-align: space-between; /* center | start | end | space-around */}ruby-align decides what happens when the gloss is wider than the base text. The CSS default lets it spill onto the neighbouring text; space-between widens the word instead.
