[Jellby]

I have some HTML+CSS code that works fine for drop caps, and some code that works fine with poetry. They are something like this:

drop caps:

span.drop {
  font-size: 300%;
  line-height: 1;
  font-weight: bold;
  float: left;
  margin-top: -0.1em;
  margin-bottom: -0.1em;
}

<p><span class="drop">W</span>hen the siege and the assault had ceased at Troy...</p>

poetry:

div.poetry {
  text-align: left;
  margin: 1em 0 1em 2em;
}
div.poetry div.line {
  margin: 0;
  padding-left: 3em;
  text-indent: -3em;
}

<div class="poetry">
<div class="line">Pearl of delight that a prince doth please</div>
<div class="line">To grace in gold enclosed so clear,</div>
...
</div>

Nothing new here. As most of you probably know, the poetry code is intended to allow wrapped lines (in narrow screens) not be confused with simply many lines.

Now the problem comes when I want to combine both codes and have drop caps in poetry:

<div class="poetry">
<div class="line"><span class="drop">P</span>earl of delight that a prince doth please</div>
<div class="line">To grace in gold enclosed so clear,</div>
...
</div>

The following addition to the CSS works fine in a browser:

div.line span.drop, div.line span.smalldrop {
  margin-right: 1em;
}

(The negative text-indent would cause the text to overlap without the additional margin.)

But in ADE the effect is rather gruesome (screenshot attached). There text lines leave some empty space for the drop cap, but the drop cap is placed outside this empty space, over the text. It looks as if the float is not obeying text-indent. A quick test in my reader showed the same behaviour.

I can easily work around it by adding some margin-left (and increasing margin-right), but then it does not work properly in a browser or, I guess, in non-Adobe readers.

Does anyone have some working (in ADE or, at least, Adobe-based readers) code for drop-caps in poetry, or any new ideas?