View Full Version : Making some % of first line different in new chapters?


jackwoe
05-24-2013, 09:51 PM
Hi all,

In some books, the first line in every chapter is formatted differently. Is this possible in epub? I know there is some (at least semi) standard CSS element for this, :first-line, but I was unable to find any references to it being used in epub.

Some books have the first three words different (and I suppose that's easy enough to format) while others have roughly half the line in italics. Is that possible at all automatically?

If you want to look at a real book with this kind of formatting, you can look at The Ruby Knight by David Eddings. There each chapter starts with a drop cap and the first three (four if short) words in small caps. There's also ornamentation.

Turtle91
05-24-2013, 10:54 PM
Since the number of words per line changes based on screen size, font size, margin size etc. the best way I have found is to just use the pseudo-element :first-line. That works really well on devices that support it... ;). The ePub spec says: first-line and :first-letter are required to be supported but that doesn't mean they all do...

If you are making the book for public consumption you should stick with wrapping a span around the first few words for an italic or small caps effect...or easier still just highlight the first few words and click the all caps button to manually change them to caps.

Jellby
05-25-2013, 05:01 AM
I would either use :first-line and not care about readers that don't support it (it's not a big deal, anyway), or apply the styling to some meaningful set of words, like just the first word (or two if the first is one letter), or the first "unit", such as "Mr. Smith", "The next day" or "Unfortunately".

jackwoe
05-25-2013, 07:04 AM
Thank you.

At the moment I'm just curious about these things. One other point for consideration for CSS magicians:

In Assassin's Apprentice by Robin Hobb the first four words are small caps and in one place there's only one other word on the line; where the first four are long.

I suppose there's no CSS magic to say "if this word is on the first line, make it different?" So that when someone zooms in and there less than four words on the line, only the ones on the first are different?

I suppose that magic would somehow rely on :first-line being supported.

Turtle91
05-25-2013, 08:17 AM
Yes, that is exactly what first-line does. As Jellby mentioned, it is perfectly OK to use :first-line and :first-letter in your coding. If the device/app doesn't support it they should degrade gracefully - they should display just like a normal line/letter - the user won't even know they are supposed to be there.

Toxaris
05-25-2013, 08:24 AM
To my knowledge all ADE based readers will ignore it. I haven't heard if the kobo supports it, but I doubt it.

DaleDe
05-25-2013, 11:22 AM
Another choice is to reference the first paragraph after a chapter header which is also a supported feature and likely to work on more readers.

Dale

RbnJrg
05-25-2013, 01:07 PM
Please, read this thread:

http://www.mobileread.com/forums/showthread.php?t=212300

http://www.mobileread.com/forums/showpost.php?p=2503771&postcount=7

It's about mobi files but also is valid for epub files (in fact, you'll find there several epubs converted into mobis).

jackwoe
05-25-2013, 04:14 PM
Thanks. Indeed, :first-line works in the firefox app, but not on my PocketBook. Does that mean it's an ADE?

I tried to use it for the first four words with a <span> but that failed.

The paragraph:

<p><span class="first">&ETH;e night after her</span> nin&thorn;
bir&thorn;day, wearing a white nightgown, she tiptoed into her
parents' bedroom. Her bare feet moved noiselessly over &eth;e
floor. In her right hand she clutched a plush c&thorn;ulhu
doll.</p>

And CSS:

span.first:first-line {
font-style: italic;
}


If there is a way to make this work, I'm all ears. But, this is just a technical curiosity for the moment. For actual publication, I'm probably better off with an explicit format, using <span> or something else.

DaleDe
05-25-2013, 05:25 PM
I do not think you need the first-line in this case. The span is enough. You could just say .first or p.first and then set the content.

.first {font-style: italic}

or

p.first {font-style: italic; }

Let's suppose you want the first line after a header to not indent you would set the standard p as:

p {text-indent: 2em}

but if you have:

h1 + p {text-indent: 0}

Then the first line after an h1 would not indent. This is equivalent to a first-line choice.

Dale

jackwoe
05-25-2013, 06:53 PM
Thank you.

No, I don't need the :first-line, the exercise was to determine if I could prevent words from being typeset differently in the case they ended up on the second line.

