3

I am using the black and white circle in my project when I noticed that on ios chrome the white circle is larger than the black circle.

● - U+25CF ○ - U+25CB

In a desktop environment the circles appear to be the same size but have slightly different heights. The difference is not noticeable.

I am trying to make these circles the same size on ios chrome.

I feel like I have eliminated any variables and that the browser is responsible for the different sizes of these circles.

photo

Julien
  • 140
  • 1
  • 9
  • That depends on the font. In some fonts, they may be the same size, while in others, they're not. There aren't really any regulations on how large those shapes should be. So the solution is to find a font in which the sizes are the same ad use that as a webfont. – Mr Lister Jun 17 '19 at 08:33

1 Answers1

4

Actually, as far as unicode is concerned, all characters are font dependant. When a certain character is not available, it is picked from a fallback font.

If you had not configured a custom font, or if these chars are not available in the font you picked then the different sized circles are in the default font used by chrome/ios.

So, you have two ways to go: either find a font that have the characters drawn in a way that suits you, and force that, or give-up using unicode characters for these glyphs and use inline images instead.

You could make use of SVG drawings which can be encoded within the HTML markup itself, that will ensure a consistent look.

jsbueno
  • 99,910
  • 10
  • 151
  • 209
  • I really wish SVG would work seamlessly for this, but the fact that it doesn't inherit parent CSS color (unless embedded) puts me off https://stackoverflow.com/questions/13000682/how-do-i-have-an-svg-image-inherit-colors-from-the-html-document/13002311 it's a shame. – Ciro Santilli OurBigBook.com Nov 15 '21 at 18:08