htmlunicodeentitiescss

HTML CSS Unicode "entity" different line height than standard font?

I have this code:

<button class='arrow month'>&#x25C2;</button>
<button name='nv' value='2011' class='month selected'>2011</button>
<button class='arrow month'>&#x25B8;</button>

...to output this:

enter image description here

Everything's groovy, except the unicode "entities" are making the line fatter!

Why is this happening and is there a fix?

To illustrate further, here's the same HTML, with an entity included:

<button name='nv' value='2011' class='month selected'>2011&#x25B8;</button>

enter image description here

Solution

  • It will wholly depend on what fonts you've got. If the browser's default font doesn't have a glyph for character U+25C2, it'll try to fall back to another font that does contain that character. That fallback font might have a different line-height.

    If you want a fixed-height button, ask for it by specifying a fixed height style.