Properly position y-axis of font in FTGL

1.3k Views Asked by At

Yesterday, I struggled about how to render FTGL font in a window whose origin is at top-left.

Retaining this kind of orthographic settings makes it difficult for me to properly align FTGL font, esp. in y-axis

void enable2D(int w, int h)
{
    winWidth = w;
    winHeight = h;

    glViewport(0, 0, w, h);

    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    glOrtho(0, w, h, 0, 0, 1);
    glMatrixMode(GL_MODELVIEW);
}

Then rendered it like this:

glPushMatrix();
    glTranslated(X, Y + font.LineHeight(), 0);
    glScalef(1, -1, 0); //reverse scaling of y
    font.Render(str);
glPopMatrix();

I try to measure the bounding boxes of different fonts but it gives me inconsistent results.

Here they are:

different font faces Notice the inconsistency of y-position of boxes

And also the code:

glClear(GL_COLOR_BUFFER_BIT);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();

///Draw the fonts
for (int i = 0;i < N; ++i)
{
    auto &X = x[i];
    auto &Y = y[i];
    auto &font = fonts[i];

    glColor3ub(0, 0, 0);
    glPushMatrix();
        glTranslated(X, Y + font.LineHeight(), 0);
        glScalef(1, -1, 0);
        font.Render(str);
    glPopMatrix();
}

///Draw the boxes
for (int i = 0;i < N; ++i)
{
    auto &X = x[i];
    auto &Y = y[i];
    auto &box = boxes[i];

    glColor3ub(255, 0, 0);
    glPushMatrix();
        glTranslated(X, Y, 0);
        glBegin(GL_LINE_LOOP);
        glVertex2f(box.Lower().X(),                   -box.Lower().Y());                       //top-left
        glVertex2f(box.Upper().X() - box.Lower().X(), -box.Lower().Y());                       //top-right
        glVertex2f(box.Upper().X() - box.Lower().X(), +box.Upper().Y() - box.Lower().Y() * 2); //bottom-right
        glVertex2f(box.Lower().X(),                   +box.Upper().Y() - box.Lower().Y() * 2); //bottom-left
        glEnd();
    glPopMatrix();
}

But I want to achieve a box that is totally fitted to the rendered font like this:

enter image description here

I just manually adjust some values to make it fit

Specific question is, how do I calculate y-position of the rendered font in this kind of settings?

I don't know what FTGL::Descender() does but I think it somewhat related to this?

I will accept as answer any links that discusses this kind of topic.

1

There are 1 best solutions below

1
On BEST ANSWER

However, after trial and error, I figured out the fault I am doing.

The box

First of all, I should have consider when doing this kind of coordinate system, that the left-most and upper-most part of the box should be set zero, i.e:

glVertex2f( 0, 0 );
glVertex2f( w, 0 );
glVertex2f( w, h );
glVertex2f( 0, h );

So I would not need to worry about the other things. And from that, I ensure that when translating the font to the specified coordinate, it must be relative to top-left-origin window (no padding, offsets, etc, etc...)

The Font

Now doing the translation in font section, I do this:

float x_offset = (font.BBox(str).Lower().X() * font_scale);
float y_offset = (font.BBox(str).Upper().Y() * font_scale);

glPushMatrix();

    ///the coorinate should now be relative the box!
    glTranslatef( x - x_offset,
                  y + y_offset,
                  0
                );
    glScalef( font_scale, -font_scale, 0); //notice the negative in y

    font.Render(str);

glPopMatrix();

Now it should be look like this

enter image description here

The font that draws outside the box (#6), maybe is due to the style of the font.

Thanks! Hope someone could help by this :D

Update:

There was an error in my previous calculation, anyway, I updated my answer to be more accurate. You can see the changes in my edit history.

Update:

There was still an error here. The FTGL::BBox returns only the current bounding boxes of the current text, w/c the heights may vary when the largest glyph height is not present in the current string. I check the source code again but I cannot find the yMax w/c is the maximum height it could return. However, I can do iterate all over the available glpyhs and get the maximum height there, I think there's an existing functions in freetype that could already do this? Anyone know of it?