Small caps

[Notjohn]

A while ago I read an e-copy of Stalin's General, in which the first couple of lines beginning each paragraph were boldface caps but smaller than the usual. I assumed that the small-caps variant would produce that, so I wrote this:

span.smallcap {
font-variant:small-caps;
font-weight:bold;
}

I find however that this variant is for Large & Small caps, and that the small caps are too small.

Can I accomplish what the publisher of Stalin's General did by using a percentage figure? What would the style look like, say at 75 percent?

(I appreciate that this has nothing to do with Sigil, but I don't know where else to ask!)

Thanks - NJ

[Jellby]

If you don't want to modify the text and you want all letters (uppercase or lowercase) the same size, you could use text-transform, but that's not a supported property in the ePub spec, so it's very unlikely to work in real-world readers:

span.smallcap {
  text-transform: lowercase;
  font-variant: small-caps;
  font-weight: bold;
}

or

span.smallcap {
  text-transform: uppercase;
  font-size: 80%;
  font-weight: bold;
}

When real small caps are available and supported (very rare), the first option is preferred, as a smallcapped "a" is not the same as a smaller "A" (the stroke thickness should not be scaled down, for example). But most readers just ignore font-variant, so the second option, although, sub-optimal, is more likely to work.

In any case, as I said, text-transform is not required in the spec, so don't rely on it. If you really need uppercase or lowercase text, just modify the text. But I guess in this case it's only a secondary aesthetic choice, and not much is lost if a given reader ignores the text-transform.

[DiapDealer]

Originally Posted by Jellby

span.smallcap {
  text-transform: uppercase;
  font-size: 80%;
  font-weight: bold;
}

Wolf-bait if I ever saw any.

[sjkramer]

Originally Posted by Jellby

... so the second option, although, sub-optimal, is more likely to work.

I'm really embarrassed to admit that I've been dealing with this by using <small> directly in the xhtml file. Break it to me, how awful is that?

[JSWolf]

Originally Posted by sjkramer

I'm really embarrassed to admit that I've been dealing with this by using <small> directly in the xhtml file. Break it to me, how awful is that?

Not as awful as you think. You can redefine small in CSS. I use Charis SIL and you can extract a small caps version from the full version. So using Charis SIL as the main font and the small caps version for the small caps, it does look pretty nice. Combine that with Calibre's font subsetting and you have a much smaller ePub with a nice font and true small caps.

[DiapDealer]

I agree. <small> isn't so bad. It's generally believed to be candidate for deprecation eventually, but it's still supported—and as JSWolf mentioned, you can style it with CSS. But personally, I'd probably just use a styled <span> since that's essentially what you'd be turning the <small> tag into for all practical purposes anyway.

[JSWolf]

Originally Posted by DiapDealer

I agree. <small> isn't so bad. It's generally believed to be candidate for deprecation eventually, but it's still supported—and as JSWolf mentioned, you can style it with CSS. But personally, I'd probably just use a styled <span> since that's essentially what you'd be turning the <small> tag into for all practical purposes anyway.

The span can also use small as a font size.

[Notjohn]

How large is <small>? Is it the same size as the small caps in the small-cap variant? (Because they're too small!)

80 percent wont' work?

I'm not trying to use large & small caps. All are the same size. Looks much better that way IMHO.

[theducks]

Originally Posted by Notjohn

How large is <small>? Is it the same size as the small caps in the small-cap variant? (Because they're too small!)

80 percent wont' work?

I'm not trying to use large & small caps. All are the same size. Looks much better that way IMHO.

My device does not do 'smallcaps', so I use all CAPS inside a Span with a 85% font-size. This size difference shows up as 'different' to my eye when displayed next to a full size Cap.

[Jellby]

Originally Posted by Notjohn

How large is <small>? Is it the same size as the small caps in the small-cap variant? (Because they're too small!)

That's up to the device/reading app.

When you say "the same size as the small caps" I guess you mean the size "font-variant: small-caps" is rendered in some particular reader/browser. That's, however, far from standard as well. Most readers readers just ignore "font-variant: small-caps" anyway, so I doubt they are "too small", the only problem is they are not caps at all

The easiest is to use <small> and to set

small { font-size: 85%; }

or whatever in the CSS.