Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-30-2011, 10:43 AM   #1
mtrahan
Colonel Mustard
mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.
 
mtrahan's Avatar
 
Posts: 87
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPod Touch, Kindle 3, 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>
I did 3 separate paragraph classes to get no indent on first line, and to get some space after the last line because there are some sub-sections in chapters. Here is the CSS for the 4 items shown in my example:

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;
}
And the smallcaps problem is really related to the text lines, because when I scale the Sigil window the smallcaps parts change. For example, when I maximize the window, those 3 small paragraphs only have 1 line and it is not in small caps. Actually, when maximized, every paragraph that is shorter than one full line isn't shown in smallcaps... I don't understand why it is doing this at all. Any idea?

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
mtrahan is offline   Reply With Quote
Old 05-30-2011, 08:08 PM   #2
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
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 08:15 PM.
Adjust is offline   Reply With Quote
Old 05-30-2011, 08:36 PM   #3
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,499
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
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
}
Try this CSS. The CSS you had was not all that good. This one is a lot nicer.
JSWolf is offline   Reply With Quote
Old 05-30-2011, 09:12 PM   #4
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
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 09:19 PM.
Adjust is offline   Reply With Quote
Old 05-31-2011, 10:57 AM   #5
mtrahan
Colonel Mustard
mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.
 
mtrahan's Avatar
 
Posts: 87
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPod Touch, Kindle 3, 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.
mtrahan is offline   Reply With Quote
Old 05-31-2011, 12:44 PM   #6
DiapDealer
Grand Sorcerer
DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.DiapDealer ought to be getting tired of karma fortunes by now.
 
DiapDealer's Avatar
 
Posts: 9,531
Karma: 43837842
Join Date: Jan 2010
Device: Nexus 7, Kindle Fire HD
Quote:
And, last question about css, why declaring the margins in pixels instead of em?
If you want margins, spacing and/or indents to scale when different font sizes are chosen by users, you probably want to use em. Pixel specified margins will stay the same regardless of font-size. For generic paragraph top/bottom margins, I tend to go with em, but I may use pixels with chapter header margin-tops for consistency.
DiapDealer is offline   Reply With Quote
Old 05-31-2011, 01:04 PM   #7
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,312
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by mtrahan View Post
First, I see that "line-height" attribute was removed: is it because this element isn't really used by e-readers?
I'd say it's because it's too font-specific and, unless you want some special effect, it's better to leave it alone.

Quote:
I see that "font-size: normal" and "font-variant: normal" (I let that one there thinking that it could help avoid smallcaps) were removed.
Those are often redundant, unless you have to override some previous (or default) setting.

Quote:
And the font-size of the <h1> element declared with "x-large" value instead of em: why is it better to do this?
x-large is an absolute size (reader dependent), while ems are relative. I guess for your case ems are better. I prefer percents, though (2em = 200%)

Quote:
Also is there an advantage to declaring the 4 margins separately instead of all on same line?
None that I know.

Quote:
And, last question about css, why declaring the margins in pixels instead of em?
Pixels are absolute, again, and do not change when you change the global font size in the reader. Depending on where the particular margin applies, you may want one or the other.
Jellby is online now   Reply With Quote
Old 05-31-2011, 01:27 PM   #8
mtrahan
Colonel Mustard
mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.
 
mtrahan's Avatar
 
Posts: 87
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPod Touch, Kindle 3, iPad 2
You guys rock! Thanks again—much appreciated.
mtrahan is offline   Reply With Quote
Old 05-31-2011, 07:41 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,499
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Adjust View Post
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;
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.
JSWolf is offline   Reply With Quote
Old 05-31-2011, 07:43 PM   #10
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,499
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by mtrahan View Post
You guys rock! Thanks again—much appreciated.
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 07:46 PM.
JSWolf is offline   Reply With Quote
Old 05-31-2011, 08:06 PM   #11
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Quote:
Originally Posted by JSWolf View Post
There is a lot wrong with the CSS.
His original CSS is what InDesign generates, there's nothing wrong with it, it validates fine

