Making some % of first line different in new chapters?

[jackwoe]

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]

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]

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]

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]

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]

To my knowledge all ADE based readers will ignore it. I haven't heard if the kobo supports it, but I doubt it.

[DaleDe]

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]

Please, read this thread:

https://www.mobileread.com/forums/sho...d.php?t=212300

https://www.mobileread.com/forums/sho...71&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]

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]

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]

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]

Originally Posted by jackwoe

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]

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]

Originally Posted by Turtle91

<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]

Originally Posted by Jellby

At least on devices that support smallcaps

Yeah, that too! lol