8

I'm trying to make a multilingual ebook where I have two different translations of the same story. I'm trying to get it so that you can toggle the language by clicking on individual paragraphs. I asked a similar question on Stackoverflow a while ago but I found out that not all ereaders support Javascript.

I thought that I'd try doing it with only CSS. I just the checkbox hack that I found on this Stackoverflow thread, but that didn't work. How can I recreate a toggle effect on ereaders.

Even though it may be difficult, I've seen it done before.

Improve this question

1 Answer 1

Reset to default
1

Javascript would be the best way to do this, but as you note, not all ebook reading systems support Javascript—in fact, very few of them beyond iBooks do. Without Javascript, this isn't really possible, unfortunately. The doppletext site that you link to uses Javascript, for example.

Ebook reading systems support a fairly limited subset of HTML and CSS. Of particular relevance, most of them do not support the advanced CSS selectors like the type being used in the checkbox hack that you link—there's no selecting the adjacent sibling.

The only other option that I can think of is epub 3.0's epub:trigger. Unfortunately, at present that only allows you to toggle visibility:hidden and not display:none, which means the space the invisible paragraphs take up will still be there, so you'll have giant translation-sized holes in your text. Even if the IDPF adds a display control to epub:trigger, epub 3 support in reading systems is sadly lacking (despite it being the approved standard for two and a half years now), so that probably won't get you any farther than using Javascript.

Sorry for being the bearer of bad news! I'd love to be proven wrong on this—I've worked on several ebook projects that could benefit from this type of thing, and have never been able to find a way to do this acceptably other than with Javascript.

Improve this answer
4
  • Then how do they get it to work on Kindle devices? I assumed they were using javascript for IBooks, but I thought you couldn't do that with Kindle. They got it to work somehow. What are they doing exactly? Does that mean that they have selected to only support a subset of all of the reading platforms?
    – j.jerrod.taylor
    Commented Apr 25, 2014 at 18:32
  • 1
    It looks like on the Kindle, you aren't actually using the reading system; you're instead accessing the content via the Kindle's built-in web browser. Here's a writeup: the-digital-reader.com/2012/03/06/…
    – Tom
    Commented Apr 25, 2014 at 18:37
  • 1
    I think that the "correct" way to go for this kind of application consists in properly marking up the content, and let the reading system take care of it. Sadly, IDPF does not care. I supervise(d) a project about an EPUB 3 Android app specialized for parallel texts: github.com/pettarin/epub3reader (For coding simplicity, it relied on a naming convention, but you can clearly indicate the mapping with a markup approach.)
    – Alberto Pettarin
    Commented May 4, 2014 at 15:54
  • 1
    2/2: in Menestrello app ( readbeyond.it/menestrello/index.html ) we implemented code that recognizes elements with attributes in a special namespace, and it allows you to tap on a paragraph (say, in English), and have a bottom panel appear containing its translation (say, in Italian), see this screenshot: t.co/MoW2vjxfiK If the reading system does not support this features, it just behaves like a normal <a>.
    – Alberto Pettarin
    Commented May 4, 2014 at 16:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.