Quote:
Originally Posted by JSWolf View Post
font-variant: small-caps; doesn't work in ADE.
I know that's why I used it as an example. (btw it does work in iBooks)
Quote:
Originally Posted by JSWolf View Post
But what the problem is is that all three of the styles in the CSS have font-size: 0.88em;
That's not a problem, all mine have that. It's so I change font sizes around to suit my design.

Quote:
Originally Posted by JSWolf View Post
I've just fixed the initial problem and cleaned up the mess.
But there wasn't an initial problem, it was a display problem.

Last edited by Adjust; 05-31-2011 at 08:08 PM.
Adjust is offline   Reply With Quote
Old 05-31-2011, 09:53 PM   #12
mtrahan
Colonel Mustard
mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.mtrahan is no ebook tyro.
 
mtrahan's Avatar
 
Posts: 87
Karma: 1426
Join Date: Feb 2010
Location: Montreal
Device: iPod Touch, Kindle 3, iPad 2
Quote:
Originally Posted by Adjust View Post
I know that's why I used it [smallcaps] as an example. (btw it does work in iBooks)
So far I can't say smallcaps works perfectly fine for me in iBooks. Actually, the only smallcaps that work right now are the one declared in the HTML elements tags directly... I don't understand why. By that I mean that for example my p.chaptertitle, h1.title classes with "font-variant: small-caps;" in the CSS work, but I also have a separate span class declared like this in the stylesheet:

Code:
span.smallcaps {
	font-variant: small-caps;
}
...and it doesn't work. For example, at the beginning of first paragraph, when I do <span class="smallcaps">First words</span> it has no effect in iBooks.

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.
mtrahan is offline   Reply With Quote
Old 05-31-2011, 09:57 PM   #13
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 38,499
Karma: 19471833
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2), Sony PRS-650, Sony PRS-T1, nook STR, iPad 1, iPhone 5
Quote:
Originally Posted by Adjust View Post
His original CSS is what InDesign generates, there's nothing wrong with it, it validates fine
Validates and works well can be two different things and in this case, there were issues with the CSS that needed to be fixed.

Quote:
I know that's why I used it as an example. (btw it does work in iBooks)
Smallcaps is not supported in ePub and iBooks does a lot of things non-standard like smallcaps.

Quote:
That's not a problem, all mine have that. It's so I change font sizes around to suit my design.
It was a problem for the OP.

Quote:
But there wasn't an initial problem, it was a display problem.
A display problem caused by the CSS.
JSWolf is offline   Reply With Quote
Old 05-31-2011, 10:00 PM   #14
Adjust
Addict
Adjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel isAdjust really knows where his or her towel is
 
Adjust's Avatar
 
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
Quote:
Originally Posted by mtrahan View Post
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.
Yeah I know, it's painful, that's why I fake it:
http://www.mobileread.com/forums/sho...45&postcount=3

Quote:
Originally Posted by JSWolf View Post
Validates and works well can be two different things and in this case, there were issues with the CSS that needed to be fixed.
Smallcaps is not supported in ePub and iBooks does a lot of things non-standard like smallcaps.
It was a problem for the OP.
A display problem caused by the CSS.
Ok, it appears we're not understanding each other And so I'll leave it at that.
Adjust is offline   Reply With Quote
Old 06-01-2011, 05:14 AM   #15
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 6,312
Karma: 4963983
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Quote:
Originally Posted by JSWolf View Post
Smallcaps is not supported in ePub and iBooks does a lot of things non-standard like smallcaps.
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.
Jellby is online now   Reply With Quote
Reply

Tags
indesign cs5, sigil, smallcaps

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Smallcaps in Kindle cscotts Kindle Formats 5 01-26-2011 10:52 AM
ADE won't use Sigil css file Phanes Sigil 6 10-22-2010 02:29 PM
Sigil styles and CSS View[+]Finder Sigil 4 05-27-2010 06:39 PM
Sigil and CSS files crutledge Sigil 6 05-20-2010 10:02 AM
smallcaps how to? JSWolf ePub 5 10-01-2009 12:06 PM


All times are GMT -4. The time now is 06:55 AM.


MobileRead.com is a privately owned, operated and funded community.