05-30-2011, 09:43 AM | #1 |
Colonel Mustard
Posts: 90
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPhone 6, Kindle Paperwhite 2, iPad 2
|
What part of the CSS can cause this? (smallcaps related in Sigil)
Dear ePub experts,
I need your help again. I'm working on an ePub produced by InDesign CS5. Original document is a complex book designed for print—I had to simplify the styles a lot but after some work (thanks for the help I got here) I managed to get a decent ePub export and started to tweak it with Sigil. There are many small problems with the formatting, but the biggest problem is that the smallcaps are doing weird things that I don't understand at all. Specially in Sigil. I will show you the CSS and an example from one of the xhtml file—my question is simple: how can the text be shown as smallcaps in this situation? The xhtml file looks like this, in the <body> tag there is: Code:
<h1 class="titre-chapitre" id="toc-anchor">Chapter Title</h1> <p class="premier-para">First paragraph, which appears correctly in Sigil (no small caps).</p> <p class="para">Second paragraph (3 lines of text), which appears ALL in smallcaps except the third line.</p> <p class="dernier-para">Last paragraph of the section, 2 lines of which the first is in smallcaps and the second one is not.</p> Code:
h1.titre-chapitre { font-weight: normal; font-style: normal; font-size: 1.21em; line-height: 1.28em; text-indent: 0em; text-align: center; margin: 2em 0em 4em 0em; } p.premier-para { font-weight: normal; font-style: normal; font-variant: normal; font-size: 0.88em; line-height: 1.38em; text-indent: 0em; text-align: justify; margin: 0em; } p.para { font-weight: normal; font-style: normal; font-variant: normal; font-size: 0.88em; line-height: 1.38em; text-indent: 1.43em; text-align: justify; margin: 0em; } p.dernier-para { font-weight: normal; font-style: normal; font-variant: normal; font-size: 0.88em; line-height: 1.38em; text-indent: 1.43em; text-align: justify; margin: 0em 0em 2.29em 0em; } Also, the smallcaps don't appear in ADE (but I think that is just because it doesn't support smallcaps or something), and they appear almost correctly in Firefox... Last weird thing with this particular ePub: when I open it in Sigil on my Mac, scrolling in a xhtml file is very very laggy. It's not doing this on my PC—and my PC is considerably older and slower than my new Macbook Pro. Did someone else experienced something similar with Sigil on different platforms with same file? And no problem with other ePub so I'm wondering what is wrong with this one (my first created with InDesign). Thanks again for your help, Michael |
05-30-2011, 07:08 PM | #2 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
Edit...misread post
InDesign isn't the problem. I'm guessing it's a funny display thing with Sigil. I get a similar issue with ADE on OSX, (sans-serif displaying instead of serif, that type of thing)... Try closing all your open fonts Trash the Sigil preferences and see if that fixes your problem Last edited by Adjust; 05-30-2011 at 07:15 PM. |
Advert | |
|
05-30-2011, 07:36 PM | #3 |
Resident Curmudgeon
Posts: 76,002
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Code:
h1.titre-chapitre { font-weight: bold; font-size: x-large; text-indent: 0; text-align: center; margin-top: 30px; margin-bottom: 30px; margin-left: 0; margin-right: 0 } p.premier-para { text-indent: 0; text-align: justify; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0 } p.para { text-indent: 1.2em; text-align: justify; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0 } p.dernier-para { text-indent: 1.2em; text-align: justify; margin-top: o margin-bottom: 20px; margin-left: 0; margin-right: 0 } |
05-30-2011, 08:12 PM | #4 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
What he had is what comes out of InDesign.
There wasn't anything wrong with his original CSS. Nothing that would make small caps to appear .i.e font-variant: small-caps; Last edited by Adjust; 05-30-2011 at 08:19 PM. |
05-31-2011, 09:57 AM | #5 |
Colonel Mustard
Posts: 90
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPhone 6, Kindle Paperwhite 2, iPad 2
|
It indeed was a "funny display thing" with Sigil. I don't know exactly what "fixed" it, but text went back to normal display while I was playing with something that seemed unrelated in the CSS (an element unrelated to those I posted). I just hope that it really isn't a problem with the ePub—I would hate to see the text appears all in smallcaps on certain e-readers.
That said, since JSWolf cleaned my CSS, I have a couple questions on the subject. First, I see that "line-height" attribute was removed: is it because this element isn't really used by e-readers? I was thinking of removing it but wasn't sure. I see that "font-size: normal" and "font-variant: normal" (I let that one there thinking that it could help avoid smallcaps) were removed. And the font-size of the <h1> element declared with "x-large" value instead of em: why is it better to do this? Also is there an advantage to declaring the 4 margins separately instead of all on same line? And, last question about css, why declaring the margins in pixels instead of em? Now that I'm getting "better" with my InDesign/ePub workflow, I guess I'll spend a couple of hours watching the CSS training on Lynda.com. Thanks a lot for your help and advices. |
Advert | |
|
05-31-2011, 11:44 AM | #6 | |
Grand Sorcerer
Posts: 27,946
Karma: 198500000
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
|
Quote:
|
|
05-31-2011, 12:04 PM | #7 | |||||
frumious Bandersnatch
Posts: 7,534
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Quote:
Quote:
Quote:
Quote:
Quote:
|
|||||
05-31-2011, 12:27 PM | #8 |
Colonel Mustard
Posts: 90
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPhone 6, Kindle Paperwhite 2, iPad 2
|
You guys rock! Thanks again—much appreciated.
|
05-31-2011, 06:41 PM | #9 |
Resident Curmudgeon
Posts: 76,002
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
There is a lot wrong with the CSS. font-variant: small-caps; doesn't work in ADE. But what the problem is is that all three of the styles in the CSS have font-size: 0.88em; The CSS as posted here was a mess. I've just fixed the initial problem and cleaned up the mess.
|
05-31-2011, 06:43 PM | #10 |
Resident Curmudgeon
Posts: 76,002
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Happy to help.
As for the reason for the separate margins, I just find it's easier to read. As far as the font size in the h1 CSS entry, I really should have removed that line and let h1 be it's default size. And if h1 is too large, change it to h2 and change it to h2 in the CSS as well. Last edited by JSWolf; 05-31-2011 at 06:46 PM. |
05-31-2011, 07:06 PM | #11 | |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
His original CSS is what InDesign generates, there's nothing wrong with it, it validates fine
I know that's why I used it as an example. (btw it does work in iBooks) Quote:
But there wasn't an initial problem, it was a display problem. Last edited by Adjust; 05-31-2011 at 07:08 PM. |
|
05-31-2011, 08:53 PM | #12 | |
Colonel Mustard
Posts: 90
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPhone 6, Kindle Paperwhite 2, iPad 2
|
Quote:
Code:
span.smallcaps { font-variant: small-caps; } And at the time of writing this I checked the same file in the Calibre viewer and it only accepted my h1.title smallcaps, not even the small caps declared in p.chaptertitle. Small caps is the most mysterious part of the formatting so far... There was also a mysterious problem with "text-align" in iBooks, but thanks to Liz Castro's blog I fixed the problem by adding <span> and </span> inside the element I want to align differently. |
|
05-31-2011, 08:57 PM | #13 | ||||
Resident Curmudgeon
Posts: 76,002
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Quote:
Quote:
Quote:
Quote:
|
||||
05-31-2011, 09:00 PM | #14 | ||
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
Quote:
https://www.mobileread.com/forums/sho...45&postcount=3 Quote:
|
||
06-01-2011, 04:14 AM | #15 |
frumious Bandersnatch
Posts: 7,534
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
No, smallcaps is supported in ePUB all right[*], it's only ADE who does not support them (or, at least, it does not "fake" them if a true smallcaps font does not exist, which is often the case). Don't blame ePUB for ADE's faults.
|
Tags |
indesign cs5, sigil, smallcaps |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
smallcaps how to? | JSWolf | ePub | 20 | 06-02-2016 02:40 PM |
Smallcaps in Kindle | cscotts | Kindle Formats | 5 | 01-26-2011 09:52 AM |
ADE won't use Sigil css file | Phanes | Sigil | 6 | 10-22-2010 01:29 PM |
Sigil styles and CSS | View[+]Finder | Sigil | 4 | 05-27-2010 05:39 PM |
Sigil and CSS files | crutledge | Sigil | 6 | 05-20-2010 09:02 AM |