TextLine and String have different width when rendered and measured.

[outlineutils]

When rendering text with drawTextLine instead of drawString, the output is differently sized. The difference seems to increase at a fixed rate, regardless of font size, which leads me to believe this is a bug. As you can see in the image, I have rendered the same string in different font sizes, above with drawTextLine, and below with drawString, and highlighted them with different colored rects.

Setup code

String test = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

String FONT_NAME = "Arial";
FontStyle FONT_STYLE = FontStyle.NORMAL;
Font FONT = new SkiaFont(FONT_NAME, FONT_STYLE, 15);
Font LARGE_FONT = new SkiaFont(FONT_NAME, FONT_STYLE, 50);

Paint DEBUG_1_PAINT = new Paint().setColor4f(new Color4f(1.f, 0, 0));
Paint DEBUG_2_PAINT = new Paint().setColor4f(new Color4f(0, 1.f, 0));
Paint MENU_TEXT_PAINT = new Paint().setColor4f(new Color4f(1.f, 1.f, 1.f));

Render code

var c1 = LARGE_FONT.getMetrics().getCapHeight();
var c2 = FONT.getMetrics().getCapHeight();
canvas.save();
canvas.translate(40, 80);
var txt1 = TextLine.make(test, LARGE_FONT);
canvas.drawRect(Rect.makeXYWH(0, -c1, txt1.getWidth(), c1), DEBUG_1_PAINT);
canvas.drawTextLine(txt1, 0, 0, MENU_TEXT_PAINT);
canvas.drawRect(Rect.makeXYWH(0, 0, LARGE_FONT.measureTextWidth(test), c1), DEBUG_2_PAINT);
canvas.drawString(test, 0, c1, LARGE_FONT, MENU_TEXT_PAINT);
canvas.translate(0, 80);
var txt2 = TextLine.make(test, FONT);
canvas.drawRect(Rect.makeXYWH(0, -c2, txt2.getWidth(), c2), DEBUG_1_PAINT);
canvas.drawTextLine(txt2, 0, 0, MENU_TEXT_PAINT);
canvas.drawRect(Rect.makeXYWH(0, 0, FONT.measureTextWidth(test), 20), DEBUG_2_PAINT);
canvas.drawString(test, 0, c2, FONT, MENU_TEXT_PAINT);
canvas.restore();

[outlineutils]

Not sure why my code formatting isn't working

[tonsky]

I think drawString is supposed to be used for debug purposes mostly, I don’t think it does proper shaping. Try rendering smth like AVAVAVAVA and see if kerning is applied.