If I take two fonts, 100px size and place them on a page they are aligned on a common baseline. This baseline appears to be ~80px from the top (though it can vary per browser - another issue).
How is this baseline calculated? I have read suggestions such as:
- 2/3 of font size (just a rough approx)
- ascender (wrong)
Both of these fonts have different ascenders yet the baseline is the same - confirmed by looking at the OpenType.js font explorer - the fonts just have different yMax/yMin.
The top pic is my browser and the one with metrics is OpenType.js. They both show a common baseline. In opentype they set the baseline manually and add the ascender/descender after that.
How would a browser determine where to set a baseline for a 100px font? And since I see a ~10px diff in Safari and Chrome I would love to know why that is - are they using different methods and where could I find resources for all common browsers.
I ideally would like some javascript that I can use to determine this programmatically. Failing that some OpenGlyph data that might help and I will make per browser adjustments. I have looked at the OP font data without seeing any info and things like getBoundingBox don't appear to return the data I need (in the above case I get a top value of 5 and a height of 115.
