Raised Drop Cap Image Followed by Small Caps

[RyanMcSwain]

EDIT: I figured it out! https://www.mobileread.com/forums/sho...54&postcount=7

I have what appears to be a very specific problem in creating my ePub. I've been wrestling with it all day, and I can't find a solution. I've managed to get them to float left as a drop cap, but the formatting gets wonky so I'd rather keep them raised.

I'm attempting to use images as raised drop caps followed by small caps, but no matter what I do I get a line break following the image. I was able to get it to work in my mobi, but I can't get it to work across ePub devices (I'm testing on the iPhone) (edit: specifically in iBooks). I've tried using different classes and a million other solutions, and I'm out of ideas.

Here's the relevant css:

.scrivener15 {
font-variant: small-caps
}
.dropfix {
float:none; 
width: 25%;
}

Here's a sample of the html:

<div class="dropfix"><img alt=" " src="../Images/o-drop-cap-quote.gif" width="100%" /></div>

  <p class="scrivener15">f course it’s going to hurt.”</p>

I created the file with Scrivener and I'm tweaking it in Sigil.

Any help would be very appreciated. I guess I can experiment with removing the small caps, but I'd like to keep them if possible. Thanks!

[RbnJrg]

Originally Posted by RyanMcSwain

I have what appears to be a very specific problem in creating my ePub. I've been wrestling with it all day, and I can't find a solution. I've managed to get them to float left as a drop cap, but the formatting gets wonky so I'd rather keep them raised.

I'm attempting to use images as raised drop caps followed by small caps, but no matter what I do I get a line break following the image. I was able to get it to work in my mobi, but I can't get it to work across ePub devices (I'm testing in on the iPhone). I've tried using different classes and a million other solutions, and I'm out of ideas.

Here's the relevant css:

.scrivener15 {
font-variant: small-caps
}
.dropfix {
float:none; 
width: 25%;
}

Here's a sample of the html:

<div class="dropfix"><img alt=" " src="../Images/o-drop-cap-quote.gif" width="100%" /></div>

  <p class="scrivener15">f course it’s going to hurt.”</p>

I created the file with Scrivener and I'm tweaking it in Sigil.

Any help would be very appreciated. I guess I can experiment with removing the small caps, but I'd like to keep them if possible. Thanks!

Read the following posts:

https://www.mobileread.com/forums/sho...8&postcount=20

https://www.mobileread.com/forums/sho...51&postcount=9

https://www.mobileread.com/forums/sho...28&postcount=9

Regards
Rubén

[PeterT]

Also, before others point this out, saying that you have problems on an iPhone is meaningless. Realize there are MANY eReader programs available for the Apple iDevices, each of which have so own idiosyncrasies.

[RyanMcSwain]

Originally Posted by PeterT

Also, before others point this out, saying that you have problems on an iPhone is meaningless. Realize there are MANY eReader programs available for the Apple iDevices, each of which have so own idiosyncrasies.

You're right, of course, and I apologize. I'm specifically testing on iBooks, as I understand it's one of the most picky. I'm not having problems with other previewers.

[JSWolf]

If this is something you are doing for just yourself, I suggest you stop using iBooks and switch to Marvin or Bluefire Reader and you'll find both do work that much better then iBooks.

[RyanMcSwain]

Originally Posted by JSWolf

If this is something you are doing for just yourself, I suggest you stop using iBooks and switch to Marvin or Bluefire Reader and you'll find both do work that much better then iBooks.

This is for a book I'm publishing. I have everything else finished--just trying to make the best-looking ePub I can. This chapter-start formatting is the last thing I need to do.

I'm trying to use variable sizes so the raised drop caps looks good on different screens. My problem is that in order to use percentage widths I can't use inline css classes. That means I'm forced into a line break after the image.

I'm probably missing something obvious. Is there a way to make float:none work inside an ePub with a percentage width?

[RyanMcSwain]

Looks like I finally figured it out! I was definitely missing the obvious.

.scrivener15 {
font-variant: small-caps
}
.dropfix {
display: inline;
   width: auto;
   height: 4em;
}

<p class="scrivener15"><img class="dropfix" alt="“O" src="../Images/HIGH-QUALITY-drop-cap-quote.gif" /><span>f course it’s going to hurt.”</span></p>

[JSWolf]

Then here's what you'll have to do. You'll have to make one version for iBooks and one version for everything else. iBooks is an oddity unto itself and you do have to code differently there (not always, but a good portion of the time).

For example, font-variant: small-caps will not work with ADE based Readers/apps. So you either have to embed a font with a true small-cap font or fake it in the CSS like most publishers do.

[RyanMcSwain]

Originally Posted by JSWolf

Then here's what you'll have to do. You'll have to make one version for iBooks and one version for everything else. iBooks is an oddity unto itself and you do have to code differently there (not always, but a good portion of the time).

For example, font-variant: small-caps will not work with ADE based Readers/apps. So you either have to embed a font with a true small-cap font or fake it in the CSS like most publishers do.

Just wanted to thank you for this heads up, JSWolf. I've finally finished going through and implementing this change (using advice from the wiki here), and I'm thrilled with how well it has turned out.

Thanks again to everyone for weighing in.

[dgatwood]

Originally Posted by JSWolf

Then here's what you'll have to do. You'll have to make one version for iBooks and one version for everything else. iBooks is an oddity unto itself and you do have to code differently there (not always, but a good portion of the time).

I'd be curious what situations you've run into where such extreme measures are needed. I've generally found iBooks to be extremely spec compliant, with the exception of having to add extra files to tell it to not ignore CSS styling, a few annoying SVG bugs, and an occasional need to add

-webkit-line-box-contain: block inline replaced !important;

styles to work around behavior when floating boxes end up at page boundaries.

[JSWolf]

Originally Posted by dgatwood

I'd be curious what situations you've run into where such extreme measures are needed. I've generally found iBooks to be extremely spec compliant, with the exception of having to add extra files to tell it to not ignore CSS styling, a few annoying SVG bugs, and an occasional need to add

-webkit-line-box-contain: block inline replaced !important;

styles to work around behavior when floating boxes end up at page boundaries.

The best person to ask about the idiosyncrasies of iBooks is Hitch. Using iBooks to view your ePub as to how it looks is like converting the ePub to AZW3 to view it on a Kindle to see how the ePub looks. I'm not saying that iBooks doesn't work. But iBooks works in it's own way enough of the time that what you do in ADE doesn't work in iBooks.