How to Calculate Descender Height in JavaScript

How to calculate descender height in javascript?

This is possible: use this library: baseline ratio, or typography.js Insert two spans into a container div, with 0px font size and a large font size like 100 or 2000, call getBoundingClientRect();, get difference in height, and divide by the bigger ones height. The 0 px font lies on the baseline. This gives baseline ratio, percentage of ascender and descender.

How can I calculate the size of font when using different font-types?

Don’t you also need to add it’s x-height?

No, in the article you can read that:

based on its relative units, metrics of the fonts are set (ascender, descender, capital height, x-height, etc.). Note that some values can bleed outside of the em-square.

x-height is one of metrics that we can use but it's already included in the sum of ascender + descender

Then you can read:

We can also predict that capital letters are 68px high (680 units) and lower case letters (x-height) are 49px high (485 units). As a result, 1ex = 49px.

^{https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align}

So the content area is the sum of ascender and descender (110px + 54px) and the x-height is the size of lowercase letters which is only 49px and already included in the content area

Is it possible to more accurately measure SVG text height?

No. All the SVG DOM methods (getBBox(), getExtentOfChar()) are defined to return the full glyph cell height. That extra space above the cap height is allowance for taller glyphs - such as accented capitals. I think this is true for HTML DOM methods as well.

There are, however, JS libraries around which may be of use. For example:

https://github.com/Pomax/fontmetrics.js

I have not used this library myself, so I can't tell you how reliable or accurate it is.

---

Related Topics