4

To display a rating on a web page, I would like to use unicode circles, for example: ●●●◐○

This uses the following code points from the geometric shapes unicode block:

● U+25CF (BLACK CIRCLE)

◐ U+25D0 (CIRCLE WITH LEFT HALF BLACK)

○ U+25CB (WHITE CIRCLE)

However, the result obviously depends on the available fonts.

Some fonts do not support all code points, some have non-uniform sizes and/or positions for the symbols, and some fonts show the "CIRCLE WITH LEFT HALF BLACK" without a border. See e.g. preview on google fonts.

My question is this:

Is there a single font that is available by default on Windows, iOS, Android, and common Linux distributions, that meets the following requirements?

  • supports these three code points (●◐○)
  • circles have uniform size
  • half circle has a border

If not, what would be the proper fallback fonts to use for each of these platforms?

Note: I can also do this using e.g. svg images, but using unicode characters is much more convenient.

2
  • 1
    Have you seen how this post renders on macOS (Safari, Firefox): i.stack.imgur.com/fxPKC.png
    – Glorfindel
    Mar 27 at 19:41
  • @Glorfindel: Thanks for the example. That's exactly what I would like to prevent.
    – djvg
    Mar 28 at 8:06
17

I don't think there are any fonts that you can reasonably expect to find on every system. Why not just include your own font defining these three glyphs? Or just use the one below. It only took a few minutes to draw in FontForge.

@font-face {
    font-family: UniCircles;
    src: url(data:application/font-woff2;base64,d09GMgABAAAAAAJ8AA0AAAAABkgAAAIlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBmAAglIIBBEICoF8gUMLDgABNgIkAxQEIAWDVAcgGx4FIC4G7MblQspYm5k1jxUBoCHj8P5RxHjof792Z95fRC2LVRLJJEQilM4hJEqgVPEomtraf5fOXOED7bj7Zv+VFMAAlWYes4CHDkMQSvgbcM37ZdsaB9RUgBtGN0YjTKA7NR95G4epNp7/dWtxb0/gGYR4gaSXN1FxHF4sUat/fAU6OCxADozSbQoefbKWGOIRRBA6IeB962wGvnsFiTnVzKCUdExQkpekAVey4/hHChKkWjMAMAWA/TObH0tg/i2vHeciRIUAwBSioGAMwTaywJjCImjSJGH+cXhzH+L1F0586j5nBCAaIACRIAEAAV6nswKi7hI0gDY0Yx3sA6hASqSQlXBGm8ZgU7kUBxNYqRqP4uyk8K7d9XDb2wxeve1w3V0NOpr5+gHLIqg1+6puj7d4JzcO2uG8qC8wdyrWdQb3/186usV4oU2h8fjxgEBwfaH5PjpN/yY2+XdO/aF+UeVCQJMEQen2nUsaKFMgAKAqaWoSdoEvAQg06JKBRAhsAqDDDQJIAUKLYQSp0SqCYsETQaXFLQhquvwQNGgJKXJRMQEUoU+O1GEOxTYTKn1eqJnyoTfoCypwIinCIiLLJy4gByfnkRZx68ChgJCCOI8s9C3rA1tSkvLLN2eFBKiYSGp7de402DWLYKTAKE/wAZNdyIYCKouq93UNkd/YEsZwUw8tWJxuy8qJSElSEUkiWVXD26qWUhTG1mlvK0A9BgIAAAAA) format('woff2');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: UniCircles, sans-serif;
}

You can try it out here: https://jsfiddle.net/867xnw4d/

This is what it looks like:
0.5: ◐○○○○ // 2.5: ●●◐○○ // 4.5: ●●●●◐

2
0

While this does not use unicode characters as per your question, you could also use some CSS like so:

<i class="half-moon"></i> <i class="full-moon"></i> <i class="new-moon"></i>
i[class*="moon"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: .25em solid;
    border-radius: 1em;}

i[class*="moon"]::before {
    display: block;
    content: "";
    height: 1em;
    background: #000;}

i.half-moon::before {width: .5em;}
i.full-moon::before {width: 1em;}
i.new-moon::before  {width: 0;}

This might be useful in some cases. Adapt according to your needs.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.