HD Dropcaps for iBooks

HD Dropcaps for iBooks

I’ve seen many ways to create drop caps in ebooks but somehow they never appeared to be a beautiful as they could be when looking at them on a lovely Retina Display. The problem is that when you replace the first letter with an image, your text is appearing at around 320dpi – where as the image is going to be a horrible 72dpi.

I tried playing with various methods, but all either incorrectly displayed the image (missing chunks off) or simply displayed the image way too big.

It is also worth noting that I knew I could simply place the image “align right” in a div to size it – but 1, that would have not properly replaced the actual word and 2, it would mean that the reader could click and expand the image – which of course I don’t want as it is supposed to be part of the text.

The solution was actually very simple and in the example below I use a 400px x 400px dropcap image neatly placed on the page at 100px x 100px giving a nice hi res crisp image.

First the html…
Having found the solution...

Then the css…
.drop {
display:block;
float:left;
width:100px;
height:100px;
margin-top:0px;
padding-right:.5em;
text-indent: -9000px; }
.H {
background: url(../Images/H.jpg) 0 0 no-repeat;
background-size:100px 100px; }

The results appear to work beautifully on my iPad and iPhone. Let me know if you have any other solutions 🙂