As many of you know, Carrie Lion is just about done, needing only a page or so of text and a few small doodles before all the content is complete.
What this means, is that I’ve started to figure out how I’m actually going to be ‘making’ the ebook. No boys and girls, I can’t just shovel everything into a file and beat it into submission… sadly. It involves a whole bunch of code and tears.
This blog post will be (as the name suggests) all about how I’m figuring this junk out. If you have some knowledge of HTML and web development in general, this post will be far more entertaining. If you don’t, go learn some quick, I’ll wait.
While we wait for those guys to get back – Hardware aside, I’d like to say how much you should appreciate that awfully written book you’ve just finished on your (insert ereader here). I don’t mean the book itself, that thing is garbage. No, I mean the fact that it is on your device and that you could waste literal hours of your life reading it. Know that (if it was formatted nicely) it took someone hours of physical pain, and discomfort to get that trashy romance novella in front of you.
Oh good! You’re back! Right, where was I? Oh, yes. The crushing of souls under poor code, and a bajillion, slightly different, devices.
Now that everybody here has a basic grasp of HTML and the underlying practices involved in putting web pages together, everybody knows that when putting a site together, you’re not really doing it once. It’s more like doing it anywhere between 2 and 6 times. Each browser looks at the code just a little differently, which means that unless your code is immaculately written (keeping the 4 major browsers in mind, always) using the perfect functions, the site will work (or not work) differently depending on your browser.
Ok, that may be exaggerating a little, but you get the idea.
A very small section of the HTML for one page of a simple website.
HTML is fairly lenient in it’s syntax, meaning, you can leave out small things and the browser will usually fill in the blank. You can use sloppy code, and most of the time, it will work.
Now, most ebook formats have their roots in XML, which is like the overbearing, judgmental family member of the internet, looking down on everybody’s behavior at the supper table. Very strict syntax, meaning you need to have squeaky clean code.
Thankfully, ebooks nowadays mostly use XHTML. XHTML is the illegitimate love-child of judgy-judgington up there, and the laid back, successful college dropout, you met at the bar the other day. Pretty strict when it comes to a lot of things, but at the same time, let’s some bad code slip.
Xhenry (the X is silent) is trying to compile an ebook while sitting on a small boat, in a river that’s not quite deep enough for him to go anywhere on, but also too wide for him to get out of with all his tech. He has a laptop running Windows, an Android tablet, an Ipad, and a Gobii ereader.
His first thought, is to put together a simple .doc and convert it to .epub using one of the popular pieces of software to get an idea of how epubs are put together. This results in what looks like a well organised file that displays well on his laptop. This is promising, he thinks to himself as he readies his other devices for testing.
The Gobii displays the book but the image quality is dismal – he chalks this up to the Gobii’s screen. Loading time for each page is awful.
The Android displays it near perfectly, except that in landscape, an image is displayed on every second page. The other pages are blank. Image quality is as you would expect.
The Ipad is missing the cover page and page 3. Everything else is great.
The river is calm and the little boat is still.
XHenry opens up the epub in an editor and takes a stab at the code, thinking he could fix some of the issues. He tweaks a few strange references and adds in a few lines of code that should even things out a little.
The Gobii’s image quality has been improved, even though the images are untouched. Everything else still works. He feels crippling depression each time he turns a page.
The Android now displays an image on every page, but the page numbers are nonexistent. This is worrying, considering the numbering hasn’t been touched either.
The Ipad is still missing a cover and page 3.
The rivers current begins to tug at the little boat.
Next Xhenry decides that the issues may be due to images that are too big, causing the devices to freak out a little. He cuts them down to 25% their original size and tests again.
The Gobii’s loading time is marginally improved.
The Android is unchanged.
The Ipad fails to show a cover and page 3, and has mysteriously appeared in the river, somehow. Nobody knows how.
The river calms again, but the boat’s edges had begun to chip away.
A new approach is taken. Each page’s code is written in separate xhtml files, and mostly from scratch for neater code! Jpg images are also replaced with svg vector files with embedded jpgs to try and improved the text legibility.
Gobii looks great but the crushing-sadness loading time is back with a vengeance.
Android loads everything except page 1, 3, 8, and 9. Page numbers are correct, at least.
The Ipad sinks.
The little boat is jostled by a strong wind, and impacts a nearby rock. The boat has a hole.
A small mammal is sacrificed to the ebook gods.
The svg idea is scrapped. Xhenry’s next idea to to tackle the much disputed ‘text over image’ route. Instead of having the text form part of the image, Xhenry wants to have text displayed over the image. He spends the remainder of the afternoon reading up about how others have tackled this issue. After examining code that apparently did the trick, he sets about writing up his own code. The first attempt relied on a z-index, which stacks one element on top of another as though layers were used.
The Gobii loads the text first and puts the image a centimeter after it.
The Android loads the image first and puts the text a centimeter after it.
The debris of the restless river claws at the boat’s hull.
Xhenry tries another approach, in between scooping water. This time he wants to simply use the background-image property, which should set the image to (you guessed it) a background. The text would then be displayed on top of it as usual.
The Gobii loads the image first and puts the text a centimeter after it.
The Android loads the image first and puts the text a centimeter after it.
Hm. Xhenry uses this set back to relocate some more water.
All of this effort to make the text look slightly better, when keeping the text in the image works – Xhenry thinks to himself. His earlier sacrifice seems to have worked as the ebook gods imbue him with the power to slap together a new, fancy version in only 2 hours! This version is magnificent. The code is concise and uses only tested, working commands, plain images, and separate xhtml files for each page. It was perfect.
The Gobii works magically. Everything is pretty and big and loads quickly. There are even correct page numbers!
The Android is missing the cover and page 3, it mysteriously appears in the river seconds before everything explodes.
There’s a feeling I get while watching Xhenry struggle with such simple problems. Ebook formatting is like trying to get new software to work on the hardware of my forefathers. No self-respecting Windows 98 would boot up to the new-fangled 8.1 metro interface, and no self-respecting developer would try to get it to. Yet, developers are forced to get ebooks consistently working across devices akin to that found in the middle-ages.
Jutoh has promised to be an easier way to put ebooks together, and has been passed along through dark alleyways, basement cult meetings, and developer forums. Once Xhenry has recovered, I’m sure he’ll have another go at it.