nanovg icon indicating copy to clipboard operation
nanovg copied to clipboard

Font size

Open ytsarko opened this issue 8 years ago • 7 comments

Hi!

In what units does nvgFontSize receive font size? Documentation says that

if you set font size to 12, which would mean that line height is 16, then regardless of the current scaling and rotation....

But it looks like it is quite opposite: rendered text height on screen is almost twice smaller than set using that function:

nvgFontSize(ctx, 14) makes barely readable text, although in another system windows (Linux Mint) 14 font size looks very decent: 14

nvgFontSize(ctx, 24) makes more good looking results: 24

The library is compiled with -DFONS_USE_FREETYPE

$ inxi -F

Graphics: Card: Intel Xeon E3-1200 v2/3rd Gen Core processor Graphics Controller Display Server: X.Org 1.15.1 drivers: intel (unloaded: fbdev,vesa) Resolution: [email protected] GLX Renderer: Mesa DRI Intel Ivybridge Desktop GLX Version: 3.0 Mesa 10.1.3

ytsarko avatar Oct 12 '16 13:10 ytsarko

It's in "display units", that is, the same ones you use to draw lines and stuff. If you have retina display, then you must set the pixel ratio correctly (see the demo), it affects the font size too.

memononen avatar Oct 13 '16 02:10 memononen

@memononen Ok, that is fine. But in this case if I am running on ordinary non-retina display, the ratio should be 1:1, and, consequently, 14px height font should be somewhere around 14 pixels, but not 7-8 as in the first screenshot?

ytsarko avatar Oct 13 '16 06:10 ytsarko

Im seing this same issue, and have the same question...

topisani avatar Dec 05 '19 13:12 topisani

I was having the same issue. What I found is, that the "font size" is not what you normally would call the font size. I don't have a fitting name for the value NanoVG uses, but anyway you have to calculate that value. You can do so, by extracting the ascent and descent as well as the unitsPerEm from the TrueType Font file. I have not found a way to obtain these values from NanoVG itself.

The TTF file consists out of tables, where each table has a name and holds a predefined set of values. You can find the specification here. The ascent and descent are located in the hhea table. The unitsPerEm are part of the head table.

The ascent and descent are specified in fUnits (signed 16 Bit integer). fUnits have to be converted to pixels using the unitsPerEm (unsigned 16 Bit integer) and the following formula:

fUnits * ((fontSize * dpi) / (72 * unitsPerEm))

The fontSize in this formula is the one you would normally expect to specify. The dpi seems to be constant for NanoVG as it already does scaling, so it's also 72

Using this formula you can convert the ascent and descent and use these values to calculate the "font size", that NanoVG requires, by applying the following code:

float fontSizeToNVGFontSize(float fontSize, FontInfo *fontInfo) {
    int const dpi = 72
    float pixelsPerFUnit = ((fontSize * dpi) / (72 * fontInfo->unitsPerEm))
    return fontInfo->ascent * pixelsPerFUnits - fontInfo->descent * pixelsPerFUnits
}

For example, font size 12 in Roboto translates to roughly 14 in NanoVG "font size" units.

kralliv avatar Apr 12 '20 11:04 kralliv

@kralliv Is this still the case after https://github.com/memononen/nanovg/pull/558 ?

memononen avatar Apr 13 '20 19:04 memononen

@memononen I cannot answer that question, as I am using nanovg as a part of a distribution. I currently do not know the bundled nanovg version, nor can use I a more recent version.

kralliv avatar May 31 '20 14:05 kralliv

I tested this with and earlier version which had this issue, and can confirm that it now works as expected for me (macos, GLFW, Roboto font).

johanobergman avatar Dec 16 '20 13:12 johanobergman