Drop caps and poetry

[AlexBell]

I've never done drop caps before, and though there are lots of posts in the forum about I find them quite confusing. So I'd appreciate some advice, preferably in simple one syllable language.

I'd doing a horribly complicated poetry ebook for a small UK publisher. One of the poems has two verses, each with quite short lines. Each of the verses starts with a big drop cap which is the same height as three lines. So far as I know so far each of the three lines next to the initial drop cap must have the same words in the ebook as in the print book. That is, the text can't simply flow around the drop cap.

Any ideas where to start, or where to look for information and examples?

[Jellby]

Originally Posted by AlexBell

I'd doing a horribly complicated poetry ebook

What was your crime?

One of the poems has two verses, each with quite short lines. Each of the verses starts with a big drop cap which is the same height as three lines. So far as I know so far each of the three lines next to the initial drop cap must have the same words in the ebook as in the print book. That is, the text can't simply flow around the drop cap.

I assume with "verses" you mean groups of lines (what I'd call "stanza") and not a line (what I'd call "verse"). Can you show an example, or a mock-up?

If you want to force the layout in a fixed-format-like manner, I'd simply use "white-space: nowrap".

[AlexBell]

Originally Posted by Jellby

What was your crime?

I assume with "verses" you mean groups of lines (what I'd call "stanza") and not a line (what I'd call "verse"). Can you show an example, or a mock-up?

If you want to force the layout in a fixed-format-like manner, I'd simply use "white-space: nowrap".

Thanks, Jellby
The main crime was not knowing how to say (or scream) No!

For me 'stanza' and 'verse' are synonyms, but I'm poetry blind anyway.

I attached a screen shot which shows the first few lines of one of the stanzas.

[Notjohn]

I have stayed away from drop-caps in e-books ever since Amazon changed the line spacing in its Kindle devices and apps. If the spacing changed once, it can change again, and all your drop-caps will be thrown off (again).

[AlexBell]

Originally Posted by Notjohn

I have stayed away from drop-caps in e-books ever since Amazon changed the line spacing in its Kindle devices and apps. If the spacing changed once, it can change again, and all your drop-caps will be thrown off (again).

Yes, that's my next problem - I'm doing the ebook in ePub, but I will have to do a Kindle version as well.

Could you give me a look at how you did drop caps please?

[Jellby]

