[clairvoyant]

I appreciate the response @DNSB.

So I went ahead and purchased a Kobo device and wrote a software in Rust to accomplish this. It automatically fetches all the words, translates them and then export a bilingual epub. I then use Calibre with Kobo Touch Extended Driver installed to convert the book into kepub while transferring it to my device.

<ruby> looks great but unfortunately I ran into two issues:

1. Loading a chapter makes the device freeze for about 50 seconds while showing a blank page with the book title visible in the footer. Once the chapter (xhtml file I assume) is loaded, turning pages is as responsive as usual.
2. Clicking on a word freezes the device for a couple of seconds and does nothing. When trying to select multiple words, it freezes and sometimes selects all the words from your word to the beginning of the page.

I assume it's due to how Kobo parse <ruby>. Code example:

<p>
    <ruby>
        Die
        <rt>the</rt>
    </ruby>
    <ruby>
        Unglücksfälle
        <rt>accidents</rt>
    </ruby>
    <ruby>
        des
        <rt>of the</rt>
    </ruby>
    <ruby>
        Studenten
        <rt>students</rt>
    </ruby>
    <ruby>
        Anselmus.
        <rt>*</rt>
    </ruby>
</p>

When converted to kepub by Kepubify for example:

<p>
    <ruby>
        <span class="koboSpan" id="kobo.13.1">Die</span>
        <rt><span class="koboSpan" id="kobo.13.2">the</span></rt>
    </ruby>
    <span class="koboSpan" id="kobo.13.3"> </span>
    <ruby>
        <span class="koboSpan" id="kobo.13.4">Unglücksfälle</span>
        <rt><span class="koboSpan" id="kobo.13.5">accidents</span></rt>
    </ruby>
    <span class="koboSpan" id="kobo.13.6"> </span>
    <ruby>
        <span class="koboSpan" id="kobo.13.7">des</span>
        <rt><span class="koboSpan" id="kobo.13.8">of the</span></rt>
    </ruby>
    <span class="koboSpan" id="kobo.13.9"> </span>
    <ruby>
        <span class="koboSpan" id="kobo.13.10">Studenten</span>
        <rt><span class="koboSpan" id="kobo.13.11">students</span></rt>
    </ruby>
    <span class="koboSpan" id="kobo.13.12"> </span>
    <ruby>
        <span class="koboSpan" id="kobo.13.13">Anselmus.</span>
        <rt>*</rt>
    </ruby>
</p>

To debug, I tried changing <ruby> to a similar format with <span> and relying on CSS to get the same style. It seems to have solved both the issues but results in Kobo ignoring the connection and sometimes have page breaks between a word and its translation. Playing around with "break-inside: avoid;" doesn't seem to make any difference. <ruby> doesn't seem to have this issue.

Is there anything else I could try to fix the issues?