with iBooks 1.5

iBooks 1.5 has solved one problem with this technique, but introduced another. Previously there would sometimes be spurious page turns, backwards or forwards, after tapping an affected paragraph. This doesn't seem to happen any longer. The new problem is that this technique doesn't work at all when the new night theme is selected.

more popout notes for iBooks with Javascript

The previous post showed how to expose a concealed note as white on gray. Here's a related technique to show the note as black on white.

XHTML:

<p onclick="popoutblack(this)"><span class="inlinenote" style="color: transparent;">some text for the note</span>some text for the paragraph</p>

CSS:

span.inlinenote {

display: block;

height: 0; /* default overflow is "visible", but 'invisible' since transparent */

}

javascript:

function popoutblack(obj) { //switch transparencies

  switch (obj.style.color) {

case "": { //case no inline style defined for <p>

 obj.style.color = "transparent";

 obj.firstChild.style.color = "black"; // otherwise color (now transparent) is inherited

}

break;

default: { // restore to original conditions

 obj.style.color = "";

 obj.firstChild.style.color ="transparent";

}

};

}

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. 

XHTML:

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

CSS:

span.inlinenote {

display: block;

color: white;

height: 0; /* default overflow is "visible", but 'invisible' since white */

}

javascript:

function popoutwhite(obj) { //colorless <p> text disappears; white <span> text shows up against a gray background. 

switch(obj.style.background) {

case "": {obj.style.background = "gray";}

break;

default: {obj.style.background = "";}

};

switch(obj.style.color) {

case "": {obj.style.color = "transparent";}

break;

default: {obj.style.color = "";}

};

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.

Notes: 

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!