small-caps renders fake small caps instead of real ones

Issue #7798088 • Assigned to Christian F.

Details

Created
Jun 6, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
  • Chrome
  • Safari
  • Opera
Found in build #
13.10586
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

How to reproduce the bug:

  1. Take any OpenType font supporting small capitals (i.e. smcp and/or c2sc feature tag). In fact, almost any modern system font is suitable, such as Calibri (Microsoft), Roboto (Google) or San Francisco (Apple).
  2. Take any HTML element with text content containing lowercase Latin letters (and maybe any other characters).
  3. Apply the specified font and the CSS rule font-variant: small-caps to this element.

What result is expected:

The browser should render lowercase letters as small caps, which looks like this:
Small caps demo

(This is a screenshot from Mozilla Firefox, which processes small caps the right way.)

What wrong result is observed in MS Edge:

Edge browser renders lowercase letters as fake small caps: they are just ordinary uppercase letters programmatically zoomed and distorted:
Fake small caps demo

These fake small caps do not match the uppercase letters with their stroke width and proportions, they have bad spacing, therefore the whole inscription looks ugly and inhumanly.

Notes

Unfortunately, typography amateurs are not aware that small capitals is a separate kind of letters. It is often said that “small caps are letters of uppercase form and lowercase size”, but this is completely wrong. You cannot programmaticaly generate small caps from the uppercase letters, just like you cannot programmaticaly convert lowercase and uppercase letters to one another. It would be more accurate to say that small caps are close to uppercase letters by their form and to lowercase ones by their height. And still font designers develop independent glyphs for small-caps, just as they create separate lowercase and uppercase glyphs for each letter.

Fake small capitals were a common issue of early desktop publishing software, for programmers did not know typography and typographers could not write the code. Now browser developers go through the same grief as DTP software developers left behind twenty years ago.

Meanwhile, MS Egde (as well as Internet Explorer) is actually able to render real small capitals, though it requires to use font-feature-settings: 'smcp' 1. That means Egde sources already contain the code needed to display small caps properly. It only remains for the developers to make font-variant: small-caps work the same way.

This bug relates not only to Latin script, but also to other bicameral scripts such as Greek and Cyrillic.

Fake small caps can still make sense in cases when the font itself does not support real small capitals and does not provide glyphs for them.

Attachments

0 attachments

    Comments and activity

    • I am sorry, I have specified Safari among the browsers having this bug, but this was a misclick. Safari renders small caps correctly, as Firefox does as well. Now I cannot find how to edit my issue details, so I write this comment.

    • Microsoft Edge Team

      Changed Assigned To to “Rick J.”

      Changed Assigned To to “Christian F.”

    • Since version 52.0 (now in beta), Google Chrome displays small caps the right way and supports font-variant-caps property as well.

    You need to sign in to your Microsoft account to add a comment.

    Sign in