08-30-2011, 10:32 AM | #1 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Jun 2011
Device: none
|
The opposite of drop caps
Forgive me, as I'm having an idiot moment and have been trying to figure this out for an hour. And I know it's likely something very simple.
How do I do the opposite of drop caps? I have the first letter of each chapter that is to be 2.5em, while the rest of the paragraph stays its normal 1em. For the life of me I can't get it to work. I've read through the forums and tried to modify the drop cap codes posted here, but no luck. I would really appreciate any help, and thank you very very much in advanced! |
08-30-2011, 11:03 AM | #2 |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
It's easier:
Code:
<p><span class="cap">O</span>nce upon a time...</p> Code:
span.cap { font-size: 2.5em; } |
Advert | |
|
08-30-2011, 11:13 AM | #3 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Jun 2011
Device: none
|
Good lord I need to learn to stop trying to over-complicate things.
Thank you so much! |
08-30-2011, 08:18 PM | #4 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
You also need to adjust the line-height unless you want the first line to have extra space under it. The default is for everything to have a line-height of 1.2 (without any unit, which is important here). You need to change that to 1.2em in the body or p tags so that every line has a line-height that's calculated off the base font-size, rather than allowing each line to calculate its line-height independently.
Alternatively, you can set the line-height in your span to be equal to (line-height of body text)/(font-size in span). So if your first capital is 2.5 em and the body uses a line-height of 1.2, the span needs a line-height of 0.48. |
08-30-2011, 08:26 PM | #5 | |
Resident Curmudgeon
Posts: 73,866
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Code:
span.cap { font-size: 2.5em; line-height: 0 } |
|
Advert | |
|
08-31-2011, 03:28 AM | #6 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
But is that because line-height of 0 is not following specs or is it ignored by iBooks? If it is the first, it is not a common error of course.
|
08-31-2011, 03:52 AM | #7 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Yes, adding "line-height: 0" would be better (I'd bet it's spec-compliant), I would have noticed if I had opened a real book
Quote:
|
|
08-31-2011, 05:49 AM | #8 |
Wizard
Posts: 1,196
Karma: 1281258
Join Date: Sep 2009
Device: PRS-505
|
Using a line-height of 0 is often safe, but there are occasions where you can run into trouble. Look at the attached ePubs in ADE for an example.
Unfortunately CSS2 isn't flexible enough to allow changes to both font size and leading while retaining the integrity of the design. Of course that hasn't stopped some UserAgents from offering the ability to stomp all over it. [Edit] Oh, and I was wrong earlier, it's best not to stick line-height: 1.2em in your body tag unless you want to adjust line-heights on all your headings as well. Do it in the p tag or create a div selector with it which will be used to enclose the body text. Last edited by charleski; 08-31-2011 at 05:54 AM. |
08-31-2011, 06:26 AM | #9 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
It would be nice if it were possible to assign a height to a <span>, but it is not. Or if inline-block were supported in the current spec, but it is not. Maybe an invisible, image can be used to force a height on the <span> without affecting the text leading... but that's too hackish. |
|
09-01-2011, 12:31 PM | #10 |
Enthusiast
Posts: 27
Karma: 10
Join Date: Jun 2011
Device: none
|
I think I'll go with the line-height 0 for now, until a better solution comes along. Thank you!
|
09-12-2011, 11:55 PM | #11 |
Member
Posts: 20
Karma: 12
Join Date: Sep 2011
Device: Kindke
|
Any reason not to use :first-letter in an ePub?
Code:
p.initial:first-letter { font-size: 2.5em; line-height: 0 } Code:
<p class="initial">Once upon a time...</p> Code:
h1+p:first-letter { font-size: 2.5em; line-height: 0 } Code:
<h1>Chapter One</h1> <p>This line has an initial.</p> <p>This line doesn't have an initial</p> |
09-13-2011, 03:31 AM | #12 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I doubt that :first-letter is supported in the various reader apps. I even doubt it is in the specs.
|
09-13-2011, 04:20 AM | #13 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
What I found is that, even if it is supported, you'll sometimes want to do something different that what :first-letter does, like including or excluding punctuation before or after the first letter. |
|
09-13-2011, 07:07 AM | #14 |
Member
Posts: 20
Karma: 12
Join Date: Sep 2011
Device: Kindke
|
Thanks for the answer Jellby. I hadn't thought about doing something special for punctuation.
Is there a list of things that are not supported by ePub readers somewhere? Something like www.w3schools.com's browser support. |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Css Drop Caps does not work in an Epub on a Reader | brewt | ePub | 63 | 09-07-2012 12:46 AM |
small caps | yuxi_kelly | ePub | 20 | 06-05-2011 12:04 AM |
newbiq Q about Drop Caps and Calibre | NASCARaddicted | Calibre | 2 | 01-14-2010 07:03 PM |
Unutterably Silly ANGRY CAPS | Not_A_Crook | Lounge | 56 | 12-10-2009 01:16 AM |
css drop caps coming out of calibre | brewt | Calibre | 3 | 01-18-2009 04:00 PM |