12-19-2013, 03:05 PM | #1 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Drop caps and poetry... in ADE
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: Code:
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> Code:
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> Now the problem comes when I want to combine both codes and have drop caps in poetry: Code:
<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>
Code:
div.line span.drop, div.line span.smalldrop { margin-right: 1em; } 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? |
12-19-2013, 07:21 PM | #2 | |
Wizard
Posts: 1,588
Karma: 7836413
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
|
Quote:
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: Code:
margin: 1em 0 1em 2em; Code:
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 */ } |
|
Advert | |
|
12-20-2013, 04:19 AM | #3 | |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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. |
|
12-20-2013, 11:32 AM | #4 |
Groupie
Posts: 171
Karma: 86271
Join Date: Feb 2012
Device: iPad, Kindle Touch, Sony PRS-T1
|
changing your negative text-indent to negative margin seems to yield the desired results:
Code:
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; } Last edited by mzmm; 12-20-2013 at 11:36 AM. |
12-20-2013, 01:16 PM | #5 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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.
|
Advert | |
|
12-20-2013, 08:39 PM | #6 | |||
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
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 Quote:
Quote:
In code view it may look like this: Quote:
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> Last edited by roger64; 12-20-2013 at 11:02 PM. |
|||
12-21-2013, 03:48 AM | #7 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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. |
12-21-2013, 04:16 AM | #8 |
Unicycle Daredevil
Posts: 13,938
Karma: 185392166
Join Date: Jan 2011
Location: Planet of the Pudding Brains
Device: Aura HD (R.I.P. After six years the USB socket died.) tolino shine 3
|
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...)
|
12-21-2013, 04:23 AM | #9 | |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
12-22-2013, 02:14 PM | #10 |
Writer
Posts: 101
Karma: 590630
Join Date: Mar 2011
Location: Munich, Germany
Device: none
|
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 |
12-23-2013, 05:29 AM | #11 |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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.
|
12-23-2013, 10:42 AM | #12 |
A curiosus lector!
Posts: 463
Karma: 2015140
Join Date: Jun 2012
Device: Sony PRS-T1, Kobo Touch
|
jellby did you try with a p element?
Code:
div.poetry div.line p {
margin: 0;
padding-left: 3em;
text-indent: -3em;
}
|
12-24-2013, 04:33 PM | #13 | |
Bookmaker & Cat Slave
Posts: 11,482
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
12-26-2013, 05:35 AM | #14 | |
frumious Bandersnatch
Posts: 7,533
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Thanks, sometimes it's nice to know someone understands |
|
12-26-2013, 09:13 AM | #15 |
Wizard
Posts: 2,608
Karma: 3000161
Join Date: Jan 2009
Device: Kindle PW3 (wifi)
|
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. Last edited by roger64; 12-26-2013 at 09:32 AM. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Is there a way to strip drop caps? | ficbot | Calibre | 2 | 08-30-2013 11:06 AM |
drop caps in paperwhite? | morrow | Kindle Formats | 7 | 12-11-2012 12:10 PM |
Drop caps | huebi | ePub | 8 | 03-04-2012 06:25 AM |
The opposite of drop caps | LostSock | ePub | 13 | 09-13-2011 07:07 AM |
newbiq Q about Drop Caps and Calibre | NASCARaddicted | Calibre | 2 | 01-14-2010 07:03 PM |