Support font-variant: small-caps approximation

[blagasz]

Hi,

It is written in the documentation that I should report as a bug if some CSS 2.1 feature is not working. I found that the font-variant: small-caps CSS is not working (it works in the browser, but not in the rendered PDF).

Hope this helps, regards, Sz'

[SimonSapin]

I could reproduce this. I just tested that we’re correctly setting VARIANT_SMALL_CAPS when calling Pango, but I don’t know what’s going on after that… @liZe ?

[SimonSapin]

Possibly this only works for fonts that have a small-caps variant, but I don’t know how to find one.

[blagasz]

I was thinking about that as well, but is it really necessary? I mean every font could be easily small-capitalized by capitalization and adjustment of font size. I am not sure though if that is how it works!

[SimonSapin]

Yes, that would be synthesizing the small-caps variant. I suspect that’s what browsers are doing when the font does not provide it directly. I suppose we could do it with a combination of text-transform and font-size.

[liZe]

Yes, you're right, many softwares (including browsers) use caps with a smaller size instead of small caps when they are not available. That a crime against typography (real small caps characters keep the same weight as regular variants for a size, false small caps don't), but that's definitely not the worst.

Small caps are available in a separate font file (just as bold and italic, Fontin is a good example) or via an OpenType feature (like ligatures and kerning tables, Libertine is a good example). Unfortunately, both solutions seem to be broken in WeasyPrint, even if the code looks OK. We have to figure out what's going on.

[liZe]

By the way, creating a "false" small-caps variant fallback can be difficult, because I'm not sure that there's a way to know in Pango if a real small-caps variant exists.

[liZe]

After playing with Pango and fontconfig, I now know that fontconfig is able to generate false small-caps, italic and bold fonts. I don't know exactly how it works, but I suppose that it could be included in WP. I'm ready to help anybody interested in this feature :smile:.

[manuthema]

Hi liZe. I´m interesting in this feature

[liZe]

Hi liZe. I´m interesting in this feature

Good to know!

After playing with Pango and fontconfig, I now know that fontconfig is able to generate false small-caps, italic and bold fonts. I don't know exactly how it works, but I suppose that it could be included in WP. I'm ready to help anybody interested in this feature .

Well… It's definitely true for "faux" bold and italic, and it's already included in WeasyPrint. But unfortunately, I can't find anything about small caps :cry:. I don't know if it was just a dream, if I've seen small caps where there was just bold and italic, or if I had found something else… If anyone knows anything about that, I'd be glad to learn!

[bpj]

/*** fake small-caps to overcome bug ***/

.sc, .smallcaps, .small-caps {
  /* font-variant: small-caps; */
  text-transform: uppercase; font-size: 75%; 
}

/* force uppercase inside faked small-caps:
  <span class="sc"><span class="scu">C</span>aesar</span>
*/
.scu {
  /* font-variant: small-caps; */
  text-transform: uppercase; font-size: 133%; 
}

/* .usc = uppercase to small-caps:
   <span class="usc">SMALL CAPS</span>
   <span class="usc"><span class="scu">C</span>AESAR</span>
*/
.usc {
  /* text-transform: lowercase; font-variant: small-caps; */
  text-transform: uppercase; font-size: 75%;
}

Fake small caps may be a crime against typography, but what can you do when the style guide demands them?

[t4k]

Thanks for that fake small-caps example.

I'd really like to see this implemented natively, if possible. The markup required for surrounding all the true uppercase letters in a string with spans seems incredibly daunting for a publishing process we are trying to automate.

Some other folks were looking at similar issues at some point: https://github.com/Automattic/node-canvas/issues/894