Ruby annotation with complex scripts

This page contains some accompanying examples to Alan Flavell’s “Small Ruby Annotation Demo”. It concentrates on “simple ruby markup” because “complex ruby markup” is not supported by Internet Explorer 8. In Mozilla Firefox, choose the menu “View > Page Style > …” to see the effects of different stylesheets.


ירושלים (yrwšlym)   יְרוּשָׁלַיִם (yerušalayim)

نستعليق (nst‘lyq)   نَسْتَعْلِيق (nasta‘līq)

हिन्दुस्तानी (hindustānī)   हिंदुस्तानी (hindustānī)

ประเทศไทย (prathēt thai)

Here is a complete sentence in Urdu taken from Bidirectional Text:

90 00 000 (9 000 000) ويب (web) صفحات (pages) كى (their) تلاش (search) هو (made) رهى (being) هے (is)


Letter-by-letter (or syllable-by-syllable) markup should in principle be made by complex ruby. However, Internet Explorer versions 6, 7, 8 display this only as simple ruby.

Complex ruby markup

ירושלים yrwšlym   יְרוּשָׁלַיִם yerušalayim

ن‍‍س‍‍ت‍‍ع‍‍ل‍‍ي‍‍ق nstlyq   نَـ‍سْ‍‍تَ‍‍عْ‍‍لِ‍‍ي‍‍ق nastalīq

हिन्‍दुस्‍तानी hindus   हिंदुस्‍तानी hindus


Simple ruby markup

Internet Explorer versions 6, 7, 8, 9 do not respect the zero-width joiner (‍) in the first Arabic examples below and therefore do not join the Arabic letters.

יyרrוwשšלlיyםm   יְyeרrוּuשָׁšaלַlaיִyiםm

ن‍n‍س‍s‍ت‍t‍ع‍‍ل‍l‍ي‍y‍قq   نَـna‍سْ‍s‍تَ‍ta‍عْ‍‍لِ‍l‍ي‍ī‍قq

ن‍nـس‍ sـت‍ tـع‍ ‘ـل‍ lـي‍ yـق q   نَـnaـسْ‍ sـتَ‍taـعْ‍ ‘ـلِ‍ lـي‍ īـق q

हिhiन्‍nदुduस्‍sतानी   हिंhinदुduस्‍sतानी


Valid CSS
Andreas Prilop
8 August 2013