ePub3: localStorage/JavaScript/RTL support

[Doitsu]

Since the ePub3 specs neither prohibit nor require localStorage support I created a very simple test epub and the 4 apps that I tested it with (ADE 4.0.3 Azardi 38, Gitden Reader 4.4.9d and iBooks 3.2) all supported it.
However, I'm wondering whether dedicated ebook readers with ePub 3 support generally support localStorage or whether this is an unintentional app-only feature provided by the rendering engine.
I'm also interested in finding out whether epub3-enabled ebook readers finally support RTL languages such as Hebrew and Arabic.

If you have an ebook reader (or an app other than ADE, Azardi, Gitden or iBooks) that supports epub3 according to the manufacturer, please download the test file, select the first chapter and tap the Off button. This should hide the blue English translations above the German text. Then close the book and reopen it. If the blue text is still hidden, your reader supports localStorage. Then select the last chapter and compare it with the screenshot.

[Abekonge]

interesting - what are some of the potential uses of localstorage in ebooks you imagine?

A functionality like your test could be done with simple javascript manipulation of css (display:none /display: block) as well I guess.

[Doitsu]

Originally Posted by Abekonge

interesting - what are some of the potential uses of localstorage in ebooks you imagine?

IMHO, it might be useful for showing/hiding comments, answers, translations etc.

For more examples, see this very simple Javascript ebook that I found in a German ebook forum and this over-the-top ebook by the makers of Azardi with all kinds of puzzles.

It might even be useful for fancy fiction books, for example the Kadath guide by French ebook publisher Walrus. IIRC, at one point they ask the user a question and if the answer is incorrect the text becomes blurred etc.

You could even implement a book password with localStorage. (I'm aware of the fact that it could easily be defeated by tech-savvy users or by simply opening the book with an epub2 reader.)

A functionality like your test could be done with simple javascript manipulation of css (display:none /display: block) as well I guess.

I only have rudimentary JavaScript skills and I'm pretty sure that the functionality could be implemented much more efficiently.
Since you seem to have much better JavaScript skills, I've got a question for you: I implemented the show/hide functionality using sheet.deleteRule() followed by sheet.insertRule(). Is there any JavaScript method that would allow me to directly overwrite a CSS rule?

[roger64]

A Javascript footnote.

What you need to make it work:

1. - in the html file
- head: the script
- body: the a link and the div with the text and the id

2. - in the stylesheet
- definition of tooltip

3. - in the .opf file, the expression properties="scripted"

[roger64]

I used a Javascript footnote which already works with Calibre viewer. It's not like with the aside footnote, the text remains hidden till you tap on the anchor. Here I used

Note*.

as an anchor but, of course it could be a lot shorter.

You can either insert it as a block at the end of a paragraph or separate the a link and the div.

You also need to add

properties="scripted"

in the relevant item of the .opf file

[Doitsu]

Originally Posted by roger64

I used a Javascript footnote which already works with Calibre viewer.

Can you please attach a test file or post the JavaScript footnote code?

[roger64]

In the html a script tag

<title>Demo ePub3 Popups</title>
<script>
function tooltip_open(x) {
document.getElementById(x).style.display="block";
}
function tooltip_close(y) {
document.getElementById(y).style.display="none";
}
</script>

[roger64]

and the CSS

.tooltip {
    background: rgb(242, 242, 242);
    border: 2px solid #a1a1a1;
    border-radius: 25px;
    display: block;
    z-index: 9999;
    position: relative;
    padding: 0 10px 0 10px;
    display:none;
  }