initial-letter problems in iBooks

[JayPanoz]

So tl;dr: just don't use -webkit-initial-letter (and initial-letter).

To sum things up, first line overflows the column width, drop cap + lines overlap.

You may solve the overlap by applying a padding-right but then you'll be screwed when they fix this bug. Tried letter-spacing but it seems to have no effect.

[dauwhe]

Waiting for the fix to get into actual releases https://bugs.webkit.org/show_bug.cgi?id=147977

[dvschultz]

@dauwhe hi Dave.

[JayPanoz]

@dvschultz Hi dad, I've found a fix: apply margin-top to the drop-cap.

Here → http://webdesign.tutsplus.com/tutorials/better-css-drop-caps-with-initial-letter--cms-26350

But hey, there are other issues (won't play nicely with embedded fonts right now)

[JayPanoz]

So, after some round of testing, I can confirm

@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
    h1 + p:first-letter {
        -webkit-initial-letter: 3 2;
        initial-letter: 3 2;
        margin-top: 1em;
        margin-right: 0.25em;
    }
}

works in iBooks, ADE 4.5 OS X (webkit via readium) and iOS apps using webkit (ADE, Kobo, etc.) while not screwing up legacy RMSDK or apps which don't support initial-letter.

Margin-top has to be a big enough value though. For instance, 0.0625em (1px) may not be enough depending on user's font-size setting + initial-letter values (2).

Can also confirm iBooks applies a default when user picks another typeface so you may get a sans-serif when Palatino, Iowan Old Style, etc. are being used.

Last but not least, you can't select/highlight this drop cap in iBooks at the moment—but that may be a :first-letter problem.

[teytag]

Apple solutions from "FlowingExample3-1.epub" file. And iBooks, Azardi, ADE 4.0 screenshots.

.chapter > p:first-of-type {
    text-indent: 0em;
    margin: 7em 0 0 0;
}

.chapter > p:first-of-type:first-line {
    font-weight: bold;
}

.chapter > p:first-of-type:first-letter {
    font-size: 6em;
    color: #990000;
    float: left;
    line-height: .8;
    margin: 0 .1em 0 0;
    padding: 0;
    font-weight: normal;
}

.chapter p {
    text-indent: 1em;
    margin: 0;
}

<div class="chapter">
   <h1><span id="p01" epub:type="pagebreak"/>Formatting Text</h1>
   <p>This book is an example of a flowing style of book. A flowing....</p>
   ...
</div>

[JayPanoz]

@teytag Yeah that’s the stone age hack everybody has been using so far, which if we’re being honest, sucks quite a bit since user settings can turn it into a pile of dog crap.

The issue isn't about how to achieve drop caps but the initial-letter property and its specific bugs….