3 ms·

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/m

by sieve 2y ago

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/ https://www.adhyeta.org.in/ Backend: https://github.com/s-i-e-v-e/adhyeta 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 2y ago
I can see some texts in Sanskrit but I couldn't find any ruby annotations, nor a way to add/suggest any.
- sieve 2y ago
  I am still working on the app part of the website (https://app.adhyeta.org.in/ 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 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 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 2y ago
How... how does it work?
- sieve 2y ago
  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/ruby https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ru...
  - Alex-Programs 2y ago
    +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 2y ago
      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 2y ago
        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 2y ago
    What's the function of the non-rendered rp-elements?
    - sieve 2y ago
      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 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp

by sieve 2y ago

Timwi 2y ago

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

sieve 2y ago
I am still working on the app part of the website (https://app.adhyeta.org.in/ 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 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 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 2y ago

How... how does it work?

sieve 2y ago
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/ruby https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ru...
- Alex-Programs 2y ago
  +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 2y ago
    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 2y ago
      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 2y ago
  What's the function of the non-rendered rp-elements?
  - sieve 2y ago
    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 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp