Drop caps and poetry... in ADE

[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?

[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.)

[Jellby]

Originally Posted by RbnJrg

Maybe the issue could be fixed by adding:

  margin-left: -1em !important; /* here you must do some experiment */

That's basically the workaround I mentioned. I don't think !important has any effect, since this is being applied to a span.drop, and not to div.line, i.e. we are talking of margins for different elements, while !important would be used to override settings for a single element.

Something like that does indeed work in ADE, but I'm afraid it will break elsewhere. In my browser the drop cap is moved off-screen.

[mzmm]

changing your negative text-indent to negative margin seems to yield the desired results:

span.drop {
  font-size: 300%;
  line-height: 1;
  font-weight: bold;
  margin-top: -0.1em;
  margin-bottom: -0.1em;
  float:left;
}
div.poetry {
  text-align: left;
  margin: 1em 0 1em 2em;
}
div.poetry div.line {
  margin: 0;
  padding-left: 3em;
  margin-left: -3em;
}

[Jellby]

Originally Posted by mzmm

changing your negative text-indent to negative margin seems to yield the desired results

Thank you, but without the negative text-indent the poetry formatting is lost in narrow screens (or with long lines). Resize your window to be narrower than the lines, and you'll see the difference. Besides, without the negative text-indent I simply wouldn't use any margin or padding.

[roger64]

Hi

This is what I am using for plain text. I am aware it's a bit complicated ( I have one font for dropcap display and one for small caps) but it works well with ADE and i have been using it for a long time now. I need to differentiate because of the size and shape of some letters.

Using a double span (let1 and let2 or 4) to code the dropcap helps to place it precisely. Hopefully, this latter part of the code could be adapted for poetry.

I insert for example this in the CSS

/*Réglages Lettrines DEUX LIGNES ADE a été privilégié p/r à Sigil.*/

.let1{
display : block;
float : left;
margin-top : -0.5em;
margin-left : 0.0em;
margin-right : 0.2em;
height : 2.2em;
}

.let2{
font-family:'Linux Libertine Display-Regular';
font-size : 3.3em;
line-height : 1.1em;
color:green;
}

/*Réglage Lettrine J, Q et Ç (let 2 vers let4) */

.let4{
font-family:'Linux Libertine Display-Regular';
font-size : 2.9em;
line-height : 1.1em;
color:green;
}

then this, still in the css

span.smcpTypeA {font-family:'Linux Libertine O C';font-size:95%;font-style:normal;margin-left:-0.4em;}
span.smcpTypeV {font-family:'Linux Libertine O C';font-size:95%;font-style:normal;}

p.let {margin-left:0.8em;margin-right:0.8em;margin-top:0.3cm;margin-bottom:0.0cm;border:none;padding:0;background-color:transparent;text-indent:0.0cm;text-align:justify;}

In code view it may look like this:

<p class="let"><span class="let1"><span class="let2">N</span></span><span class="smcpTypeV">ous croyons</span> devoir prévenir le public, que, malgré le titre de cet ouvrage et ce qu’en dit le rédacteur dans sa préface, nous ne garantissons pas l’authenticité de ce recueil, et que nous avons même de fortes raisons de penser que ce n’est qu’un roman.</p>

It looks like these in ADE (see screenshots)

I also use a regex to put them in place:

S: <p class="let">([A-ZÉÀÔ])

R: <p class="let"><span class="let1"><span class="let2">\1</span></span>

[Jellby]

Originally Posted by roger64

This is what I am using for plain text.

Thank you too, but the problem appears when you try to combine the drop caps and the lines with negative text-indent or, in fact, any text-indent.

Apparently, in the browser the position of the drop-cap float is affected by both margin-left and text-indent, but in ADE text-indent has no effect. I think I'll have to use the xpgt trick to have special code for ADE.

[doubleshuffle]

Originally Posted by Jellby

I think I'll have to use the xpgt trick to have special code for ADE.

I'd be very grateful if you could share which code you eventually come up with for your xpgt file. I've run into the same problem as you with dropcaps in poetry, but simply gave up. (Have to admit I've never bothered to seriously look at those xpgt files so far...)

[Jellby]

Originally Posted by doubleshuffle

I'd be very grateful if you could share which code you eventually come up with for your xpgt file. I've run into the same problem as you with dropcaps in poetry, but simply gave up. (Have to admit I've never bothered to seriously look at those xpgt files so far...)

The basic idea is given here; for my uses, the xpgt file is just a CSS with XML syntax. In this case, instead of using "display", I'd use different margin settings.

[GMcG]

I'm not quite sure, if I have understood the problem, but without any indent and margin-left instead to the dropcap it seems to be OK with ADE, Calibre, Sigil and Firefox.
The sizes are:

.dropcap {
float: left;
font-size: 2.42em;
font-weight: bold;
line-height: 1.2em;
margin-bottom: -0.2em;
margin-top: -0.1em;
margin-left: 0.5em;
margin-right: 0.15em
}

George

[Jellby]

Originally Posted by GMcG

I'm not quite sure, if I have understood the problem, but without any indent and margin-left instead to the dropcap it seems to be OK with ADE, Calibre, Sigil and Firefox.

Yes, drop caps alone work fine, I had that in the first post. It is only when I combine them with poetry (and I need text-indent for poetry) that it fails.

[Arios]

jellby did you try with a p element?

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

Don't know if this what you are hoping however. Anyway, with ADE, the dopcap seems to be correctly placed.

[Hitch]

Originally Posted by Jellby

Yes, drop caps alone work fine, I had that in the first post. It is only when I combine them with poetry (and I need text-indent for poetry) that it fails.

Jellby:

I don't have a solution for you (I haven't actually tried to do both), but I do want you to know that I understand that the problem is dropcaps AND poetry for the negative-indent you need for the wrapped lines on the stanzas/tercets/whatever.

Hitch

[Jellby]

Originally Posted by Arios

jellby did you try with a p element?

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

Don't know if this what you are hoping however. Anyway, with ADE, the dopcap seems to be correctly placed.

A p inside div.line? I haven't tried that, but I have tried p.line instead of div.line, and it's no difference. Can you share a sample ePub that works in ADE?

Originally Posted by Hitch

but I do want you to know that I understand that the problem is dropcaps AND poetry for the negative-indent you need for the wrapped lines on the stanzas/tercets/whatever.

Thanks, sometimes it's nice to know someone understands

[roger64]

Hi

I am afraid, despite all these crystal clear explanations, Jellby's request is still fuzzy for me and I must apologize for being so dumb. Sometimes a small drawing is worth one thousand words. So, maybe a screenshot of a printed text could make me realize what he is looking for.

After that, maybe, I'll also understand probably why a negative indent is necessary.