![]() |
#1 |
eBook FANatic
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
CSS question
A project I am working on displays letters and quotations in smaller type and indented.
To show this I redefined <blockquote> in the CSS as follows: Code:
blockquote { margin-bottom:1em; margin-top:1em; margin-left:5em; margin-right:0; font-size:90%; } Code:
.small{ font-size:90%; } If I leave the "font-size:90%;" in the <blockquote> the class="small" in the signature and elsewhere has no effect. If I remove the "font-size:90%;" from the <blockquote> the signature works fine. It seems that the <blockquote> definition cancels the class="small." Is this normal (correct operation) or have I done something wrong? Thanks |
![]() |
![]() |
![]() |
#2 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Where do you notice this behavior? In Sigil, ADE or on a reader? I know that the renderer of Sigil (Qtweb?) has some issues with certain CSS effects.
|
![]() |
![]() |
Advert | |
|
![]() |
#3 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 2,251
Karma: 3720310
Join Date: Jan 2009
Location: USA
Device: Kindle, iPad (not used much for reading)
|
How are you using the class definitions (.small)?
|
![]() |
![]() |
![]() |
#4 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,531
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
In some systems there may be a minimum font size...
|
![]() |
![]() |
![]() |
#5 |
eBook FANatic
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
After much fiddling and testing, I finally found a solution.
What I've been trying to do is to put a class="small" inside a class="small". The blockquote has size adjustment and a span inside the blockquote with a size adjustment. I the size adjustment is the same in both, the inside adjustment doesn't work. If the inside adjustment is smaller than the outer, it works. I hope this makes sense. |
![]() |
![]() |
Advert | |
|
![]() |
#6 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Is <blockquote><span></span></blockquote> allowed? I believe Flightcrew and EPUBCheck will complain about it.
|
![]() |
![]() |
![]() |
#7 |
eBook FANatic
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
|
![]() |
![]() |
![]() |
#8 |
eBook FANatic
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
I may have misunderstood your question. Below is the code used and the attached image is the way it looks in the RS.
Code:
<blockquote> <div class="noindent"> M<span class="small">Y</span> D<span class="small">EAR</span> C<span class= "small">RAMPTON</span>: </div> <div> Wo to that weak digestion with which you already are acquainted. I have had a most violent attack and though, as you know, I am probably the most interested in the experiment this evening, it will be impossible for me to be present. Please explain for me. </div> <div class="i10"> Hastily and very cramped, </div> <div class="i14"> G<span class="small">USTAV</span> S<span class="small">VEND</span>. </div> </blockquote> |
![]() |
![]() |
![]() |
#9 |
Wizard
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 4,520
Karma: 121692313
Join Date: Oct 2009
Location: Heemskerk, NL
Device: PRS-T1, Kobo Touch, Kobo Aura
|
Ah, but here the span is in a div. That is something else.
|
![]() |
![]() |
![]() |
#10 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,531
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
I believe you can have <span> directly under <blockquote>. It doesn't need a <p> or <div> in the middle, though it does not hurt either, and it helps keeping everything well structured.
So, your problem was that this: Code:
<blockquote class="small"> <span class="small"></span> </blockquote> |
![]() |
![]() |
![]() |
#11 | |
eBook FANatic
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
Quote:
|
|
![]() |
![]() |
![]() |
#12 |
Resident Curmudgeon
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 75,771
Karma: 134321338
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
|
Actually, the best solution is to use an embedded font and one that also has a small caps. Sure this won't work for Mobipocket, but it will work for ePub.
If you like, I can post the small cap version of Charis SIL that will work fine. Then you don't need to bother with the second font size as the small cap will be the right size. |
![]() |
![]() |
![]() |
#13 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,531
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
For small-caps, I just ignore ADE. They're usually not that important, and I don't want to add that kind of code to something that's pretty basic, it kills everything good about CSS.
If I want make sure they are displayed differently, I add some conditional CSS, which are only recognized by ADE, to make small-caps bold instead (for instance). |
![]() |
![]() |
![]() |
#14 | |
eBook FANatic
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 18,301
Karma: 16071131
Join Date: Apr 2008
Location: Alabama, USA
Device: HP ipac RX5915 Wife's Kindle
|
Quote:
|
|
![]() |
![]() |
![]() |
#15 |
frumious Bandersnatch
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Posts: 7,531
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
Yes, it works, but you are using "fake" small-caps with some ad-hoc manual coding, when the rational approach would be:
Code:
<span class="smallcaps">My Dear Crampton</span>: span.smallcaps { font-variant: small-caps; } |
![]() |
![]() |
![]() |
|
![]() |
||||
Thread | Thread Starter | Forum | Replies | Last Post |
Simple Question for the CSS experts out there... | Japes | Calibre | 2 | 06-23-2011 11:12 PM |
CSS Question | AppleTard | Calibre | 1 | 06-12-2011 12:07 AM |
Question for the CSS experts | crutledge | Sigil | 8 | 06-10-2011 04:13 PM |
stupid question about epub? (nook + css) | hapax legomenon | ePub | 0 | 10-31-2010 03:35 AM |
A question about CSS: widows and orphans | Jellby | ePub | 5 | 08-31-2009 03:54 PM |