embedded font - now line with embedded font not re-flowing

[Kaylee Skylyn]

See next post. Still having problems when font removed.

So I finally got my embedded font to work ok. (validator found no errors in ePUB, yay! Almost took a screenshot of that....) but after all that I found that the lines using the font are continuing off the page and are not wordwraping...so not reflowing. I was sure I saw this issue mentioned while researching the embedding of fonts (and ignored at the time because I just wanted the fonts to embed in the first place) but now can't find said reference. Not using the right search words maybe....

Anyone know why this would happen and how to fix? (please tell me it can be fixed!)

I'm using Fontin SmallCaps in a span...first line of the chapter.

[Kaylee Skylyn]

Update: Seems that it likely is unrelated to the embedded font.

Looks like it has to do with the span.

I have an image drop cap and want the first line to be snug to the image so have a span to do that... I removed the font, changed the first line to capital letters but left the span to snug the letter and the line still not word wrapping...

span causing the issue (after fonts removed);
CSS:
span.lettrine {float: left; margin: 0 0.5em -0.1em 0.25em; }

span.firstline {margin-left: -1em; white-space: pre; }

img.h {height: 12em; max-height: 325px;}

HTML:
<p>
<span class="lettrine"><img class="h" alt="Drop cap H" src="images/KnotH.jpg" /></span>
<span class="firstline">ARLEY FOUND THE LIZARD.</span> &nbsp;Only Harley could have, because he was the only one big enough and curious (or stupid) enough to push through the brambles guarding the ravine behind their new place. They&rsquo;d moved to Kansas in January, halfway through the school year, and it sucked. It was spring break and all his friends were back in Texas, so Jared had nothing to do for fun but walk his dogs along the wooded ravine and hope that the <em>Texas Chainsaw Massacre</em> hadn&rsquo;t actually taken place in Kansas.</p>

In this case (first chapter) its short enough that it wasn't noticeable but in later chapters the span covers a whole line and half of it is not readable.

[Toxaris]

The problem is that you have no way to determine what is the first line. It depends on the font size, page layout, etc. There are CSS attributes for firstline but those are ignored by most readers and they are not in the format specifications of the ePUB format.

[Jellby]

Originally Posted by Toxaris

There are CSS attributes for firstline but those are ignored by most readers and they are not in the format specifications of the ePUB format.

The spec says:

Reading Systems must support all CSS2 selectors, including pseudo-elements and pseudo-classes

and this includes :first-letter and :first-line, so they are in the ePub spec, which doesn't mean they are supported by popular readers

What is not supported is the text-transform property that one would like to use in this case. What I'd do is choose one of:

1) Use :first-line and text-transform regardless of their support status. It's not grave if they don't work now, it's a purely aesthetic formatting that doesn't add anything significant. In some future they'll work, or they'll be easily converted to something that works.

2) Hardcode as uppercase letters (or as smallcaps) only the first word (or the first two words, if the first one is one-letter). This doesn't change when the font size or text width are changed, and doesn't look wrong.

[Toxaris]

I stand corrected. I was under the assumption that pseudo classes and first-line and first-character were not in the specifications.

[Kaylee Skylyn]

Thanks guys.

I wasn't intending to use the pseudo-class 'first-line' (because that could only be used on the 'p' not the span correct?) that was just the identifier I used to identify the span. So bad choice there I suppose. I just wanted the span to identify a set of words that would have the smallcaps applied to them. Not necessarily to be the first line only (in some cases it was more sometimes less than the first line even in the original format.)

I did consider just using the smallcaps on the first word only but didn't like the look. I may have to do that though if I want to use the font...

For now I put them in all capital letters just so the text would reflow.

Meh.
Meh, I say.

[Hitch]

Originally Posted by Jellby

The spec says:

Reading Systems must support all CSS2 selectors, including pseudo-elements and pseudo-classes

and this includes :first-letter and :first-line, so they are in the ePub spec, which doesn't mean they are supported by popular readers

What is not supported is the text-transform property that one would like to use in this case. What I'd do is choose one of:

1) Use :first-line and text-transform regardless of their support status. It's not grave if they don't work now, it's a purely aesthetic formatting that doesn't add anything significant. In some future they'll work, or they'll be easily converted to something that works.

