black left- / right-pointing triangles not the sam

Question

I'm using the black left pointing triangle / right left pointing triangle geometric shapes as links on a website, using their HTML codes ( ◀ and ▶):

◀
▶

For some reason, the triangles are not displayed in the same size, even when I'm using them on a blank page with no other elements.

On Chrome, the left pointing one is slightly larger than the right pointing one. On Firefox, the right pointing one is much larger then the left pointing one.

I have the problem even when there's no CSS at all, on an otherwise blank page.

Any idea what the reason might be or how to fix this?

Answer 1

Try the following:

◄ and ►

&#9668 and &#9658

Answer 2

I kept hitting this same problem with character after character. In the end I used the same arrow, triangle, pointer for both right and left. In my case I used a right facing arrow for both the right and left pointers. I flipped the left arrow using transform: scale(-1). Now they look identical.

Answer 3

Just repeating Mr Lister's comment as an answer, as it worked for me (vote his comment up!)

"... If all else fails, you could try other shapes, such as the left/right pointing pointer ◄ ► or left/right pointing small triangle ◂ ▸." – Mr Lister

I copy/pasted the pointing pointer characters from this comment and it was a consistent size in FF/Chrome/IE.

P.S. Changing the font family didn't make any difference for me.

Answer 4

Thank you Aye Mon Chit!

I had originally used the following: ◄ - &#9664 and ► - &#9654

And it all seemed to be working fine on all browsers, until i tried it on smartphones. Did not work at all...

So I used the following: ◄ - &#9668 and ► - &#9658

and it works in all browsers, including smartphone internet.

FYI. This page is really helpful. http://graphemica.com/%E2%97%84