I've been trying to find way to add an icon for reference footnotes inside paragraphs and sentences. Liz Castro covered some corner cases for iBooks. But it involves wrapping img with a div. The problem is that this causes problems when your image should be inside a ptag.

What I want is to be able to add an icon inside a paragraph and sometimes in between a paragraph (i.e. display:inline-block). The icon ideally should be able to resize based on the reader's current font-size setting (i.e. the use of "em" instead of absolute pixels number). The solution needs to be cross-platform - so the same ePub/mobi source file would work on iBooks, Kindle e-Ink, Kindle Fire, etc.

Here is my current snippet.
<div style="display:inline-block;" data-linked="true"><a data-links="1" name="mn-26086aa1b6aa38d2f6fe4af53eb786e1" style="text-decoration:none;display:inline-block;height:0.98em;width:0.69em;" href="mn-26086aa1b6aa38d2f6fe4af53eb786e1.xhtml"><img height="20px" width="14px" src="Penguin-mid-res.JPG" style="height:100%;width:100%;vertical-align:middle;"/></a></div>
The blue portion is for iBooks as mentioned in Liz's post. However, there's seem to be a problem when the above snippet is placed inside a paragraph tag.

As you can see, it works fine when the icon is outside the paragraph in the second case.

The reason we have the red part of the code is that Kindle e-Ink doesn't support style tag and it also doesn't (the ones I tested) accept "em" for image sizing. But it does support height/width attributes directly so by defining those we can set the height and width for Kindle and then it safely ignores the css inside the style attribute.

Ricky Wong

Hey there!!

You can call me Ricky. I'm a technologist, business person, and a student of life. This blog documents my observations and discoveries. I worked at Google, studied at INSEAD and UCSB, and have lived in France, Hong Kong, California, and Singapore. My passion is in building (hopefully useful) things. You can find me on Twitter, Facebook, and LinkedIn. Please don't feel alienated because of this "global digital native" persona. I actually prefer talking to people directly. Oh, btw, "Kin" is my cantonese name. This is how you write it "键". I can tell you what it means next time we meet.