Skip to content

Bug: Text Width Mismatch Between Tkinter Preview and Pillow Rendering Causes Alignment Issues in Welcomer GUI #2

@muzaffarmhd

Description

@muzaffarmhd

There is a significant discrepancy in how text width (and bounding boxes) are calculated by Tkinter for the live preview in the Welcomer GUI (src/cordctl/gui/welcomer_gui.py) and how Pillow calculates them when generating the final welcome image in src/cordctl/core/clients.py (specifically within the create_welcome_image_from_config function).

This leads to alignment problems. For example, when using the alignment tools (e.g., "Center H") in the GUI, the text appears centered in the Tkinter canvas preview. However, in the final image generated by Pillow, the text may not be accurately centered because its actual rendered width is different.

To Reproduce

  1. Open the Welcomer GUI (cordctl welcome config).
  2. Add a text element.
  3. Set a specific font and size (e.g., Arial, size 28).
  4. Observe its perceived width or use an alignment tool like "Center H".
  5. Save the configuration and generate a welcome image (e.g., using cordctl welcome run --simulate-join).
  6. Compare the text's position in the GUI preview versus the final generated image.

Example Discrepancy:
On a 700px wide canvas/image:

  • A text element with font size 28 might be measured by Tkinter (e.g., via tkFont.Font().measure()) as having a width of approximately 379px.
  • The same text element, when rendered by Pillow, might have a bounding box width of approximately 310px (e.g., via ImageDraw.Draw().textbbox()).

Expected behavior
The text width/bounding box used by the alignment tools in the Tkinter GUI should closely match the dimensions of the text as it will be rendered by Pillow in the final image. This would ensure that alignment actions performed in the GUI accurately reflect the output.

Impact
The current alignment tools (_align_item and related methods in src/cordctl/gui/welcomer_gui.py) rely on Tkinter's text measurement (_get_selected_item_dimensions in src/cordctl/gui/welcomer_gui.py). Due to the discrepancy, these tools do not produce accurately aligned text in the final welcome image, requiring manual trial-and-error from the user.

Possible Solutions/Areas to Investigate:

  • Ensure _get_selected_item_dimensions in src/cordctl/gui/welcomer_gui.py uses a text measurement method that is more consistent with Pillow's textbbox. This might involve using Pillow for measurement even for the GUI preview, or finding a more reliable cross-library measurement technique.
  • Adjust the font loading/handling in either Tkinter or Pillow to ensure more consistent rendering metrics. The get_font_path function in src/cordctl/core/clients.py and font selection in src/cordctl/gui/welcomer_gui.py might be relevant.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workinggood first issueGood for newcomers

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions