Good news, folks. It seems it was as simple as setting "text-indent: 0" for the drop cap style. Why a span, with an explicit "display: inline !important", would be rendered with a text-indent is something that defies my understanding... until I realize we're dealing with ADE.
I was resigned to using an .xpgt file, but then I realized that it seemed to be working with images (first screenshot, that's with the "old" code).
So, with basically the following code, I could get it working with text too (second screenshot):
Code:
div.poetry div.line {
padding-left: 3.5em;
text-indent: -3.5em;
}
span.drop {
float: left;
margin-right: 0.5em;
text-indent: 0;
}
span.drop span {
font-size: 300%;
font-weight: bold;
}
div.poetry span.drop {
margin-left: -3.5em;
margin-right: 4em;
}
span.drop + span.first {
margin-left: -0.5em;
white-space: pre;
}
<div class="poetry">
<div class="line">
<span class="drop"><span>P</span></span><span class="first">earl</span>
of delight that a prince doth please</div>
...
(the nested <span> inside <span class="drop"> let's me use the same "em" units for cancelling the div.line padding/indent, independently of the drop cap size, otherwise I'd have to compute the appropriate size in terms of the new em. The texts "earl" and "To grace" do not line up, but that's intentional, to make it clear that the drop cap belongs to the first line, it can be controlled with the "span.drop + span.first" margin)
In the process, I noticed another ADE bug. When I tried to move a drop cap image up (third screenshot), it didn't work. Apparently ADE does not like "position: relative". I then tried setting a negative margin-top, and lo and behold, that only works if I have a border! So I had to use something like this:
Code:
img#initc3 {
border-top: 0.001px solid inherit;
margin-top: -2em;
}
p#c3 {
padding-top: 2em;
}
<p id="c3"><img id="initc3" class="drop" src="images/Init-C3.jpg" alt="Y"/><span class="first"><span class="hide">Y</span>ou</span>
will remember...
(Fortunately, the border is invisible in ADE. The padding in the parent paragraph is needed to prevent the top of the image being clipped at a pagebreak.)
So, all this is now working in ADE, and in my test browser (Opera), I hope it works in most readers too.