tag:blogger.com,1999:blog-86891302562115207772024-02-21T03:02:34.517-08:00empirical epubBill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-8689130256211520777.post-49809063275130952172014-02-26T09:07:00.000-08:002014-03-09T17:36:05.912-07:00(legible) captions on imagesThe previous post gives a method to overlay text atop an image, and though any color can be used, the text may not stand out clearly enough from the background. It's possible to specify a background for the text, but it lies behind the image so this approach doesn't work.<br />
<br />
Instead, however, if the text is made a link, then the link's background color does show above the image and can be used to contrast with the text. Also, the background color can be made partially transparent so as not to completely block out the image. Strangely, any color specified for the link text itself seems to be ignored.<br />
<br />
Notes:<br />
The "href" in the anchor tag is needed to make it a link, and the empirically determined value "*" stops it from actually going anywhere when touched. (Otherwise it would have to point to some unique id). The padding and rounded corners are for aesthetics.<br />
<br />
There is still visual feedback when the link is touched and this could be used, for example, to change the background or eliminate it altogether to better see the underlying image (as in the hover selector). Or perhaps better, just double tap the image to zoom and pan without the caption and then hit done to restore.<br />
<br />
This works in iBooks and Marvin.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4t6G4PEKkJry7-6oLlkQWndEVz4MCSU0c9-bjSjgeudeuALICut0PqiacohD8y236W6vSQsp4SV_ilXe4172U_fGVPd2ZElVARyfg0PtZcLDbCucZEGJsVq4jTyimOiywwEaLWccvLb4/s1600/caption.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4t6G4PEKkJry7-6oLlkQWndEVz4MCSU0c9-bjSjgeudeuALICut0PqiacohD8y236W6vSQsp4SV_ilXe4172U_fGVPd2ZElVARyfg0PtZcLDbCucZEGJsVq4jTyimOiywwEaLWccvLb4/s1600/caption.jpg" height="400" width="225" /></a></div>
<br />
<br />
XHTML<br />
<span style="font-family: Courier New, Courier, monospace;"><div class="container"></span><br />
<span style="font-family: Courier New, Courier, monospace;"><img alt="" src="../Images/theimage.jpg" /></span><br />
<span style="font-family: Courier New, Courier, monospace;"><p class="caption up"><a class="frame" href="*">the caption</a></p></span><br />
<span style="font-family: Courier New, Courier, monospace;"></div></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Times, Times New Roman, serif;">CSS</span><br />
<span style="font-family: Courier New, Courier, monospace;">div.container {</span><br />
<span style="font-family: Courier New, Courier, monospace;"> display: inline-block;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> width: 100%;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> text-align: center;</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;">p.caption {</span><br />
<span style="font-family: Courier New, Courier, monospace;"> font-size: .8em;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> font-style: italic;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> text-align: center;</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;">p.up {</span><br />
<span style="font-family: Courier New, Courier, monospace;"> margin-top: -2em;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> margin-bottom: 0;</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;">a.frame.link {</span><br />
<span style="font-family: Courier New, Courier, monospace;"> padding: 0em 2em;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> border-radius: 10px;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> text-decoration: none;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> background-color: rgba(255,255,255,0.75); /*white with transparency*/</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace;">a.frame:hover {</span><br />
<span style="font-family: Courier New, Courier, monospace;"> text-decoration: none;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> background-color: transparent;</span><br />
<span style="font-family: Courier New, Courier, monospace;"> visibility: hidden; /*zap entire caption */</span><br />
<span style="font-family: Courier New, Courier, monospace;">}</span><br />
<span style="font-family: Courier New, Courier, monospace; font-size: x-small;"><br /></span>
<span style="font-family: Courier New, Courier, monospace;"><br /></span>Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com0tag:blogger.com,1999:blog-8689130256211520777.post-37054453318311098152014-01-09T17:44:00.000-08:002014-01-09T17:44:19.530-08:00Captions on images<div style="font-family: Helvetica; font-size: 13px;">
Sometimes you want to place a caption directly on top of an image - e.g. when then image is full screen. One almost-too-simple way to do this is to follow on the image with a paragraph, say, styled with a negative margin-top and with the text in a contrasting color. e.g.</div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
<div><img scr=“../Images/theimage.jpg” /></div></div>
<div style="font-family: Helvetica; font-size: 13px;">
<p style=“margin-top: -2em; text-align: center; color: red;”>the caption</p></div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
This works in iBooks (iOS and OSX9) and Marvin. This scales pretty well as font-size is changed, but in any case any overflow comes out under the image.</div>
Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com0tag:blogger.com,1999:blog-8689130256211520777.post-8365356126216173222014-01-09T17:42:00.000-08:002014-01-09T17:42:10.682-08:00Scaling full screen images with Media Queries<div style="font-family: Helvetica; font-size: 13px;">
Images with an aspect ratio (width/height) less than that of the screen’s should be scaled by height while those greater should be scaled by width. e.g. extreme cases are portraits in landscape screen orientation and landscapes in portrait screens. There are no programming capabilities in xhtml/css (except possibly in javascript), but media queries can be used for a kind of solution. [svg wrappers might be another way to go?]</div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
In particular, take the three ratios (and their inverses) in iOS devices: </div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
2/3 for original iPhones and iPod Touches</div>
<div style="font-family: Helvetica; font-size: 13px;">
3/4 for iPads</div>
<div style="font-family: Helvetica; font-size: 13px;">
40/71 for current iPhone and iPod Touch [9/16 is advertised but it’s actually 40/71]</div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
Then place the image ratio on this scale increasing to the right:</div>
<div style="font-family: Helvetica; font-size: 13px;">
40/71 2/3 3/4 4/3 3/2 71/40</div>
<div style="font-family: Helvetica; font-size: 13px;">
and note the screen ratio immediately to the right, i.e. >=</div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
Now define classes in css corresponding to these ratios as follows, and (e.g. for a square image) use a construct in xhtml like</div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
<div class=“ratio4x3”><img class=“ratio4x3” scr=“../Images/theimage.jpg” /></div></div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
<div style="font-family: Times; font-size: 12px;">
@media (device-aspect-ratio: 40/71) and (orientation: landscape) {</div>
<div style="font-family: Times; font-size: 12px;">
.ratio71x40 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x2 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio4x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x4 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio2x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio40x71 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
}</div>
<div style="font-family: Times; font-size: 12px;">
@media (device-aspect-ratio: 2/3) and (orientation: landscape) {</div>
<div style="font-family: Times; font-size: 12px;">
.ratio71x40 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x2 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio4x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x4 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio2x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio40x71 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
}</div>
<div style="font-family: Times; font-size: 12px;">
@media (device-aspect-ratio: 3/4) and (orientation: landscape) {</div>
<div style="font-family: Times; font-size: 12px;">
.ratio71x40 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x2 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio4x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x4 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio2x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio40x71 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
}</div>
<div style="font-family: Times; font-size: 12px;">
@media (device-aspect-ratio: 3/4) and (orientation: portrait) {</div>
<div style="font-family: Times; font-size: 12px;">
.ratio71x40 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x2 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio4x3 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x4 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio2x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio40x71 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
}</div>
<div style="font-family: Times; font-size: 12px;">
@media (device-aspect-ratio: 2/3) and (orientation: portrait) {</div>
<div style="font-family: Times; font-size: 12px;">
.ratio71x40 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x2 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio4x3 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x4 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio2x3 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio40x71 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
}</div>
<div style="font-family: Times; font-size: 12px;">
@media (device-aspect-ratio: 40/71) and (orientation: portrait) {</div>
<div style="font-family: Times; font-size: 12px;">
.ratio71x40 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x2 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio4x3 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio3x4 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio2x3 {width: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
.ratio40x71 {height: 100%; }</div>
<div style="font-family: Times; font-size: 12px;">
}</div>
</div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
This works in iBooks and Marvin on iOS devices. Media Queries don’t seem to work in other reader apps except for Kobo, which has other issues. They don’t seem to work in iBooks with OSX9 or Calibre, but these apps seem to scale the images correctly automatically.</div>
<div style="font-family: Helvetica; font-size: 13px;">
<br /></div>
<div style="font-family: Helvetica; font-size: 13px;">
Here are the gotchas:</div>
<div style="font-family: Helvetica; font-size: 13px;">
First is that you need to use “device-aspect-ratio”, not just “aspect-ratio”. </div>
<div style="font-family: Helvetica; font-size: 13px;">
Next is that ratios>1 don’t match - you need to use the inverse with “orientation: landscape”. </div>
<div style="font-family: Helvetica; font-size: 13px;">
Finally, “@media” can’t take a qualifier - even “all” - or it won’t work right.</div>
Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com0tag:blogger.com,1999:blog-8689130256211520777.post-9752810704008776932012-09-10T15:46:00.000-07:002012-09-10T15:46:15.232-07:00pop-up footnotes in iBooks with Sigil<a href="http://www.pigsgourdsandwikis.com/2012/05/creating-pop-up-footnotes-in-epub-3-and.html">Liz Castro</a> describes the basics of getting pop-up footnotes to work in iBooks but lacking an epub3 editor this feature is hard to explore. As a workaround, the current (epub2) versions of Sigil can produce epubs with pop-up footnotes that work in iBooks if the appropriate (epub) namespace is declared. e.g. here is the complete xhtml.<br />
<br />
<!--StartFragment--><span style="font-family: Courier New, Courier, monospace;"><?xml version="1.0" encoding="utf-8" standalone="no"?></span><br />
<span style="font-family: Courier New, Courier, monospace;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</span><br />
<span style="font-family: Courier New, Courier, monospace;"> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></span><br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops"></span><br />
<span style="font-family: Courier New, Courier, monospace;"><head></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <title>Book</title></span><br />
<span style="font-family: Courier New, Courier, monospace;"></head></span><br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><body></span><br />
<span style="font-family: Courier New, Courier, monospace;"> <p>worthy of a footnote <a epub:type="noteref" href="#ref">[ref]</a></p></span><br />
<br />
<span style="font-family: Courier New, Courier, monospace;"> <p epub:type="footnote" id="ref">the footnote</p></span><br />
<span style="font-family: Courier New, Courier, monospace;"></body></span><br />
<span style="font-family: Courier New, Courier, monospace;"></html></span><br />
<span style="font-family: Courier New, Courier, monospace;"><br /></span>
<span style="font-family: Times, Times New Roman, serif;">Sigil doesn't honor the <aside> tag, but styling <p> or <div> with "display:none" gives the same effect.</span><br />
<span style="font-family: Times, Times New Roman, serif;"><br /></span>
<span style="font-family: Times, Times New Roman, serif;">The resulting epub doesn't pass epubcheck but does work ok in iBooks.</span><br />
<!--EndFragment--><br />
Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com7tag:blogger.com,1999:blog-8689130256211520777.post-74353328418951111092012-01-18T14:39:00.000-08:002012-01-18T14:39:53.870-08:00iBooks body margin contortions<div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"> One annoying aspect of iBooks is how much whitespace is wasted on the margins of the body text. Applying background colors (cyan and yellow respectively) you can see that the <body> element is contained within the <html> element. </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJunYapcSjPRB4jMvF5hfMwT-PSj3axhUZ6Ze_IC6oVzKDx0kXMy-2ggIw3uGjSZjXS6Yo2n5Nn0mmkP5zKv0YIpm3r38ieV1LwpBOLkjneY_CGosZlYXCm0B5URt1UKYAOYkhiuBfIo/s1600/screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJunYapcSjPRB4jMvF5hfMwT-PSj3axhUZ6Ze_IC6oVzKDx0kXMy-2ggIw3uGjSZjXS6Yo2n5Nn0mmkP5zKv0YIpm3r38ieV1LwpBOLkjneY_CGosZlYXCm0B5URt1UKYAOYkhiuBfIo/s320/screenshot.png" width="213" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div style="text-align: left;">It's possible, though, to squeeze a little more space (10 pixels on a retina display) out on the left by adjusting the left margin by 5 (CSS) pixels. For images, 5 pixels means 5 screen pixels as seen above.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">On the right side, it turns out that setting "width:100%" on the body element, which you'd expect would be innocuous, actually pushes the the right side a little beyond the <html> edge, so things get clipped.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVZK1lxIKmAsrTa-DbFPKFLYfaidO-VuXs762212kXgpssgHM_OzPgiTJ0scr11q5m886POkG0DYySzBlaTPef5sL_OKvYp1qf2jEJLyUNHMV32i40n_Ac97gUqVVaOaXE18O0ngubvQ/s1600/bodywidth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVZK1lxIKmAsrTa-DbFPKFLYfaidO-VuXs762212kXgpssgHM_OzPgiTJ0scr11q5m886POkG0DYySzBlaTPef5sL_OKvYp1qf2jEJLyUNHMV32i40n_Ac97gUqVVaOaXE18O0ngubvQ/s320/bodywidth.png" width="213" /></a></div><div class="separator" style="clear: both; text-align: left;">So presumably replacing "100%" with the appropriate pixel value would get you exactly to the edge...</div><div style="text-align: left;"><br />
</div>Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com0tag:blogger.com,1999:blog-8689130256211520777.post-28512846144925969902011-12-15T16:28:00.000-08:002011-12-15T16:28:36.487-08:00with iBooks 1.5iBooks 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.Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com0tag:blogger.com,1999:blog-8689130256211520777.post-70840588862442291092011-11-20T11:50:00.000-08:002011-11-20T11:50:30.292-08:00more popout notes for iBooks with JavascriptThe 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.<br />
<br />
<br />
<div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">XHTML:</div><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><p onclick="popoutblack(this)"><span class="inlinenote" style="color: transparent;">some text for the note</span>some text for the paragraph</p></span></div><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 17px;"><br />
</div><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">CSS:</div><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">span.inlinenote {</span></div><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display: block;</span></div><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height: 0; /* default overflow is "visible", but 'invisible' since transparent */</span></div><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; font: normal normal normal 14px/normal Verdana; line-height: 18px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">}</span></div><div><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><br />
</span></div><div><span class="Apple-style-span" style="color: #222222; font-size: 13px; line-height: 18px;"><div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font: normal normal normal 14px/normal Verdana; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">javascript:</div><div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font: normal normal normal 14px/normal Verdana; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">function popoutblack(obj) { //switch transparencies</span></div></span><span class="Apple-style-span" style="color: #222222; font-family: 'Courier New', Courier, monospace; font-size: 14px;"><div><span class="Apple-style-span" style="color: #222222; font-family: 'Courier New', Courier, monospace; font-size: 14px;"> <div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><!--StartFragment--> switch (obj.style.color) { </div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> case "": { //case no inline style defined for <p></div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> obj.style.color = "transparent"; </div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> obj.firstChild.style.color = "black"; // otherwise color (now transparent) is inherited</div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> } </div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> break;</div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> default: { // restore to original conditions</div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> obj.style.color = ""; </div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> obj.firstChild.style.color ="transparent";</div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> }</div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> };</div><div style="-qt-block-indent: 0; -qt-user-state: 1; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"> }</div><div style="-qt-block-indent: 0; -qt-paragraph-type: empty; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-indent: 0px;"><!--EndFragment--></div></span></div></span><div style="color: #222222; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><br />
</span></div></div>Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com0tag:blogger.com,1999:blog-8689130256211520777.post-31295352541731309072011-11-06T17:13:00.000-08:002011-11-20T11:51:32.609-08:00inline "footnotes" for iBooks<div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">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.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">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. </div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">XHTML:</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><p onclick="popoutwhite(this)"><span class="inlinenote">some text for the note</span>some text for the paragraph</p></span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">CSS:</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">span.inlinenote {</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>display: block;</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>color: white;</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>height: 0; /* default overflow is "visible", but 'invisible' since white */</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">}</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">javascript:</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">function popoutwhite(obj) { //colorless <p> text disappears; white <span> text shows up against a gray background. </span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>switch(obj.style.background) {</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>case "": {obj.style.background = "gray";}</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>break;</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>default: {obj.style.background = "";}</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">};</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>switch(obj.style.color) {</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>case "": {obj.style.color = "transparent";}</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>break;</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-tab-span" style="white-space: pre;"> </span>default: {obj.style.color = "";}</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;">};</span></div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">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.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">Notes: </div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">This works in both iBooks and Sigil. Also the Kobo app for iOS.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">The inline text must be shorter than the paragraph; otherwise it will be clipped.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">The reader could be alerted to such paragraphs by a special border, or some other means.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">Could be useful with question and answer sets.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">Only inline style attributes are accessible with this technique; not important in this case, but in other examples.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 17.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">The "this" keyword simplifies the coding and lets the function be called from any paragraph.</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 14.0px Verdana; margin: 0.0px 0.0px 0.0px 0.0px;">Comments welcome!</div>Bill Bensonhttp://www.blogger.com/profile/05399475453425023058noreply@blogger.com0