vertical align text mac and PC

Question

I am trying to vertically center some symbols inside a box. But I can't get the symbol to be vertically aligned in both OSX and windows

here is a very simple example I made to demonstrate the issue http://dabblet.com/gist/2971548

you will notice that the x is vertically centered in windows but not on OS X. How to workaround this issue?

Answer 1

The difference between what you're seeing in Mac OS X versus Windows is because two different fonts are being used, and those particular symbols are at different heights relative to the baseline. Vertical centering centers the font, not simply the characters in the string.

Your CSS font stack specifies "Helvetica Neue, Helvetica, Arial, sans-serif". Under Mac OS X, Helvetica Neue will be used. Under Windows, Helvetica Neue isn't (usually) present, nor is even plain Helvetica, so Arial is almost certainly being used. Chances are good that you will get different results still on other platforms that have neither one of these fonts available.

The following linked graphics show the symbols from the two fonts superimposed, set to a common baseline. Helvetica Neue is in red; Arial is green. You can see quite clearly that the symbols in Helvetica Neue are quite a bit lower than in Arial:

comparison of plus signs

comparison of multiplcation signs

The best fix here would be to use an @font-face font to ensure that exactly the same font is being used on both (all) platforms. There are a number of free and commercial services that provide font data to do this. I will leave it up to you to search and determine what's best for your particular application.