View Single Post
Old 12-28-2013, 11:05 AM   #25
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,561
Karma: 20150435
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
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.
Attached Thumbnails
Click image for larger version

Name:	ade1.png
Views:	272
Size:	175.3 KB
ID:	117288   Click image for larger version

Name:	ade2.png
Views:	255
Size:	51.6 KB
ID:	117289   Click image for larger version

Name:	ade3.png
Views:	278
Size:	143.1 KB
ID:	117290  

Last edited by Jellby; 12-28-2013 at 01:42 PM.
Jellby is offline   Reply With Quote