WeasyPrint
WeasyPrint copied to clipboard
Support font-variant: small-caps approximation
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'
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 ?
Possibly this only works for fonts that have a small-caps variant, but I don’t know how to find one.
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!
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.
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.
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.
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:.
Hi liZe. I´m interesting in this feature
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!
/*** 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?
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