To be specific: the aim was to typeset the first four words or the first line in italics. That is, in the case where there are only three words on the first line, I'd want the fourth normal.

Seems I can't do that easily.

DaleDe
05-25-2013, 09:00 PM
Thank you.

No, I don't need the :first-line, the exercise was to determine if I could prevent words from being typeset differently in the case they ended up on the second line.

To be specific: the aim was to typeset the first four words or the first line in italics. That is, in the case where there are only three words on the first line, I'd want the fourth normal.

Seems I can't do that easily.

Yes, I would agree. I do not think it can be done at all. You can treat the first 4 words differently but not based on what line they might be displayed on. The CSS or text has no idea what size screen or what size fonts the user may be using. You can certainly treat the beginning differently but not based on the display.

Dale

Turtle91
05-25-2013, 10:15 PM
I agree you can't quite do what you want. The only thing you could do is set your :first-line attribute and then have a minimum number of words (in this example 4) that would be emphasized regardless of the reader's support of the pseudo selector. If the font was so large - or the screen so small - that only 3 words fit on the first line, the 4th word would still be emphasized on the second line. But that would be a pretty extreme situation to only fit 3 words on a line.

eg.
CSS
h1 + p {text-indent:0}
h1 + p:firstline {font-style:italic}
em {font-style:italic}

HTML
<h1>Heading Line</h1>
<p><em>The first four words</em> are italic on non-supportive devices. The entire first line is italic on supportive devices.</p>

-OR-

h1 + p {text-indent:0}
h1 + p:firstline {font-variant:small-caps}
.smcap {font-variant:small-caps}

<h1>Heading Line</h1>
<p><span class="smcap">The first four words</span> are smallcaps on non-supportive devices. The entire first line is smallcaps on supportive devices.</p>

Jellby
05-27-2013, 03:06 AM
<h1>Heading Line</h1>
<p><span class="smcap">The first four words</span> are smallcaps on non-supportive devices. The entire first line is smallcaps on supportive devices.</p>

At least on devices that support smallcaps ;)

Turtle91
05-27-2013, 08:38 AM
At least on devices that support smallcaps ;)

Yeah, that too!:thumbsup: lol

JSWolf
05-30-2013, 02:31 PM
I agree you can't quite do what you want. The only thing you could do is set your :first-line attribute and then have a minimum number of words (in this example 4) that would be emphasized regardless of the reader's support of the pseudo selector. If the font was so large - or the screen so small - that only 3 words fit on the first line, the 4th word would still be emphasized on the second line. But that would be a pretty extreme situation to only fit 3 words on a line.

eg.
CSS
h1 + p {text-indent:0}
h1 + p:firstline {font-style:italic}
em {font-style:italic}

HTML
<h1>Heading Line</h1>
<p><em>The first four words</em> are italic on non-supportive devices. The entire first line is italic on supportive devices.</p>

-OR-

h1 + p {text-indent:0}
h1 + p:firstline {font-variant:small-caps}
.smcap {font-variant:small-caps}

<h1>Heading Line</h1>
<p><span class="smcap">The first four words</span> are smallcaps on non-supportive devices. The entire first line is smallcaps on supportive devices.</p>

Incorrect! The first four words are not smallcaps as ADE does not support smallcaps as a font variant. So it won't work. All you'll is the first paragraph with ALL the words in the same format.

Turtle91
05-30-2013, 02:57 PM
Incorrect! The first four words are not smallcaps as ADE does not support smallcaps as a font variant. So it won't work. All you'll is the first paragraph with ALL the words in the same format.

It actually is correct, and works fine on devices that support small caps. (reference Jellby's and my comment a few days ago) ...the "non-supportive" means non-supportive of the :first-line pseudo element - not small caps.

The question wasn't really about small caps support or ADE for that matter. It was how to get the :first-line pseudo element to work with the right number of words. The small caps and italics was just an example of how to change the formatting...of course it depends on if the device fully supports the spec or not. ADE, from what I've experienced, doesn't.

DiapDealer
05-30-2013, 03:15 PM
ADE IS the spec, silly turtle!
Sorry, got carried away a bit there playing wolf's-advocate. ;)