What is correct display of ROUNDED-UNICODE characters?

Question

Currently, I have created a HTML file displaying some rounded number from Unicode table Unicode table from 2000 to 2FFF

You can see than on Opera Browser (it is same thing on all browsers), some number are rounded in large circle and some other in small circle.

I have then created following HTML file to display some of this Unicode

<html>
    <head>
        <style type="text/css">
            .unicode
                {
                font-size: 32px;
                cursor: pointer;
                min-width: 56px;
                display: inline-block;
                text-align: center;
                }
        </style>
    </head>
    <body>
        <table>
            <tr><td>0x2780</td><td><span class="unicode">&#x2780;</span></td><td> white small</td></tr>
            <tr><td>0x278A</td><td><span class="unicode">&#x278A;</span></td><td> black small</td></tr>
            <tr><td>0x24EA</td><td><span class="unicode">&#x24EA;</span></td><td> white large</td></tr>
            <tr><td>0x2460</td><td><span class="unicode">&#x2460;</span></td><td> white large</td></tr>
            <tr><td>0x2776</td><td><span class="unicode">&#x2776;</span></td><td> black large</td></tr>
            <tr><td>0x24EB</td><td><span class="unicode">&#x24EB;</span></td><td> black large</td></tr>
            <tr><td>0x24FF</td><td><span class="unicode">&#x24FF;</span></td><td> black large</td></tr>
        </table>            
    </body>
</html>

When I display this file using distinct user I don't obtain same result as on Wikipedia (see previous image). Some circle small when they must be large and some are too large.

On Opera

All circles are ... small.
Only 0x2780 and 0x278A unicode characters are correctly displayed !
Score: 2/7

On Chrome browser

0x2776 is small and must be large !
0X24FF is too large !
Score: 5/7

On Edge Chromium browser

As on Opera browser
All circles are ... small.
Only 0x2780 and 0x278A unicode characters are correctly displayed !
Score: 2/7

On Edge Chromium brower (Cannary = test release)

As on Chrome browser
0x2776 is small and must be large !
0X24FF is too large !
Score: 5/7

On Firefox browser

Characters 0X24EA, 0x2A60 and 0x24EB are small instead of large as 0x2776 and 0x24FF !
Score: 4/7

On Safari browser

I don't have any Apple computer and it is not more possible to download a Windows version !
Score: 0/7

Question: How can I display rounded number with correct circle size on all browsers ?

In previous image (that is loadable in another Tab for zooming), you can quickly compare fonts (Arial, Cambria Math and Calibri) and browsers (Opera, Chrome, Firefox and Edge Chromium).

I think the answer in this thread can explain why this issue occurs and what are the possible solutions or workarounds for it. It applies to all browsers. https://stackoverflow.com/questions/11292401/unicode-character-rendered-at-a-different-size-in-ie6 — Deepak-MSFT, Apr 24 '20 at 05:10

score 2 · Answer 1 · answered Apr 24 '20 at 05:02

The rendering of the characters specified in your HTML file is determined by the font being used rather than the browser, and it is easy to confirm this. For example, I get a similar result to you in Opera if I use Arial font to render the characters in your HTML file:

However, if I change the font to Calibri (Easy Setup > Go to browser settings > Advanced > Appearance > Customize Fonts > Standard Font > Calibri), the size of some of those characters immediately changes:

This is because the size of the characters being rendered is a matter of style, and is determined by the font designers. There is nothing in the Unicode standard that states (say) ❶ should be rendered larger than ➊, and the descriptive terms being used in the OP ("black large" and "black small" respectively) are nothing to do with the Unicode specification.

It's also worth noting is that characters in the range U+2700 to U+27BF form the Dingbats Block, whereas characters in the range U+2460 to U+24FF form the Enclosed Alphanumerics Block. Characters from different blocks which happen to be visually similar, such as ➀ (➀ DINGBAT CIRCLED SANS-SERIF DIGIT ONE') and ① (① 'CIRCLED DIGIT ONE') have no real relationship at all.

The font designers for Calibri chose to render characters in the Enclosed Alphanumerics Block larger than some of those in the Dingbats Block, and the font designers for Arial did not.

Hence there is no definitively correct or incorrect way to render those characters. Just pick a font that renders them in a manner that is appropriate for your needs.

Thanks. You have answered to question 'How to display unicode as on Wikipedia ?' But, I disagree with you about your explanation. Personnaly, I think that some font has been incorrectly designed as Arial or Consolas. Or that what have done Unicode team is not very professional ! Indeed, why to define sans-serif circled number when sans-serif is an attribute of font ? — schlebe, Apr 24 '20 at 19:30
What do you disagree with _specifically_ about my explanation? The presentation of the glyphs is up to the font designers, not the Unicode Consortium. While I don't agree with some choices that were made for some characters for some fonts, there is no definitive standard which means they were incorrect. And even if some of the renderings were done incorrectly, that doesn't invalidate my explanation. If you don't like a particular font then don't use it. — skomisa, Apr 24 '20 at 19:44
I will post the question to Unicode consortium and I will come back when I have an answer (if I obtain an answer). — schlebe, Apr 24 '20 at 19:51
OK, that sounds good. Just to clarify though, [from Wikipedia](https://en.wikipedia.org/wiki/Unicode_font): _"**The Unicode standard does not specify or create any font** (typeface), a collection of graphical shapes called glyphs, itself ... **The choice of font ...is left up to the user**."_ — skomisa, Apr 24 '20 at 20:00

What is correct display of ROUNDED-UNICODE characters?

1 Answers1