Quote:
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"><sup>B</sup></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.