Rendered text width does not seems to work for monospace fonts

[blemasle]

Hi,

I'm trying to use a variation of the Inter font where tnum (Tabular number) as been enabled.
This should give me a monospace font for numbers only.

Regular font

Front with Tabular number enabled

Sadly, the computed rendered text width does not seems to take the monospaced character width into accounts, making alignments with BR_DATUM impossible. It seems to be based on the drawn pixels rather than the actual character width.

Is there any way to achieve BR-DATUM alignments in my case ?

sprite.loadFont(InterSemiBold32pt);
sprite.createSprite(100, 32);

sprite.fillSprite(TFT_BLACK);
sprite.setTextColor(TFT_WHITE);
sprite.setTextDatum(BR_DATUM);

static char str[10];    

for(int i = 0; i < 10; i++) {      
    sprintf(str, "%02d", i);
    int width = sprite.drawString(str, 100 - 5, 32);

    Serial.print(i);
    Serial.print(": ");
    Serial.println(width);
}

Output :

0: 41
1: 36
2: 41
3: 41
4: 41
5: 41
6: 40
7: 40
8: 40
9: 41

I've added the font .otf and .h files in a zip so you can test for yourself.

Regards

[Bodmer]

Try drawNumber(..) as that has an "anti-jiggle" feature.

[blemasle]

Thanks for the suggestion.
Sadly I don't think I can use drawNumber as I print a formatted time string using %d:%02d.%03d 😕
The workaround would be to print each time component number separately, but It would require more fiddling with coordinates to put things right.

Right now I'm using the above above to apply a dirty offset trick based on the last string character. It's ugly, but it's working perfectly 🤷

switch(value[strlen(value) - 1])
{
    case '1':
        offset = 5;
        break;
    case '6':
    case '7':
    case '8':
        offset = 1;
        break;
}

_spr->drawString(value, width - offset, height);

[Bodmer]

There is a protected variable in the code called isDigits which forces use of the glyph spacing, example here:
https://github.com/Bodmer/TFT_eSPI/blob/master/TFT_eSPI.cpp#L2923

If you change to public then you have access to this control flag. drawNumber and drawFloat functions use it to reduce/avoid digit jiggle for changing numbers. The drawString function uses the glyph bit image width deliberately by design, so text can be tight up against bounding box edges.

[blemasle]

Interesting. Rather than modifying the lib (which would made the build not reproducible on another machine), I saw that the condition is valid for character but the last one.

Another trick to get the same effect is to put a space after the last digit, and to offset the rendering by that much space.
At least it is a constant offset. I tried to use blank, zero width characters but they are all rendered as square boxes by the lib as far as I can tell.

It would be neat if this behavior could be set natively by the user code rather than relying on drawNumber, drawFloat etc. Their are many reasons for not using those functions and to rely on formatted strings instead.

[Bodmer]

I will consider this further and add as a TODO.