Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

UI tool: draw any text at the best size for any rect

edited May 16 in Code Sharing Posts: 1,277

textFitToRect is a single short function that will draw any given text at the size that best fits any given width and height (I’m sure someone has done this before but I nothing showed up when I searched the forums).

Syntax is textFitToRect(textToFit, x, y, w, h), and you call it inside draw() anywhere you might ordinarily use text().

Running the project demonstrates some user-entered text dynamically growing and shrinking as you change the size of a bounding rect.

@West I feel like you might laugh when you see that I’ve done this.

Update: changed name. Old name was fitText.

Tagged:

Comments

  • Posts: 1,277

    @Simeon there’s a bug here I think you might want to see.

    At certain sizes the text just vanishes.

    On my 12.9-inch iPad Pro the text “try to remember” vanishes when the width and height are both set around 1110, but is visible at both larger and smaller sizes.

  • dave1707dave1707 Mod
    Posts: 9,415

    @UberGoober I don’t know if that’s a bug or not. The disappearing text when it exceeds the width of the screen has been reported many years ago.

  • edited May 14 Posts: 1,277

    @dave1707 It doesn’t just disappear, it reappears when it gets larger.

    Plus the text never exceeds the width of the screen anyway, because the bounding rect is set to have a maximum size the same as the screen dimensions.

    Though I guess you can force it to exceed the width by changing the orientation after you start the project — it hasn’t been set up to use a forced orientation. ;)

  • dave1707dave1707 Mod
    Posts: 9,415

    @UberGoober I'll have to play around with it more to see what’s happening. It’s just that the disappearing text has been around for a long time. Maybe it’s not related to what you’re doing.

  • Posts: 887

    @UberGoober Hehe - wonder where this idea came from ;-)

    I've come across a bug with it:

    expand rectH to a figure around 450 (or greater)
    drop rectW to the minimum value

    It now locks the window into that size and will no longer change with either slider

  • edited May 14 Posts: 1,277
    @West I saw some odd things like that too, the code seems prettty straightforward and I couldn’t tell what caused it. Any clues?
  • dave1707dave1707 Mod
    edited May 14 Posts: 9,415

    @UberGoober Here’s something I posted 4 years ago. Touch just inside a corner and drag to resize the rectangles. Touch the center and drag to move the whole rectangle. When you release, the text will refill the rectangle. Double tap near the top of a window to increase the font size, near the bottom to decrease the font size.

    https://codea.io/talk/discussion/8849/scrolling-text-window
    
  • edited May 14 Posts: 2,348

    @UberGoober - attached a small text utility to fit text as needed. Might complement yours.

  • Posts: 1,277

    @Bri_G the magic seems all in this line:

    fontSize(sW*2/string.len(story[lp]))

    ...can you explain why that works? As far as I can tell it’s just an arbitrary calculation, so I must be missing something. Also, will this work with any font?

    @dave1707 impressive as always! The resizable windows are particularly neat. The scrolling feels abrupt at times and I wn

  • Posts: 2,348
    @UberGoober - the text is stored in the table story. For each line the text size is calculated by dividing twice the screen width by the string length. Found that was the best ratio to get the text fitted. I'll check it again for your question on the font applicability.
  • Posts: 1,277
    ....hmm I just realized if we combined @dave1707’s draggable boxes with my fitText tool we would have a really awesome UI layout tool...

    You could choose any onscreen text you want—say the title of your game—and drag and resize the box to wherever you want, and the text would just make itself fit there, and easy peasy lemon squeezy you got your title screen looking just like you want it in seconds!
  • Posts: 1,277
    Anyone got a good idea of how to make a font chooser?

    I’m thinking the simplest way would be using an integer slider, but I don’t know how to translate the integer into a font, short of manually typing the names of all the fonts into a table... which, you know, yuck.
  • Posts: 887

    @dave1707 that’s a great little utility - thanks

Sign In or Register to comment.