Centering text?

Former Member
Former Member
Hello,

I am having trouble centering text, both horizontally and vertically. Here is my code:

var width = dc.getWidth();
var height = dc.getHeight();
var textWidth = dc.getTextWidthInPixels("12345",Gfx.FONT_NUMBER_THAI_HOT)+15; // all +15 does is give some padding to all sides of the box.
var textHeight = dc.getFontHeight(Gfx.FONT_NUMBER_THAI_HOT)+15; // all +15 does is give some padding to all sides of the box.

// Draw White Filled Box.
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.fillRectangle((0 - ((textWidth-width)/2)), (0 - ((textHeight-height)/2)), textWidth, textHeight);

// Draw Black Outline.
dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_TRANSPARENT);
dc.drawRectangle((0 - ((textWidth-width)/2)), (0 - ((textHeight-height)/2)), textWidth, textHeight);

//Draw the time.
dc.drawText(dc.getWidth() / 2, dc.getHeight() / 2, Gfx.FONT_NUMBER_THAI_HOT, "12345", Gfx.TEXT_JUSTIFY_VCENTER+Gfx.TEXT_JUSTIFY_CENTER);


Examples:





If you look closely at the examples, the text isn't centered in the box. Sometimes the text is a few pixels too low, or too high. Mostly often to the right at bit. It differs on each device type.

With my previous watch faces, I had to manually add vertical offsets for the text for certain device types.

Any tips on getting centered text please?