Search code examples
c++openglfontspositionftgl

Properly position y-axis of font in FTGL


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.


Solution

  • 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?