Hi I have problem with katerina font, which I use in my web application. I need to convert some text from html/css to pdf with mPDF. The problem is, that numbers looks awkward.
But when I use ALL CAPS function in Photoshop, they looks good.
I just need them to be in same line. Is there any way how can I convert them in php or with css to look like in Photoshop(ALL CAPS ON)?
Try font-size: 24px; line-height: 26px; vertical-align: baseline;
If baseline doesn't work, try either text-top, bottom or text-bottom
Hope one of these works out...
From the images, it seems that the font contains both “old-style” (or “lowercase”) digits and “lining” (or “uppercase”) digits. They would then be glyph variants, not separate characters (like “a” and “A” are), with old-style digits being the default. Presumably ALL CAPS in Photoshop selects the lining digits; this is a bit odd, but possible – after all, typographically, lining digits should be used in an expression that consists of uppercase letters and digits. – I cannot really confirm this because I don’t have the font, and the fonts around the web that are called Katerina look very different.
In HTML, it used to be impossible to select glyph variants, but things are changing. Check out my demo page on font features. If you have Katerina installed in your system, open the page on a modern browser, enter the font name there, and check out the row with “lnum”; it should show lining digits. If this is so, you can use the following CSS declarations to ask for such digits, when supported in the font in use:
-webkit-font-feature-settings: "lnum";
-moz-font-feature-settings: "lnum";
font-feature-settings: "lnum";
Whether such styling gets transferred to the generated PDF is a different matter. I’m not an expert on PDF, but I would expect it to have some support to OpenType features (which is what this is about).