Text rendering on iOS SwiftUI: Rendering text beyond container’s bounds?

Martin Wenzel
Martin Wenzel Posts: 57
in Font Technology
Does anyone know if I can force iOS’s SwiftUI to render text beyond a container’s bounds, similar to what you would do in CSS using overflow: visible?
Tagged:

Answers

  • Michael Rafailyk
    Michael Rafailyk Posts: 208
    Hi Martin. Perhaps there aren't many iOS developers here, and something like StackOverflow will be a better place for asking this. Alternatively, if you ask the same question to ChatGPT or similar AI (if you're o'kay to using it), it will provide you ready made solutions right away. A quick guess is a parent container could cause the clipping.
  • Roel Nieskens
    Roel Nieskens Posts: 203
    It's a common issue of UILabel. We ran into this with Font Awesome as well. There are a few workarounds though, this Stack Overflow is a good start for some of those: https://stackoverflow.com/questions/36176356/uilabel-subclass-text-cut-off-in-bottom-despite-label-being-correct-height
  • Martin Wenzel
    Martin Wenzel Posts: 57
    Hey @Michael Rafailyk and @Roel Nieskens, thanks for the pointers! 
    My issue is similar yet different: The “* i)” in my example (where I'm stacking glyph elements) defines the width of the visible container, this causes the “K” in “HRK” to be cut off in SwiftUI’s rendering. Like in any web browser (see screenshot) I would like to have it rendered in its entirety.



    I'll dig and report back.
  • Martin Wenzel
    Martin Wenzel Posts: 57
    Michael Rafailyk said:
    Hi Martin. Perhaps there aren't many iOS developers here, and something like StackOverflow will be a better place for asking this. Alternatively, if you ask the same question to ChatGPT or similar AI (if you're o'kay to using it), it will provide you ready made solutions right away. A quick guess is a parent container could cause the clipping.
    Yes, we did try ChatGPT but the answer it had produced was wrong, which is not uncommon. I give it a shot at StackOverflow.
  • Michael Rafailyk
    Michael Rafailyk Posts: 208
    edited September 29
    So, you need to:
    1. Prevent words (with spaces between them) from breaking the line.
    2. Allow the text to overflow the container horizontally.

    In CSS it is
    white-space: nowrap;
overflow-x: visible;
    I hope this helps to formulate the problem more precisely.
  • Martin Wenzel
    Martin Wenzel Posts: 57
    edited September 29
    In my case the “overflow-x” is the issue. It's this behaviour we can't reproduce in SwiftUI on iOS. The “nowrap” is not the problem here, that works as it should.


Categories