As an avid Ebook reader, I’m excited at a recent opportunity which allows me to play a part in creating an eBook! This an eBook for kids and luckily the content for the book is created by someone else and I am only responsible for some of the technical details! A kids book written by me is not a kids book kids would want to read. 🙂
So what goes into an eBook? Amazon Kindle Format 8 and EPub 3 both use HTML 5 and CSS for content generation. This makes content creation easy for all of us with HTML & CSS experience. In a nutshell, an ePub is HTML, CSS, Images and Audio in a zip file. You can unzip and inspect the files like any other zip file.
A typical EPub zip file looks like the following:
- HTML/CSS/Images/Audio Files
In this example I have specified some Vendor specific fields. Apple provides options such as Fixed Layout or Open-Spread, which opens the book to both pages, so that you can control the experience more.
Unfortunately, there are Apple provides vendor specific HTML tags for adding soundtracks and other features to your HTML 5 book. I’m not sure how these will translate to other ePub readers, but I’m doubtful they are widely supported. Maybe it’s inherit in the nature of HTML that it will never evolve fast enough to support all vendors needs or possibly richer features will always be driven by companies such as Apple which add what they need when they need it and eventually it becomes standard.
What’s really cool is Apples support for adding an audio track, which is synchronized with the text; as the audio track plays it highlights words in the book! What a great feature for children learning to read! Unfortunately synchronizing the audio to the html is a very manual process. It works as follows:
- Record the audio.
- Find the start and stop of every word in the audio. Write this in an XML file.
- In your HTML markup containing the text of the book, wrap every word in a span class with an ID referencing the XML file.
Here is how it looks:
mytext.xhtml <span id="W1" class="audio">Robert</span> <span id="W2" class="audio">woke</span> <span id="W3" class="audio">with</span> mytextAudio.xml <par id="par1"> <text src="page02.xhtml#W1"/> <audio src="page02.m4a" clipBegin="2.559638s" clipEnd="3.013564s"/> </par> <par id="par2"> <text src="page02.xhtml#W2"/> <audio src="page02.m4a" clipBegin="3.013564s" clipEnd="3.303573s"/> </par> <par id="par3"> <text src="page02.xhtml#W3"/> <audio src="page02.m4a" clipBegin="3.303573s" clipEnd="3.429663s"/> </par>