The opposite of drop caps

[LostSock]

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!

[Jellby]

It's easier:

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

with:

span.cap {
  font-size: 2.5em;
}

[LostSock]

Good lord I need to learn to stop trying to over-complicate things.

Thank you so much!

[charleski]

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.

[JSWolf]

Originally Posted by Jellby

It's easier:

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

with:

span.cap {
  font-size: 2.5em;
}

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.

[Toxaris]

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.

[Jellby]

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

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.

[charleski]

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.

[Jellby]

Originally Posted by charleski

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.

[LostSock]

I think I'll go with the line-height 0 for now, until a better solution comes along. Thank you!

[LaoTseu]

Any reason not to use :first-letter in an ePub?

p.initial:first-letter
{ 
  font-size: 2.5em;
  line-height: 0
}

<p class="initial">Once upon a time...</p>

Or, if you have a chapter name before the paragraph that needs an Initial

h1+p:first-letter
{ 
  font-size: 2.5em;
  line-height: 0
}

<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).

[Toxaris]

I doubt that :first-letter is supported in the various reader apps. I even doubt it is in the specs.

[Jellby]

Originally Posted by LaoTseu

Any reason not to use :first-letter in an ePub?

Originally Posted by Toxaris

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.

[LaoTseu]

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.