Drop caps and poetry... in ADE

[Pablo]

Originally Posted by 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 of Jellby's kind of poetry could make me realize what he is looking for.

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

Jellby combines a negative indent with a positive padding of the same value.

Now consider a line of poetry. There are two possibilities:

1. The line fits completely in the width of the reader's screen.
2. The line does not fit in the width of the reader's screen and has to be split in multiple lines.

In the first case, the negative indent cancels out with the positive padding and the line starts at position 0 on the left.

In the second case, the negative indent cancels out with the positive padding in the first line but not in the second, third, etc., as text-indent only applies to the first line. So the first line starts at position 0 on the left, but the second starts at the position configured for the padding property.

In short: each new line of poetry always starts at position 0 of the left. If a line doesn't fit in the width of the screen, it continues in the next line with a small padding.

Example:

This line fits in the width of the screen
This line does not fit in the width of the
---screen
This line fits in the width of the screen
Another line that doesn't fit in the width
---of the screen

where "---" are white spaces.

[Jellby]

Originally Posted by roger64

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.

The problem is not really in the effect I'm after, which is just a normal drop cap, but within a poetry environment (meaning hard linebreaks). But, as a sample, take this page, and ignore the fact that the drop cap is an image

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

The above image actually shows why I need a negative indent in poetry. The lines in the song are:

THESE...
(Chil!...)
Now...
(Chil!...)
Word...
Word...
Here's...
They...
(Chil!...)
They...
(Chil!...)
...

Some of them are indented (the "Chil!" ones). But a few lines are too long for the page (especially where the drop cap appears), and are broken in two, with the second part indented too. These linebreaks are "soft" ones, you don't want to include them in the ebook, they should only be generated as needed by the reader (just like normal paragraphs are broken into lines). The only way I know of getting this kind of display is with a negative text-indent (and a matching positive margin or padding), but it is this negative indent that causes the problems, especially since ADE is apparently behaving differently from other renderers.

If there is no poetry, I don't need the negative text-indent, or any indent at all, and there's no problem. If there is no float (drop cap or illustration), the negative text-indent works perfectly as intended.

EDIT: Pablo's explanation is much better than mine, but here you have your image

[DaleDe]

Originally Posted by roger64

Hi

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

negative indents are also called outdents. The idea is to indent all but the first line. Very much like you might see with a numbered list where the numbers are left of the text.

This technique is often used in poetry since most of the time the first line is sufficient but occasionally on narrow screen lines may be too long and have to flow on a second line but need to be identified as such and not mistaken for a new poetry line.

Dale

[roger64]

Thanks all for all your explanations (and for the screenshot too!). I really learnt something.

I can't help but verses that long make me think of the Giant Gippsland earthworm but they do indeed represent a specific problem to tackle with the Giant Dropcap...

I'll have a try (don't laugh please).

[DaleDe]

Try reading any well done version of Alice in Wonderland. There is a tale to be had there.

Dale

[GrannyGrump]

@Jellby -- I wonder if you might be able to work something out using a two-column table (I know... tables... ewwww!) to create a fake "adjacent" cap. I'm just spitballing here, and it might not be possible, but theoretically it could work. The table cells could keep the cap quarantined from the text. Of course, it would probably break in lots of devices.

I've seen adjacent caps discussed in a few blogs about InDesign, but not often for CSS. This link http://webdesign.about.com/od/exampl...p_examples.htm has some CSS samples. If I get some time, I'll do some fiddling too.

[Jellby]

Originally Posted by GrannyGrump

@Jellby -- I wonder if you might be able to work something out using a two-column table (I know... tables... ewwww!) to create a fake "adjacent" cap.

Hmm... might be an option. But what if the poem is more than one page long? Tables and pagebreaks don't get along that well. And forcing the whole poem to be indented just because the first 2-3 lines have a drop cap... I don't think small screens would like that

[Arios]

jellby I was wrong!

Or put in a more elegant way, you were right (it does not work). My codes, and I've played with them, don't give what you were expecting.

By the way if you or Rubén had not find the solution, the challenge is great for everyone else!

But I am convinced that Hitch will find the right solution (the good codes).

@ Pablo
Siempre es un placer de leerte. Yo no te he olvidado, pero tuve problemas con mi archivo y la traducción fue bloqueada en muchos reinicios. ¡Yo no pierdo la esperanza, aunque!

[Hitch]

Originally Posted by Arios

jellby I was wrong!

Or put in a more elegant way, you were right (it does not work). My codes, and I've played with them, don't give what you were expecting.

By the way if you or Rubén had not find the solution, the challenge is great for everyone else!

But I am convinced that Hitch will find the right solution (the good codes).

good God, don't hold your breath on that one. I love me some jellby, but I really can't see any sane reason to put drops and negative indents, which have fugly problems on Kindle, too, (just as icing on the cake) on poetry. Between the margins and padding needed for Drops, and the padding needed for negative indents...man, it makes my head swim.

However, if I get through my massive video-making tasks for our annual "downtime," I'll see if I can stare at this for a while. No promises! But I'll take a gander at it. (This is a colloquialism, meaning, take a look. Este é um coloquialismo, ou seja, dar uma olhada. I think that's right. I hope I said what I meant, and didn't confuse you.)

Hitch

[Jellby]

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):

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:

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.

[doubleshuffle]

Great work! Thanks a lot. Will test that.

[Arios]

Originally Posted by Hitch
...don't hold your breath on that one

Thanks Hitch, 'cause I was getting bleue, and with all the cold here in Canada...

Originally Posted by Hitch
...but I really can't see any sane reason to put drops and negative indents

I am not far from thinking the same thing, but the images provided by jellby are so beautiful and baroque!

Thank you also for "possible" info to come.

PS I'm more on the French side of things than on the Spanish one, but as I am in the process of learning this language, I sometimes use it everywhere or in the wrong place. My message to Pablo should have been a PM: sorry about that.

jellby thanks for the code. I am not sure to use it one day, but it's nice to know how to do it.

[Hitch]

Originally Posted by Arios

Thanks Hitch, 'cause I was getting bleue, and with all the cold here in Canada...

Ah! We have an office in Toronto, so, yes, I know!

I am not far from thinking the same thing, but the images provided by jellby are so beautiful and baroque!

Thank you also for "possible" info to come.

PS I'm more on the French side of things than on the Spanish one, but as I am in the process of learning this language, I sometimes use it everywhere or in the wrong place. My message to Pablo should have been a PM: sorry about that.

Ooops! Je suis désolée. However, you just ran into the end of my French. I can do a few other languages, but that one has eluded me all these years. Anything I know is likely something I picked up from Agatha Christie and Hercule Poirot.

jellby thanks for the code. I am not sure to use it one day, but it's nice to know how to do it.

Agreed. God only knows what I'd do with it, (or if I could ever make it even semi-work in mobi), but it's nice to have. ;-)

Hitch