I have some drop-caps, including poetry, in the Kipling books (I think it's the first "Jungle Book", but you can look at all three of them). I remember I found some problems with ADE and had to add a 0.0001px border to work around them. I don't know if that would work for the Kindle, and I believe I used images, not letters... but it should work similarly.

[Notjohn]

Originally Posted by AlexBell

Yes, that's my next problem - I'm doing the ebook in ePub, but I will have to do a Kindle version as well.

Could you give me a look at how you did drop caps please?

.dropcap {
font-size: 300%;
}
@media amzn-kf8 {
span.dropcap {
float: left;
margin-top:-0.3em;
margin-bottom:-0.3em;
}
}

This worked in 2012. I think it came from the KDP staff (they used to post helpful stuff like that). I suppose it was the margin-top/bottom that caused it to go wild when Amazon increased the line spacing.

[jhowell]

I haven't used this myself, but here is the information on dropcaps from the Amazon Kindle Publishing Guidelines version 2015.3.

Elements such as drop caps should be specified using percentages or relative units (positive or negative) instead of fixed values such as points and pixels. (Example: drop caps: Use font-size: 300%). The top of the drop cap should be aligned with the body text. To create drop caps, Amazon recommends using the following sample CSS:

Example

p.para {
 font-family: "Times New Roman";
 font-size: 4em;
 margin-bottom: 0;
 margin-top: 0;
 text-align: justify;
 text-indent: 0;
}

@media amzn-kf8
{
 span.dropcaps
 {
 font-weight:normal;
 font-size:320%;
 float:left;
 margin-top:-0.3225em;
 margin-bottom:-0.3245em;
 }
}

@media amzn-mobi
{
 span.dropcaps
 {
 font-size:3em;
 font-weight: bold;
 }
}

<p class="para"><span class="dropcaps">T</span>here is a sample

To verify that the drop caps display as intended, test the book as described in section 9.1, Testing Kindle Books.

ETA: I realize that this probably won't be very helpful. There are several values that are part of this example/recommendation with no indication of how they were derived or under what circumstances they would need to be changed.

[Hitch]

Originally Posted by jhowell

I haven't used this myself, but here is the information on dropcaps from the Amazon Kindle Publishing Guidelines version 2015.3.



ETA: I realize that this probably won't be very helpful. There are several values that are part of this example/recommendation with no indication of how they were derived or under what circumstances they would need to be changed.

The problem is, they're not suited for all the KF8 readers. We use/create DCs all the time, but these are not the Droids you're looking for. (They've had these in the PG since...I think 2012?)

Unless you can control line-height perfectly, or the font that will be used, it's a major headache. If and when Amazon makes it possible to target CSS via media-queries, to specific devices, this type of problem will continue.

Offered solely FWIW.

Hitch

[AlexBell]

Thanks to you all.

I've had some limited success using markup from Elizabeth Castro's EPUB Straight to the Point with letters, not images, similar to the Kindle markup above. But I've had to make corrections to problems I don't understand. And it doesn't work when I enlarge or change fonts - and this is just on the ePub file. I'll fiddle some more, and may post the markup for comment.

[RbnJrg]

Have you read this post?:

https://www.mobileread.com/forums/sho...8&postcount=20

Maybe it can help you.

[AlexBell]

Originally Posted by RbnJrg

Have you read this post?:

https://www.mobileread.com/forums/sho...8&postcount=20

Maybe it can help you.

Thanks for your suggestion. I have now read the material, but am not at all sure what it means, nor what each part of it does. I do my ebooks in XHTML 1.1 and CSS2, which probably explains why I don't understand your material.

I hadn't come across 'position' before so I'll read up on that for starters.

Please remember that the task before me is to have a single letter as a drop quote, and to have three specific lines of poetry to the drop cap's right. Those lines cannot flow; they must appear exactly as is shown in the image attached to my first post, even when the person reading the ebook changes the font size or family.

As part of my desperate thrashing around since my last post I set the background colour of the drop cap to red, and don't understand why the red extends two lines or so _below_ the drop cap - nor what is probably more important, how to stop the background colour of the dropcap from extending below the dropcap. Can anyone help?

[GrannyGrump]

Hi Alex
(I'm slow, I will get something to you later today, I promise!)

Re: the extending red. Font glyphs usually have a built-in "white space" above and below the character (supposed to keep them from overlapping lines above and below.)
I usually use small top and bottom margins (often negative margins) on my drop caps to adjust the vertical alignment and keep the glyph itself from overlapping the line below it. But if you will be using a colored background as part of the actual design, not just as a test, you will have to add a bottom margin for sure and tweak it until the line below is blocked from overlapping. If it is just a test, and no color on the final product, I believe you can ignore that overlap of the background, as long as the glyph itself doesn't overlap the text below.

EDIT TO ADD ---If you are feeling really compulsive, you can open your drop-cap font in a font editor, and see if you can reduce the amount of the "ascender" and "descender" allowance to make a smaller "background" - but the settings are global for the font, and you have to remember not to cut off the edges of any of the glyphs.

To keep the three lines that adjoin the cap from wrapping, I think you will have to use CSS attribute white-space: nowrap. (see W3 page on white-space properties: http://www.w3schools.com/cssref/pr_text_white-space.asp) Then they won't wrap at all, but they might run off the right side of the screen, and the user would have to pan or scroll to read them in their entirety.

Have you looked at this thread? https://www.mobileread.com/forums/sho...d.php?t=229512
Check Jellby's post # 25, where he explains his solution (Jungle Books poetry with drop caps).

[AlexBell]

Originally Posted by GrannyGrump

Hi Alex
(I'm slow, I will get something to you later today, I promise!)

Re: the extending red. Font glyphs usually have a built-in "white space" above and below the character (supposed to keep them from overlapping lines above and below.)
I usually use small top and bottom margins (often negative margins) on my drop caps to adjust the vertical alignment and keep the glyph itself from overlapping the line below it. But if you will be using a colored background as part of the actual design, not just as a test, you will have to add a bottom margin for sure and tweak it until the line below is blocked from overlapping. If it is just a test, and no color on the final product, I believe you can ignore that overlap of the background, as long as the glyph itself doesn't overlap the text below.

EDIT TO ADD ---If you are feeling really compulsive, you can open your drop-cap font in a font editor, and see if you can reduce the amount of the "ascender" and "descender" allowance to make a smaller "background" - but the settings are global for the font, and you have to remember not to cut off the edges of any of the glyphs.

To keep the three lines that adjoin the cap from wrapping, I think you will have to use CSS attribute white-space: nowrap. (see W3 page on white-space properties: http://www.w3schools.com/cssref/pr_text_white-space.asp) Then they won't wrap at all, but they might run off the right side of the screen, and the user would have to pan or scroll to read them in their entirety.

Have you looked at this thread? https://www.mobileread.com/forums/sho...d.php?t=229512
Check Jellby's post # 25, where he explains his solution (Jungle Books poetry with drop caps).

Thanks for your response. I'll check out white-space also, which is something else of which I've remained blissfully ignorant. But I think I've already solved the problem of the lines adjoining the dropcap not wrapping, as shown in the attached image. It's the dropcap extending below which is bringing me undone.

The html and CSS I'm using for this part of the ebook is:
.dcap {font-size:4.75em;
float:left;
margin-top:-0.06em; padding-top:0;
margin-bottom:-0.5em; padding-bottom:0;
margin-right:0.05em;
background:red }
div.dcaptest p {text-indent:0; background:yellow;}


<div class="dcaptest">
<div style="border:1px solid black;">
<p class="flush"><span class="dcap">^B</span>ehind the walls of Augustine,<br />he notes the seven traits of plants<br />and how their combinations</p>
</div>
<p>tell us that what was shall surely be</p>
<p style="text-indent:-2.75em;">again. He writes of <i>dominance</i></p>

Part of the problem may be that the ebook has eight authors, each with five to eleven poems. I have each of the authors in their own separate file (author01.html, author02.html....) which contains firstly and image and blurb about the author, and then their poems each in their own div with an id (e.g. poem201) The poems vary a lot, so it's possible I've inadvertently done something elsewhere which is affecting this particular poem.

As you can see I have a minus margin-bottom for the dropcap. I have tried different em sizes without making much difference, but will experiment again.

Is there any better way of increasing the size of the dropcap?

If I remember rightly Jellby's 'Jungle Book' uses images for the dropcap - I'll check. I've already used that technique in The Small House at Allington by Anthony Trollope. I'm obsessed with the idea learning how to use a single enlarged character.

[Notjohn]

I checked Seamus Heaney, Robert Frost, and William Shakespeare, none of whom have drop-caps in their poetry, at least not in the books on my shelf. Couldn't you persuade your client to throw in his lot with them? They are not entirely without reputation.