08-01-2012, 05:24 PM | #1 |
Enthusiast
Posts: 47
Karma: 415790
Join Date: Feb 2012
Device: android phone, Kobo Aura, Sony PRS 350
|
Span causing failure to re-flow...
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. Last edited by Kaylee Skylyn; 08-01-2012 at 11:56 PM. Reason: issue different than first thought |
08-01-2012, 11:54 PM | #2 |
Enthusiast
Posts: 47
Karma: 415790
Join Date: Feb 2012
Device: android phone, Kobo Aura, Sony PRS 350
|
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> 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’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’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. Last edited by Kaylee Skylyn; 08-01-2012 at 11:58 PM. Reason: punctuation |
Advert | |
|
08-02-2012, 03:06 AM | #3 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
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.
|
08-02-2012, 04:53 AM | #4 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
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. Last edited by Jellby; 08-02-2012 at 05:00 AM. |
|
08-02-2012, 05:11 PM | #5 |
Wizard
Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
I stand corrected. I was under the assumption that pseudo classes and first-line and first-character were not in the specifications.
|
Advert | |
|
08-02-2012, 06:10 PM | #6 |
Enthusiast
Posts: 47
Karma: 415790
Join Date: Feb 2012
Device: android phone, Kobo Aura, Sony PRS 350
|
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. |
08-02-2012, 09:55 PM | #7 | |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
08-02-2012, 10:07 PM | #8 |
Resident Curmudgeon
Posts: 73,897
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
a pre will cause text to flow past the margin instead of wrap. So in
Code:
span.firstline {margin-left: -1em; white-space: pre; } Code:
.firstline { margin-left: -1em } |
08-03-2012, 03:58 AM | #9 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
But, with your code, the uppercase text is never more than the first line since, as JSWolf says: Remove the "white-space: pre" (and the   and it should be fine, barring bugs in a reader. |
|
08-03-2012, 05:42 PM | #10 |
Enthusiast
Posts: 47
Karma: 415790
Join Date: Feb 2012
Device: android phone, Kobo Aura, Sony PRS 350
|
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... |
08-03-2012, 05:52 PM | #11 |
Resident Curmudgeon
Posts: 73,897
Karma: 128597114
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Actually, I believe that simulated smallcaps should be 75% or .75em.
|
08-04-2012, 03:17 AM | #12 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
|
|
08-04-2012, 07:56 PM | #13 | |
Bookmaker & Cat Slave
Posts: 11,460
Karma: 158448243
Join Date: Apr 2010
Location: Phoenix, AZ
Device: K2, iPad, KFire, PPW, Voyage, NookColor. 2 Droid, Oasis, Boox Note2
|
Quote:
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 |
|
08-05-2012, 04:19 AM | #14 | |
frumious Bandersnatch
Posts: 7,515
Karma: 18512745
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Maybe I should add :first-letter and :first-line to the ePub reader test... |
|
08-05-2012, 04:25 AM | #15 |
Berti
Posts: 1,196
Karma: 4985964
Join Date: Jan 2012
Location: Zischebattem
Device: Acer Lumiread
|
|
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Sigil + embedded font variants | troymc | Sigil | 6 | 10-17-2012 11:00 AM |
Can't delete embedded font | eosrose | Sigil | 1 | 08-16-2010 06:28 AM |
problem with embedded font | ericshliao | EPUBReader | 2 | 12-11-2009 10:04 AM |
Common font and/or embedded fonts... | Dahak | LRF | 6 | 06-28-2009 01:32 PM |
LRF with embedded font | igorsk | Sony Reader | 8 | 10-26-2006 08:08 AM |