CSS question

[crutledge]

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:

blockquote {
margin-bottom:1em;
margin-top:1em;
margin-left:5em;
margin-right:0;
font-size:90%;
}

In addition I have defined a class:

.small{
font-size:90%;
}

In letters I like to show the salutation and signature with the first letter full cap and the remainder of the name in small caps.

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

[Toxaris]

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.

[susan_cassidy]

How are you using the class definitions (.small)?

[Jellby]

In some systems there may be a minimum font size...

[crutledge]

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.

[Toxaris]

Is <blockquote><span></span></blockquote> allowed? I believe Flightcrew and EPUBCheck will complain about it.

[crutledge]

Originally Posted by Toxaris

Is <blockquote><span></span></blockquote> allowed? I believe Flightcrew and EPUBCheck will complain about it.

Works fine with Sigil, ePub, and kindle,

[crutledge]

I may have misunderstood your question. Below is the code used and the attached image is the way it looks in the RS.

  <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>

[Toxaris]

Ah, but here the span is in a div. That is something else.

[Jellby]

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:

<blockquote class="small">
<span class="small"></span>
</blockquote>

does not result in a "twice small" text? I think it should, i.e., relative font sizes should be cumulative.

[crutledge]

Originally Posted by Jellby

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:

<blockquote class="small">
<span class="small"></span>
</blockquote>

does not result in a "twice small" text? I think it should, i.e., relative font sizes should be cumulative.

I fully agree. But it doesn't seem to work thar way.

[JSWolf]

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.

[Jellby]

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).

[crutledge]

Originally Posted by Jellby

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).

I just checked again, and my method works fine with ADE.

[Jellby]

Yes, it works, but you are using "fake" small-caps with some ad-hoc manual coding, when the rational approach would be:

<span class="smallcaps">My Dear Crampton</span>:

span.smallcaps {
  font-variant: small-caps;
}

much more maintainable and cleaner. The problem is it doesn't work in ADE, but that's ADE's problem and bug, and I won't degrade the coding to satisfy ADE, at least for something that's not essential.