Dé bhur mbeathasa!
I run a not for profit that teaches an endangered language (Irish), and quality learning materials are quite hard to come by. I have been transcribing texts into the Roman alphabet (from our now rare native Gaelic font) and modern orthography, to improve access to students through our Squarespace website, but currently I just put the translation to English at the bottom of the page, separated from the actual Irish text.

The issue is that the structure of the language is very different, and words aren’t in the same order as English, and this is not very helpful as a learning resource to show students what is really happening within sentences. So to help learners understand what is going on, my vision is to take texts in the target language and have some way of integrating the translation word-by-word into the Gaelic text.

Initially I was hoping for a simple popup on hover for each word, with the English translation popping up for students. That seems difficult, or at least I would need help (I’m teaching myself as I go, I’m a language teacher not a programmer). Another idea is to change the text colour in both the Irish and English, so the verb in both is red, the noun is blue, etc, or something similar with coloured highlights or underlines. But that means the learner must jump up and down the page to connect the two colour-coded elements to understand what is happening in the text.

I don’t know what is possible with coding and don’t know what avenues to explore that would help make this translation idea more accessible for learners. Can anyone advise on just what might be possible for me to do, I’m open to any new ideas as I really just know there is a need for this kind of support for my students but am too inexperienced to know what can be done.

Buíochas óm chroí!
Dónall

I’ve looked into popup on hover, but things begin going over my head when it is more than one thing in a text block needing the hover. I have seen that I will need to separate out each word in the code (which I understand can be automated somewhat), assign it a specific number/name, and then set the style for that named element.