Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Tutorial - Understanding Text Bounds  (Read 1844 times)

0 Members and 1 Guest are viewing this topic.

Hapax

  • Hero Member
  • *****
  • Posts: 3422
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Tutorial - Understanding Text Bounds
« on: April 23, 2025, 09:31:55 pm »
Hello all.

I have written a small tutorial to explain how text bounds work for the wiki:
https://github.com/SFML/SFML/wiki/Tutorial%3A-Understanding-Text-Bounds

Hopefully, this can help to reduce the common confusion to how they work.

Feel free to refer to it when people ask about this topic! :)
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

eXpl0it3r

  • SFML Team
  • Hero Member
  • *****
  • Posts: 11192
    • View Profile
    • development blog
    • Email
Re: Tutorial - Understanding Text Bounds
« Reply #1 on: May 05, 2025, 03:37:22 pm »
Nice!

It's something I've been thinking about on how to best integrate into the existing tutorials, since it's a source of error for many.

I find the highlighting using quote blocks having the opposite effect on me. maybe using Alerts, as GitHub Markdown defines them, could be useful element: https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts

Maybe the "Text Bounds" section becomes easier to follow, if you start up explaining what a baseline is and tha it should be advantageous to align text to it. In the past when I explained this, I often used that "Sphinx" image from Wikipedia to explain the baseline concept, but not sure it would fit here: https://en.wikipedia.org/wiki/Baseline_(typography)

Quote
However, with text, the visible text can be offset from that origin. Therefore, its (local) position is almost never (0, 0).
I think here it would help to explain why that offsets exists, before explaining how the position is calculated.
Official FAQ: https://www.sfml-dev.org/faq/
Official Discord Server: https://discord.gg/nr4X7Fh
——————————————————————
Dev Blog: https://duerrenberger.dev/blog/

Hapax

  • Hero Member
  • *****
  • Posts: 3422
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Tutorial - Understanding Text Bounds
« Reply #2 on: May 05, 2025, 10:31:16 pm »
Thank you!

It comes up so often and is something I'd been meaning to do for a while. I thought someone else might have already done it by now.

With the "blockquote" sections, are you suggesting that, for you, they are less noticeable? I agree with this and is the intention. I consider them "notes" and the entire tutorial should be able to be read without them; they are there for extra information. Maybe, "tip" might be appropriate if going along the alert route.

I actually intentionally avoided going into the baseline definition too much since it brings with it questions, namely "how do I find the baseline of my text?" and SFML doesn't actually give the ability to answer this question. The baseline in the example(s) is the bottom of bounds when the string is just "x", for example.
Sphinx is a good one indeed. Capitals, high lower-case letters, tittles, descenders etc.. :)

I thought I had explained why there is an offset but it seems that I had not. Or, at least, not until you slowly get through the examples. So, I have added an extra note to explain the overall idea behind it (immediately after the sentence you mentioned).
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*