[sieve]

I suggest using ruby annotations for the translation part.

I am building a sanskrit reader[1] and needed a feature that allowed users to tag words with notes/meaning. ruby annotations work wonderfully for that.

[1] Site: https://www.adhyeta.org.in/

Backend: https://github.com/s-i-e-v-e/adhyeta

(The vocabulary features require a login, which is not open to the public as of yet.)

[Timwi]

I can see some texts in Sanskrit but I couldn't find any ruby annotations, nor a way to add/suggest any.

[sieve]

I am still working on the app part of the website (https://app.adhyeta.org.in/). Will enable registration/login in a week or two.

This is how the interface looks like/works, when logged in.

https://www.adhyeta.org.in/a/images/z85.png (ruby annotations can be seen floating above the source text)

https://www.adhyeta.org.in/a/images/z88.png

The "app" is laid out exactly the same way as the www version is. The only difference is that it provides tools to manipulate the status of words. Login is required because vocabulary progress has to be tracked on a per-user basis.

[aeve890]

How... how does it work?

[sieve]

Ruby annotations?[1] They were originally meant to provide pronunciation hints for Asian languages. The hints naturally float above or below the corresponding word. You do not have to play around with tables/grids/flex to make this happen.

[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ru...

[Alex-Programs]

+1 to this, they're an excellent little feature. Just bear in mind that the rendering differs substantially by browser, and some fonts (for the ruby text) work better than others. I'd recommend overriding as much as possible, including the font of the ruby text.

[sieve]

I primarily test with Chrome and Firefox (Epiphany, occasionally). And my usecase requires that I provide downloadable fonts as not all fonts have nice-looking Devanagari renderings. So, the overriding happens naturally.

[Alex-Programs]

Yeah, I also target Chrome and Firefox. I'll occasionally test on Edge.

I had a user report that pinyin was looking funny on Reddit. Turns out they use a system font stack which includes Verdana (and so only shows up on Windows), and Verdana does really poorly with Pinyin ruby (iirc it was a generic ruby thing, not just Pinyin).

I just replaced it with a custom system font stack without Verdana.

Not a difficult fix, but something to be aware of.

[pbhjpbhj]

What's the function of the non-rendered rp-elements?

[sieve]

Backwards compatibility for browsers that do not support this feature. You put your opening and closing parenthesis tokens within the "rp" tags and such browsers will show the hints within those parentheses.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp