Robert Louis Stevenson
When I read this short essay by Robert Louis Stevenson, I recognised a man who loved islands, since there are references to different islands that he had either explored or invented.
I have created a few versions of this wonderful essay from RLS, partly from an interest in islands, but also because there are many opportunities to make cross references to other material from RLS himself. I have also travelled (some time back now) to the island described and I have included some photographs within the book.
Back in 2001, I created a Quicktime VR movie and had included this in a PDF version of this eBook. Including this in the ePub version seems impossible for the moment. Even putting a link to the QTVR online is a bit risky because recent versions of Quicktime from Apple no longer supports this format.
Download the eBook in ePub format
Posted on 16 Sep 2010 around 10am
Technical Stuff
Note: Version 1.2.1 changed deal with changes to iBooks 1.2.1
Pictures
Images that relate to the text are set to float to the right together with their captions. This is achieved by including the img tag and the caption inside a block element. Only the width of the image is specified in the mark-up, and this is set to 100%. The containing block, however, is styled to be set to 35%. This means that the image and caption will reduce when the width of the display is reduced. This seems to work well in Adobe Digital Editions as well as iBooks.
Specifics for iBooks
The iBook interface allows for image enlargement by double tap so there are some things to consider:
- the double tap will display the whole image
- if the image is smaller than 658 x 860 then it will be centred with white space around
- larger than 658 x 860, there will be no cropping, and it will resize to fit but maintaining the proportions of the image
- I guess the trick is to keep an image as large as possible but with the view to overall file size of the ebook. In other words, don't overdo the size; you won't get better quality.
- store the image as big as the iPad screen (careful here... maybe future versions will change!)
- in landscape mode, the image can enlarge to 860pixels wide. It may be larger, in fact for the sake of future developments, maybe 1000pixels width is better
There is a strange anomaly with the screen size:
If you make the cover image 658 x 860pixels 72dpi, then you get a good thumbnail for the bookshelf in the iBooks library, and if you double tap when in portrait mode, the cover will enlarge to the full iPad screen (and look gorgeous!), however, if you make the images in the book, this same size, then double tap does not fill the screen with the image; instead you will find some white space left and right or - top and bottom if in portrait orientation, with a portrait image.
Shadows on images
Yes, you can get them on the iPad and on Safari with this rule for the img elements:
-webkit-box-shadow:3px 3px 11px #888;
border: 1px solid #888;
Hyperlinks
With CSS you can style the hyperlinks, as you normally would for a web page, however:
The iPad cannot make any sense of the hover state, but you may want to include it for ADE and the Firefox reader. The default hyperlink style for iBooks, is very low key and I really want to inform the reader that there is more information inside. I have made the hyperlinks display stronger and with a dotted underline. 'Hover' doesn't work on an ereader device but 'active' does. 'Visited' doesn't work. So here is the relevant CSS:
a:link {
text-decoration:none;
font-weight:bold;
border-bottom:1px dotted #96CEEB;
color: #426AC6;
}
a:active {
text-decoration:none;
font-weight:bold;
border-bottom:none;
background:#96CEEB;
color:white;
}
We really want hypertext popups and this will come surely.
In the meantime we have to make do with links to other documents. There is a problem with this however; there is no easy way for the reader to get back from whence they came. Like a 'go back' button would make sense. This may be provided in iBooks (maybe a future version), so we won't need to worry about it. iBooks 1.2 introduced a 'back to... ' feature.
Here is what I have done to partially resolve:
Within the main text, we create a link thus:
<a id="raleigh" href="raleigh.xhtml">an island</a>
This takes us to the document raleigh.xhtml
At the bottom of this page we then get another link:
<a href="isletebook.xhtml#raleigh">Back to Memoirs of an Islet</a>
This jumps us back to the place we left off.
Now, we could be happy with that, if we made sure that the document (raleigh.html) cannot be accessed from any other way. More on this later, but the problem is that the 'Back to Memoirs of an Islet' link is a bit nonsensical if we have read it from the table of contents.
ToolTip text
On a web page if you add a title attribute then you should get 'tooltip text'.
Here is an example:
<a href="myfirstbook.xhtml" title="This essay by Robert Louis Stevenson describes thw writing of his book 'Treasure Island'">from <em>My First Book</em>, Robert Louis Stevenson,</a>
This will only work with the Firefox ePub extension. Not Adobe Digital Editions.