TextBox anchor_point/anchored_position Doesn't Work Properly

[shubham0x13]

I'm having trouble getting TextBox to center text properly. Even though I'm using align=TextBox.ALIGN_CENTER along with anchor_point and anchored_position, the rendered text still appears off-center (shifted to the right).

Here's the code I'm using:

import board
import displayio
import terminalio
from adafruit_display_text.text_box import TextBox
from busio import I2C
import adafruit_displayio_ssd1306

main_group = displayio.Group()

displayio.release_displays()
i2c = I2C(board.GP7, board.GP6)
display_bus = displayio.I2CDisplay(i2c, device_address=0x3C)
display = adafruit_displayio_ssd1306.SSD1306(display_bus, width=128, height=64)

center_text = "Hello, World"
center_text_area = TextBox(
    terminalio.FONT,
    display.width,  # Maximum text width
    TextBox.DYNAMIC_HEIGHT,
    align=TextBox.ALIGN_CENTER,
    text=center_text,
    background_color=0x000000,
    color=0xFFFFFF,
    scale=1,
)

center_text_area.anchor_point = (0.5, 0.5)
center_text_area.anchored_position = (display.width // 2, display.height // 2)

main_group.append(center_text_area)

display.root_group = main_group

while True:
    pass

And here's the display output:

[cinderblockgames]

Since you're making the width the whole display, you don't want the x coordinates to be centered, just the y.

Modified example:

center_text_area.anchor_point = (0, 0.5)
center_text_area.anchored_position = (0, display.height // 2)

[shubham0x13]

Thanks, that works, I appreciate the help!

However, I ran into another issue: let's say I want to set the width of the TextBox to something smaller, like 80 instead of the full display width. Even when I correctly update anchor_point = (0.5, 0.5) and anchored_position = (display.width // 2, display.height // 2), the text still doesn't appear centered.

[FoamyGuy]

It could be a bug. Can you set a visible background like background_color=0x00ff00 or similar on the TextBox when you initialize it and then post a picture of how it looks? It might be helpful to see both when the width is set to display.width and when it's set to something smaller like 80 or whatever.

That will make it more apparent if the issue is with the TextBox size, placement within the display, or the text alignment within the box

[shubham0x13]

width = 128/max
center_text_area.anchor_point = (0, 0.5)
center_text_area.anchored_position = (0, display.height // 2)

width = 80
center_text_area.anchor_point = (0, 0.5)
center_text_area.anchored_position = (0, display.height // 2)

width = 80
center_text_area.anchor_point = (0.5, 0.5)
center_text_area.anchored_position = (display.width // 2, display.height // 2)

[cinderblockgames]

x_offset is based on self._text_bounding_box instead of the full textbox size. So, if you use left-align within the textbox, the text is centered, but the text isn't centered on the screen when the text is centered in the box (because the box isn't centered on the screen).

Adafruit_CircuitPython_Display_Text/adafruit_display_text/text_box.py

Line 334 in 51ba2d1

x=-self._padding_left + x_offset,

            # Calculate both "tight" and "loose" bounding box dimensions to match label for
            # anchor_position calculations
            (
                box_x,
                tight_box_y,
                x_offset,
                tight_y_offset,
                loose_box_y,
                loose_y_offset,
            ) = self._text_bounding_box(
                text,
                self._font,
            )  # calculate the box size for a tight and loose backgrounds

[cinderblockgames]

Actually, changing that x doesn't seem to have any effect whatsoever.

[FoamyGuy]

I tested this and confirmed there does seem to be a bug with anchor_point / anchored_position for TextBox. I am unsure of root cause yet, but can tell it's not behaving has intended.

It's also unrelated to the alignment, the same issue persists with ALIGN left, right, or center.

[FoamyGuy]

I believe that I understand the cause of this issue now. TextBox._reset_text() was setting self._bounding_box to the wrong width and height values, ones that were calculated dynamically based on the text, rather than using the user specified values. Having incorrect width and height in the _bounding_box then caused the math for anchoring to get messed up resulting int he TextBox not getting placed int he appropriate place.

#222 contains a fix for this issue. If anyone is willing to test please leave a comment over there letting me know if it resolves the issue for you.

[cinderblockgames]

Tested the original example from this issue on a PyGamer and it looks centered to me.

[shubham0x13]

#222 contains a fix for this issue. If anyone is willing to test please leave a comment over there letting me know if it resolves the issue for you.

I tested the fix and it works great for me. Thanks!

[FoamyGuy]

Thank you both for testing!