Font rendering, how do you align glyphs of a font?

Question

I'm trying to render text quad using texture generate by BitmapFontWriter of libgdx. For the font I can get size, PaddingTop, PaddingRight, PaddingBottom, PaddingLeft, LineHeight, CapHeight, Baseline, Ascent, Descent.

For each glyph I can get u, v, width, height, x offset, y offset, x advance

The chars rendered are OPQZ[\\]^_`abcdefg你好,. If I just render the quad. I get:

Q, g and the `are definitely incorrect. The brackets and notdef are a little large. The only thing that I find meaningful for me is y offset. If I shift the quad with it, I get:

Q is not changed at all. g gets slightly better. Lots of them get worse.

Answer 1

Will answer by linking to a few resources, but effectively, you need to create an offset for each font. By the looks of it, you aren't quite doing the maths right on each glyph, which means that they will look like they are jumping up and down.

To work out the correct size, you will need to know the base height of the font (the reference height) then subtract the height of the glyph from reference to get the offset value. intended position = actual position + offset. In this case the offsety = (lineheight - y offset) or something similar, the xoffset will also be involved

This has been solved a few times by different people, I in particular started with Codehead's Bitmap Font Generator with it's file format and loaders to guide you through -> http://www.codehead.co.uk/cbfg/

Or you can go more complex and start using Heiro's SDF font generator which has the file format included. See here -> https://github.com/libgdx/libgdx/wiki/Hiero

The links I have posted above will help you understand some of the principals of loading in font sheets. But in general, each glyph could be represented by a container class.

Good luck