Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 08-30-2011, 11:32 AM   #1
LostSock
Enthusiast
LostSock began at the beginning.
 
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!
LostSock is offline   Reply With Quote
Old 08-30-2011, 12:03 PM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
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>
with:

Code:
span.cap {
  font-size: 2.5em;
}
Jellby is offline   Reply With Quote
 
Advertisement
Old 08-30-2011, 12:13 PM   #3
LostSock
Enthusiast
LostSock began at the beginning.
 
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!
LostSock is offline   Reply With Quote
Old 08-30-2011, 09:18 PM   #4
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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.
charleski is offline   Reply With Quote
Old 08-30-2011, 09:26 PM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,536
Karma: 19637653
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Jellby View Post
It's easier:

Code:
<p><span class="cap">O</span>nce upon a time...</p>
with:

Code:
span.cap {
  font-size: 2.5em;
}
Code:
span.cap {
  font-size: 2.5em;
  line-height: 0
}
By adding in a line-height of 0 to the span.cap CSS entry, you'll prevent the first line of that paragraph from being moved away from the paragraph. It's a common error with a lot of publisher ePub. It works on ADE. It does not work in iBooks.
JSWolf is offline   Reply With Quote
Old 08-31-2011, 04:28 AM   #6
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,183
Karma: 7180223
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
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.
Toxaris is offline   Reply With Quote
Old 08-31-2011, 04:52 AM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
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:
Originally Posted by charleski
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.
That's often unnecessary. First, you cannot be sure of the line-height that the rest of the paragraph uses, unless you set it. But setting it is like setting margins, or font size, it should be something that the user can change. Second, you just need to use a value that's not larger than the "normal" line-height, as that will cause the latter to be used, so using "0" (or "0.01" if you want) should do it.
Jellby is offline   Reply With Quote
Old 08-31-2011, 06:49 AM   #8
charleski
Wizard
charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.charleski ought to be getting tired of karma fortunes by now.
 
Posts: 1,188
Karma: 727236
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.
Attached Files
File Type: epub LHComputed.epub (2.4 KB, 57 views)
File Type: epub LH0.epub (2.3 KB, 61 views)
File Type: epub LH048.epub (2.3 KB, 54 views)

Last edited by charleski; 08-31-2011 at 06:54 AM.
charleski is offline   Reply With Quote
Old 08-31-2011, 07:26 AM   #9
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by charleski View Post
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.
In that case I would prefer adding margins to either the horizontal rule or the paragraph, but to each his own.

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.
Jellby is offline   Reply With Quote
Old 09-01-2011, 01:31 PM   #10
LostSock
Enthusiast
LostSock began at the beginning.
 
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!
LostSock is offline   Reply With Quote
Old 09-13-2011, 12:55 AM   #11
LaoTseu
Member
LaoTseu began at the beginning.
 
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>
Or, if you have a chapter name before the paragraph that needs an Initial


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>
I'm new to making ePub so I'm trying to figure out what not to use (even if it's allowed by the spec).
LaoTseu is offline   Reply With Quote
Old 09-13-2011, 04:31 AM   #12
Toxaris
Wizard
Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.Toxaris ought to be getting tired of karma fortunes by now.
 
Toxaris's Avatar
 
Posts: 3,183
Karma: 7180223
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-300, PRS-T1
I doubt that :first-letter is supported in the various reader apps. I even doubt it is in the specs.
Toxaris is offline   Reply With Quote
Old 09-13-2011, 05:20 AM   #13
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,316
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by LaoTseu View Post
Any reason not to use :first-letter in an ePub?
Quote:
Originally Posted by Toxaris View Post
I doubt that :first-letter is supported in the various reader apps. I even doubt it is in the specs.
It is in the spec: "Reading Systems must support all CSS2 selectors, including pseudo-elements and pseudo-classes." But of course, it doesn't mean it is supported.

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.
Jellby is offline   Reply With Quote
Old 09-13-2011, 08:07 AM   #14
LaoTseu
Member
LaoTseu began at the beginning.
 
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.
LaoTseu is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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 01:46 AM
small caps yuxi_kelly ePub 20 06-05-2011 01:04 AM
newbiq Q about Drop Caps and Calibre NASCARaddicted Calibre 2 01-14-2010 08:03 PM
Unutterably Silly ANGRY CAPS Not_A_Crook Lounge 56 12-10-2009 02:16 AM
css drop caps coming out of calibre brewt Calibre 3 01-18-2009 05:00 PM


All times are GMT -4. The time now is 09:16 AM.


MobileRead.com is a privately owned, operated and funded community.