Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(layouts): text truncation & proper text alignment #120

Merged
merged 5 commits into from
Feb 4, 2024

Conversation

ceejbot
Copy link
Owner

@ceejbot ceejbot commented Feb 4, 2024

You can now set truncate to true in a text element, like this:

wrap_width = 130.0
truncate = true

The text is truncated at the given wrap width instead of wrapped.

While I was truncating text and just generally figuring out what these
imgui functions do, I returned to the problem of correctly-aligning
wrapped text. For right- and center-aligned text, this requires
looping through the full text rendering it one line at a time,
adjusting the position of each line to match its bounds. Further,
because imgui does not export any of its word-wrapping implementation,
we have to do additional work to find word boundaries. To do this,
we look for the nearest space preceding the imgui-selected wrap position.
If it's near enough, we break the line at that position, recalculate
bounds, and draw.

I broke out the text rendering cases so that simple cases do the least
work possible, and the space-seeking and bounds-adjusting work is only
done when required. The implementation of drawing text is somewhat
verbose as a result but each case is simple by itself.

Fixes #104
Fixes [#98]

If you add set truncate to true in a text element, like this:

```toml
wrap_width = 130.0
truncate = true
```

The text is truncated at the given wrap width instead of wrapped.
Strictly speaking we should change the field `wrap_width` to
`width`, but I fear breaking existing layouts. Dry-coded, so it's
not going to work, but hey. Why change my habits now?

This should fix #104 when it lands.
Had to use CalcTextSizeA() to do this. I now have the primitives with
which to implement aligned text wrapping, so I'll do that next.
Left-aligned lines go through the built-in imgui
line-breaking algorithm. For right- and center-aligned
lines, we let imgui tell us where the line would break
to hit max width, then walk left a few characters to find
the nearest space if one exists. If we find one, we use
that to break and recalculate our bounds. If we don't,
we use what imgui suggested.

This looks good for all of the cases, I believe.

Hooray!
@ceejbot ceejbot merged commit e17cddb into latest Feb 4, 2024
1 check passed
@ceejbot ceejbot deleted the ceej/text-truncation branch February 4, 2024 02:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add a layout option to truncate text instead of wrapping it
1 participant