CODEWITHSUNDEEP
htmlcssunicode
johhny B
johhny B

Reputation: 1452

Unicode different size arrows

I have the following code:

.testFont {
  font-size: 16px;
}
<!DOCTYPE HTML>
<html>

<head>
</head>

<body>
  <div class="outter">
    <div class="testFont">&#9652</div>
    <div class="testFont">&#9662</div>
  </div>
</body>

</html>

The unicode table below shows that the arrows I used above should be equivalent in size (from visual inspection):

enter image description here

enter image description here

enter image description here

Why are they rendered differently? And how can I get equivalent arrow sizes?

Fiddle

Update

Tested on Chrome and Safari both render the down arrow bigger?

Output Image

enter image description here

Upvotes: 4

Views: 6678

Answers (2)

Kaiido
Kaiido

Reputation: 136707

This is because of Lucida Grande font, which might be the default font on your system :

enter image description hereenter image description here

To avoid it, define the font to use yourself (better a webfont so you'd be sure every one will see the same, but I don't know one that does support these glyphes).

.testFont {
   font-size:16px;
   /* only tested on mac OS, 
      if someone could lead me to default win and *nix default fonts,
      I'd be glad to include it
   */
   font-family: 'Arial Unicode MS', 'Consolas';
}
<div class="outter">
   <div class="testFont">&#9652</div>
   <div class="testFont">&#9662</div>
</div>

Upvotes: 5

chris cozzens
chris cozzens

Reputation: 517

It seems as if the arrows are the same size, I think it is an optical illusion. See fiddle with arrows output: https://jsfiddle.net/uv8yrrav/21/ I have not changed any of your code:

<body>
<div class="outter">
   <div class="testFont">&#9652</div>
   <div class="testFont">&#9662</div>
</div>

</body>

Upvotes: 0

Related Questions