[RbnJrg]

Originally Posted by 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?

Hi Jellby;

I didn't try what I writing you (right now, in the city where I live, it's very, very hot, 39-40º C, so it's very difficult to be in front of a PC ) but it seems that this part of the code:

margin: 1em 0 1em 2em;

has preference for over the dropcap properties. Maybe the issue could be fixed by adding:

span.drop {
  font-size: 300%;
  line-height: 1;
  font-weight: bold;
  float: left;
  margin-top: -0.1em;
  margin-bottom: -0.1em;
  margin-left: -1em !important; /* here you must do some experiment */
}

(Jellby, tengo dificultades para explicarme en inglés. Lo que quiero decir es que el estilo dropcap está dominado por los márgenes/padding izquierdos de los selectores .poetry y .line. Lo que tendrías que intentar es anular esos márgenes/padding agregando un margen izquierdo negativo al estilo drop. El problema es que el tamaño de fuente del estilo drop es distinto al de .poetry y .line así que el valor justo del margen izquierdo para .drop va a tener que surgir en base a prueba y error. Como dije arriba, en mi ciudad está haciendo un calor de locos (es un horno) y no da para estar sentado frente a una computadora así que no comprobé nada de lo que te estoy escribiendo Suerte con esto y si encuentro una solución te la posteo.)