<![CDATA[M5. Lcd.textWidth does not center text exactly in the middle]]>I want to write a text centered in the middle. the text has a variable size. with M5. Lcd.textWidth, the text is not centered exactly in the middle (deviation about 5px). I doing something wrong? How can I center the text in height?

void loop() {
M5.Lcd.fillScreen(BLACK); //set the default background color
M5.Lcd.fillRoundRect(20, 50, 280, 140, 15, RED);
M5.Lcd.fillRoundRect(30, 60, 260, 120, 15, BLACK);
M5.Lcd.setTextSize(5);
M5.Lcd.setTextColor(RED);
for (int i=-1500; i <= 2255; i++){
String text = String(i);
M5.Lcd.fillRoundRect(30, 60, 260, 120, 15, BLACK);
M5.Lcd.drawString(text, (int)((M5.Lcd.width()/2)-(M5.Lcd.textWidth(text)/2)), (int)(M5.Lcd.height()/2), 2);
delay(20);
}
}

]]>https://community.m5stack.com/topic/4329/m5-lcd-textwidth-does-not-center-text-exactly-in-the-middleRSS for NodeWed, 22 Apr 2026 01:50:52 GMTSat, 28 May 2022 13:44:11 GMT60<![CDATA[Reply to M5. Lcd.textWidth does not center text exactly in the middle on Mon, 30 May 2022 15:45:05 GMT]]>šŸ‘Thank you!

]]>https://community.m5stack.com/post/17613https://community.m5stack.com/post/17613Mon, 30 May 2022 15:45:05 GMT<![CDATA[Reply to M5. Lcd.textWidth does not center text exactly in the middle on Mon, 30 May 2022 01:56:57 GMT]]>Hello@Stoni99

m5-docsļ¼šLCD
setTextDatum(), drawString(), drawCentreString()
https://github.com/m5stack/m5-docs/blob/master/docs/en/api/lcd.md

:

A. Use the drawCentreString instruction.
The height is therefore adjusted by hand.
drawCentreString : fontname=2

M5.Lcd.setTextSize(5);
M5.Lcd.drawCentreString(text, M5.Lcd.width()/2, M5.Lcd.height()/2 -42 , 2);
or
M5.Lcd.setTextSize(4);
M5.Lcd.drawCentreString(text, M5.Lcd.width()/2, M5.Lcd.height()/2 -34 , 2);

:

B. setTextDatum + drawString + Free_Fonts
Free_Fonts.h : Beautiful font.
https://github.com/m5stack/M5Stack/blob/master/examples/Advanced/Display/Free_Font_Demo/Free_Fonts.h

#include <Free_Fonts.h>

void setup(){
M5.Lcd.setFreeFont(FMB24); // or FM24

void loop(){
M5.Lcd.setTextSize(1);
M5.Lcd.setTextDatum(3);
M5.Lcd.drawString(text, M5.Lcd.width()/2-M5.Lcd.textWidth(text)/2, M5.Lcd.height()/2 -3,1);

]]>https://community.m5stack.com/post/17611https://community.m5stack.com/post/17611Mon, 30 May 2022 01:56:57 GMT<![CDATA[Reply to M5. Lcd.textWidth does not center text exactly in the middle on Sun, 29 May 2022 12:10:07 GMT]]>OK - thank you!
The height is therefore adjusted by hand.

Other question:
I can't append the "W" to the string. It is not displayed. Is there another possibility?

for (int i=-1500; i <= 2255; i++){
String text = String(i)+"W";
M5.Lcd.fillRoundRect(30, 60, 260, 120, 15, BLACK);
M5.Lcd.drawCentreString(text, M5.Lcd.width()/2, M5.Lcd.height()/2-30 , 7); //Text auf x zentrieren (x,y,Schriftgrƶsse)
//M5.Lcd.drawString(text, (int)((M5.Lcd.width()/2)-(M5.Lcd.textWidth(text)/2)-15), (int)((M5.Lcd.height()/2)-40), 2);
delay(1000);
}

]]>https://community.m5stack.com/post/17610https://community.m5stack.com/post/17610Sun, 29 May 2022 12:10:07 GMT<![CDATA[Reply to M5. Lcd.textWidth does not center text exactly in the middle on Sun, 29 May 2022 02:35:46 GMT]]>Hello@Stoni99

  1. Use the setTextDatum and drawString instructions.
    M5.Lcd.setTextDatum(3);
    M5.Lcd.drawString(text, (int)((M5.Lcd.width()/2)-(M5.Lcd.textWidth(text)/2)-15),(int)(M5.Lcd.height()/2-0), 2);

:
2. Use the drawCentreString instruction.
// M5.Lcd.setTextSize(5);
// M5.Lcd.drawString(text, (int)((M5.Lcd.width()/2)-(M5.Lcd.textWidth(text)/2)), (int)(M5.Lcd.height()/2), 2);

M5.Lcd.drawCentreString(text, M5.Lcd.width()/2, M5.Lcd.height()/2-40 , 8);

]]>https://community.m5stack.com/post/17604https://community.m5stack.com/post/17604Sun, 29 May 2022 02:35:46 GMT