Sunday, November 6, 2011

inline "footnotes" for iBooks

The dictionary feature in iBooks and the Kindle app, where tapping a word immediately brings up a definition and another tap dismisses it, is so useful and appealing it inspires attempts to do something similar for footnotes, citations, references, etc.

Here's a javascript technique whereby tapping on a paragraph will overlay the paragraph temporarily with a prepared inline note, with a second tap restoring the original paragraph. 

<p onclick="popoutwhite(this)"><span class="inlinenote">some text for the note</span>some text for the paragraph</p>

span.inlinenote {
display: block;
color: white;
height: 0; /* default overflow is "visible", but 'invisible' since white */

function popoutwhite(obj) { //colorless <p> text disappears; white <span> text shows up against a gray background. 
switch( {
case "": { = "gray";}
default: { = "";}
switch( {
case "": { = "transparent";}
default: { = "";}

The idea is to make the originally invisible note - white on a white background - become visible by adjusting the background in two ways: first by setting the background to gray and paragraph color to transparent so it doesn't interfere.

This works in both iBooks and Sigil. Also the Kobo app for iOS.

The inline text must be shorter than the paragraph; otherwise it will be clipped.

The reader could be alerted to such paragraphs by a special border, or some other means.

Could be useful with question and answer sets.

Only inline style attributes are accessible with this technique; not important in this case, but in other examples.

The "this" keyword simplifies the coding and lets the function be called from any paragraph.

Comments welcome!

No comments:

Post a Comment