It’s good to be old

By on February 1st, 2012

0

There was a time — not that long ago, really — when I was the up-and-coming kid in the office. I was young, I was hip, I was on top of everything new. I was the one who, in 1995, went to the people running the interactive agency where I was working and said, “You know, guys, we really should start looking into building websites for people. It’s going to be big.”

Now I find myself working with people who weren’t even born yet when Star Wars was in the theaters. Heck, they were in diapers when the web was born.

At the ripe old age of 43, I find myself feeling like the grand old man.

Not that I’m not still on top of things, always chasing the latest technology wave. (OK, I admit it, I hate texting. But that’s just because … well, honestly, I’m not sure why it is. Maybe I’m just anti-social.)

So this past week, as I was trying to solve a problem in creating eBooks that would be “cross-platform” — meaning a single ePub (the format used by iBooks) that would convert to a reasonable .mobi, if you’re interested — I was glad to find that for once, my age was an asset.

Turns out that the Mobi format, which is used for Kindles, is based on old — and I mean O-L-D — HTML standards. Like, pre-HTML4 stuff. No CSS (for the most part), no nothing. So while Apple is pushing ePub3, which lets you create all kinds of interactive eBooks, I was dealing with a format that doesn’t even let you use an image as a link.

At this point, I have seen many younger programmers give up. “Sorry, can’t do it,” they say. It’s a phrase I hear all the time, and it’s starting to get on my nerves. Sure, there are times when you can’t do something. Some things are just impossible. (Like getting around full justification in iBooks, if the user has it turned on. Grrrrrrr.)

But I don’t, in general, give up that easy. So here is a technique for displaying a text link in a Mobi file, while the ePub displays an image link.

The situation is this: I’m programmatically generating an ePub, which is then run through Calibre to create a Mobi file. The relevant HTML looks like this:

<a class="indexTopLink" href="index.html#top">
   <img class="indexTop" width="100" height="0" src="backToTop.png"/>
</a>
<a class="textTopLink" href="index.html#top">top</a>

So you’ve got two links in the HTML. The height attribute on the arrow image — yes, Virginia, we used to actually set height and width on the actual image, back when dinosaurs roamed the earth — tells the Mobi reader to render the image with a height of 0, so it’s invisible, but the width attribute makes it wide enough to provide some spacing. Then the Mobi reader displays the text link, which actually works.

Now we deal with the ePub. We add some CSS:

.indexTop {
   height: 24px;
   width: 100px;
}
.textTopLink { 
   position: relative; 
   left: -9990px;
}

The first rule tells the ePub reader to over-ride the image attributes and display the image at the correct size, so it’s visible. The second tells it to move the text link over to the left so that it’s not.

Because the Mobi reader ignores the class attribute these rules are ignored, so we have an image link for ePub, and a text link for the Mobi.

And all with techniques that fell out of favor long before a lot of today’s web programmers even started college.

It’s good to be the grand old man.

Categorized under: Programming tips, Web 2.0, Web Development.
Tagged with: no tags.