2) Hardcode as uppercase letters (or as smallcaps) only the first word (or the first two words, if the first one is one-letter). This doesn't change when the font size or text width are changed, and doesn't look wrong.

If I can kibbitz a bit:

First, I have found that :first-letter and :first-line are largely unsupported; although I can get it to work some of the time, I can't get it to work consistently enough to be usable for a commercial book. Jellby, I think you and I just traded some discussion about this somewhere else, but I don't remember where, AND, more importantly:

@kaylee:

If you try to use a dropcap with a span of smallcaps, it won't work at ALL, on the Nook. I do see that your dropcap isn't actual text, but an image, but I don't believe that will change anything; we tried this about a year ago for a client, and went through more revisions than I can express, but with Nook's specs, it simply won't work. If you don't set hyphenation off, it will do very bizarre things like place the text of the second span vertically on a page; if you do turn hyphenation off, the text will--as happened with you--run the text inside the span off the right-margin. For whatever reason, it just doesn't bloody work. Or, at least, it wasn't workable a year ago, and I doubt that Nook has upgraded anything that would change that in the last 9-12 months. We must have tried 18 different versions of that, but nothing worked. It's not the first-line or first-letter thing; it's the two spans.

Of course, if anyone can get it to work on a Nook, it might be Jellby, but nothing we tried worked, our client had to settle for simple caps that we entered manually, no spans, no text-transform, no smallcaps.

HTH,
Hitch

[JSWolf]

a pre will cause text to flow past the margin instead of wrap. So in

span.firstline {margin-left: -1em; white-space: pre; }

The pre has to go.

.firstline {
margin-left: -1em
}

[Jellby]

Originally Posted by Kaylee Skylyn

I just wanted the span to identify a set of words that would have the smallcaps applied to them. Not necessarily to be the first line only (in some cases it was more sometimes less than the first line even in the original format.)

That's fine then (but possibly ugly). If you want smallcaps, you should add "font-size: 85%" or so to the span's style (or use "font-variant: smallcaps" and write lowercase letters, but this won't work in most devices).

But, with your code, the uppercase text is never more than the first line since, as JSWolf says:

Originally Posted by JSWolf

a pre will cause text to flow past the margin instead of wrap.

Remove the "white-space: pre" (and the &nbsp and it should be fine, barring bugs in a reader.

[Kaylee Skylyn]

Ah! Thanks! I didn't realise the pre would do that. I will try removing it.

And ya, I understood that "font-variant: smallcaps" was not supported by most readers so was avoiding using it.

Thanks for all the comments everyone.
I'll play around with it some more. Once I remove the 'pre' I may post here for those with a Nook to try. Hopefully the image dropcap would at least show up as an image...

[JSWolf]

Originally Posted by Jellby

That's fine then (but possibly ugly). If you want smallcaps, you should add "font-size: 85%" or so to the span's style (or use "font-variant: smallcaps" and write lowercase letters, but this won't work in most devices).

Actually, I believe that simulated smallcaps should be 75% or .75em.

[Jellby]

Originally Posted by JSWolf

Actually, I believe that simulated smallcaps should be 75% or .75em.

That depends on the font, even the kpfonts LaTeX package offers two different sizes of true smallcaps.

[Hitch]

Originally Posted by Jellby

That depends on the font, even the kpfonts LaTeX package offers two different sizes of true smallcaps.

Jellby:

Sorry, I can't seem to find that thread, if I'm remembering it correctly--did you tell me that you got the pseudo-elements of first-line and first-letter to work in ADE/Nook, is that right? Without explicit marking via spans, etc.?

Hitch

[Jellby]

Originally Posted by Hitch

did you tell me that you got the pseudo-elements of first-line and first-letter to work in ADE/Nook, is that right?

No, I didn't... I don't have a Nook, and I (almost) never try ADE on the PC. I believe I tried first-letter some time and it didn't work on my reader (probably my previous Gen3). But maybe it worked, and I decided not to use it anyway (because I want more control on the format of punctuation preceding the first letter).

Maybe I should add :first-letter and :first-line to the ePub reader test...

[mmat1]

Originally Posted by Kaylee Skylyn

For now I put them in all capital letters just so the text would reflow.

Whats about this "white-space: pre;" ? If i understood correctly then this could cause problems with the reflow.