search

raysan5 / raygui

A simple and easy-to-use immediate-mode gui library
zlib License
3.26k stars 280 forks source link

Fix `GuiDrawText()` sometimes drawing out of bounds #367

Closed arngo closed 5 months ago

arngo commented 6 months ago

This fixes an issue where text can be drawn out of bounds if it is wider than the bounds or when an icon is used. Also, if text is center or right aligned, it can be positioned too far left, which is fixed by limiting the x position of the text to the left edge of the bounds.

Before: before

After: (Since the text is wider than the bounds, alignment has no effect) after

Alignment still behaves normally if the text is not too long: alignment

raysan5 commented 6 months ago

@arngo Thanks for the review! Actually the overflow was supported on pourpose because there was some situations (I think it was GuiCheckBox, GuiSlider) were control bounds do not considered the label properly... did you check this change effect with other controls?

Still, probably a good idea to review it...

Another option is adding ellipsis ... at the end of the word to note it in an elegant UI way...

arngo commented 6 months ago

If I understand your concern correctly, those controls shouldn't be affected since the text bounds are separate from the control bounds themselves (see screenshot below). What this PR fixes is when text is too long for the text bounds, the code which adjusts the text x-position considers the entire text width, even though the function stops rendering characters when it gets longer than the text bounds width. If you look at the first image I posted, for the right-aligned buttons, the text is shifted left to make space for the full string "qwertyuiopasdfghjklzxcvbnm", but "vbnm" doesn't get rendered, so there is empty space. I hope I explained that well.

Here's a screenshot of the controls_test_suite example with text bounds debug mode on: image

Another option is adding ellipsis ... at the end of the word to note it in an elegant UI way...

That's a good idea, here's how it looks now: image Though with GuiTabBar it gets covered by the [x].

raysan5 commented 5 months ago

@arngo You are right, text bounds on GuiTextBox()/GuiSlider() are managed separately, I think I got some related issues in the past (that were solved) and I didn't remember it correctly.

Also, thank you very much for the ellipsis improvement! Overall this is a great improvement! Thanks! 😄