Text inside a rectangle?

Audio and Graphics
#1

Hi guys.
I have a small problem that is driving me away a bit of time. I created a library that through

system.getPreference ("Local", "language")

lets me know the user of language.
Thanks to it I will change the words in the game.
But the problem is this:

I would put the word to 'inside of a rectangle of size not variable.
so I would like to know what size to give

display.newText

instead will vary in size strings.
I do not find the right calculations and I also tried with diagonal and with different proportions.
I would get a result like this but very much less expensive:

local rect = display.newRect( 100, 100, 400, 100 )rect:setFillColor( 1, 0, 0 )local text = display.newText( "variable text", rect.x, rect.y, "gameFont", 1 )while( (text.width \< rect.width) and ( text.height \< rect.height) )do text.size = text.size + 1end

can you help me?

#2

display.newText supports multi-line mode. Because of the way it works, it can be set to clip text outside of an area. Add two additional parameters after the X and Y, which are WIDTH and HEIGHT. The output text will clip to whatever you set the width and height to.

Rob

#3

Rob thanks But if I use the simple multiline text is precisely cut and therefore not visible. I would like to see all the text so I need to find a right size. Am I doing something wrong?

#4

There really isn’t a good way to do this. You could use a fixed width font like Courier. Then your text box length will be predictable. But if you use a variable width font, you can guess. In English M and W are the widest letters, while I and l don’t take up much space at all. M and W are roughly square, so if you take the point size as the average letter width (there is spacing between each character), you can get a rough width. Depending on the font, you may need to adjust that up or down a bit. For instance Impact the M/W are roughly 70% wide compared to the height, so you could use fontSize * .7  * numberOfCharacters to predict the length.

Others will create the text, get the size and then destroy it before it’s seen to get more accurate measurements. In this case, I think you want to chop the text off if it will be too long. Then you generate the visible text cut to the length that will fit.

But none of it will be precise.

Rob

#5

I see.
How do you say about the character of the measurements can be a solution but it is very approximate. The problem is that there is never a proportionality between size hight and with text.
For what I also tried to calculate the diagonal but it seems there is not a real solouzione to my problem. with the cycle that I realized I get an almost perfect result, but by testing consumes too.
It seems that I and my memory does not go d agree …

Thanks anyway Rob :slight_smile:

#6

You’d be better off:

  1. Create rectangle

  2. Create text object with some preset font size.

  3. Scale text object to fit rectangle.

    local rect = display.newRect( 100, 100, 400, 100 ) rect:setFillColor( 0,0,0,0 ) rect:setStrokeColor( 1,0,0 ) rect.strokeWidth = 2 local text = display.newText( “variable text”, rect.x, rect.y, “gameFont”, 30 ) local sx = rect.contentWidth/text.contentWidth local sy = rect.contentHeight/text.contentHeight local scale = (sx < sy ) and sx or sy text:scale( scale, scale )

PS - Please put a little more effort into making sure your code blocks (here) can be read.  The one you posted is a blob.

PPS - However, thanks for putting the code in code blocks to start with.

#7

Thanks Roaminggamer.
It is a good idea I had not thought. I thought about changing height or width but not to scale well. I think one of the best solutions to date.
I apologize for our guests and set the code.
I can also ask a opinion on this: https://forums.coronalabs.com/topic/64598-problems-with-memory-and-animations/#entry333558 ?

P.S. in that post I hope I have put it better code

#8

You’re welcome, again thanks for posting in a code block to start (I just wanted to point out it’s always a good idea to go back and read your post to verify it is legible and fix it if not).

Sorry, I skipped that one on purpose because I couldn’t afford the time to dig in and help.  I have got very limited free time bandwidth nowadays.

#9

I see. Thanks anyway, see you soon. :slight_smile:

#10

Hello guys

Sig following your idea I thought of something similar but more effective as this one:

local function locatedSize(obj, rectWidth, rectHeight) local startSize = 0 local endSize = 250 local center = 0 while(startSize \<= endSize)do center = math.round( (startSize + endSize) / 2) obj.size = center if(rectWidth \< obj.width) or ( rectHeight \< obj.height) then endSize = center - 1 else if(rectWidth \> obj.width) or ( rectHeight \> obj.height) then startSize = center + 1 else return true end end end return true end local rect = display.newRect( 300, 600, 200, 100) rect:setFillColor( 1,0,0 ) local text = display.newText( "Variable text", rect.x, rect.y, "gameFont", 1 ) locatedSize(text, rect.width, rect.height)

I was reminded reworking of sorting algorithms.

You must replace the endSize with the highest number of size that you believe will use.

I tried with 250 (which is a pretty big number) and at most you’ll change the text 8 times and not 250(number of hypothetical changes with your algorithm).

I hope you find it useful. :slight_smile:

However, I also saw the other article of the link. I also have problems on that. I hope that someone will respond soon.

-Max

#11

Thanks max. Also yours is good advice. each has its advantages and disadvantages. I think this is still good. For memory I do not know … I did several tests but I can not not leak. Thanks, see you soon :slight_smile:

#12

display.newText supports multi-line mode. Because of the way it works, it can be set to clip text outside of an area. Add two additional parameters after the X and Y, which are WIDTH and HEIGHT. The output text will clip to whatever you set the width and height to.

Rob

#13

Rob thanks But if I use the simple multiline text is precisely cut and therefore not visible. I would like to see all the text so I need to find a right size. Am I doing something wrong?

#14

There really isn’t a good way to do this. You could use a fixed width font like Courier. Then your text box length will be predictable. But if you use a variable width font, you can guess. In English M and W are the widest letters, while I and l don’t take up much space at all. M and W are roughly square, so if you take the point size as the average letter width (there is spacing between each character), you can get a rough width. Depending on the font, you may need to adjust that up or down a bit. For instance Impact the M/W are roughly 70% wide compared to the height, so you could use fontSize * .7  * numberOfCharacters to predict the length.

Others will create the text, get the size and then destroy it before it’s seen to get more accurate measurements. In this case, I think you want to chop the text off if it will be too long. Then you generate the visible text cut to the length that will fit.

But none of it will be precise.

Rob

#15

I see.
How do you say about the character of the measurements can be a solution but it is very approximate. The problem is that there is never a proportionality between size hight and with text.
For what I also tried to calculate the diagonal but it seems there is not a real solouzione to my problem. with the cycle that I realized I get an almost perfect result, but by testing consumes too.
It seems that I and my memory does not go d agree …

Thanks anyway Rob :slight_smile:

#16

You’d be better off:

  1. Create rectangle

  2. Create text object with some preset font size.

  3. Scale text object to fit rectangle.

    local rect = display.newRect( 100, 100, 400, 100 ) rect:setFillColor( 0,0,0,0 ) rect:setStrokeColor( 1,0,0 ) rect.strokeWidth = 2 local text = display.newText( “variable text”, rect.x, rect.y, “gameFont”, 30 ) local sx = rect.contentWidth/text.contentWidth local sy = rect.contentHeight/text.contentHeight local scale = (sx < sy ) and sx or sy text:scale( scale, scale )

PS - Please put a little more effort into making sure your code blocks (here) can be read.  The one you posted is a blob.

PPS - However, thanks for putting the code in code blocks to start with.

#17

Thanks Roaminggamer.
It is a good idea I had not thought. I thought about changing height or width but not to scale well. I think one of the best solutions to date.
I apologize for our guests and set the code.
I can also ask a opinion on this: https://forums.coronalabs.com/topic/64598-problems-with-memory-and-animations/#entry333558 ?

P.S. in that post I hope I have put it better code

#18

You’re welcome, again thanks for posting in a code block to start (I just wanted to point out it’s always a good idea to go back and read your post to verify it is legible and fix it if not).

Sorry, I skipped that one on purpose because I couldn’t afford the time to dig in and help.  I have got very limited free time bandwidth nowadays.

#19

I see. Thanks anyway, see you soon. :slight_smile:

#20

Hello guys

Sig following your idea I thought of something similar but more effective as this one:

local function locatedSize(obj, rectWidth, rectHeight) local startSize = 0 local endSize = 250 local center = 0 while(startSize \<= endSize)do center = math.round( (startSize + endSize) / 2) obj.size = center if(rectWidth \< obj.width) or ( rectHeight \< obj.height) then endSize = center - 1 else if(rectWidth \> obj.width) or ( rectHeight \> obj.height) then startSize = center + 1 else return true end end end return true end local rect = display.newRect( 300, 600, 200, 100) rect:setFillColor( 1,0,0 ) local text = display.newText( "Variable text", rect.x, rect.y, "gameFont", 1 ) locatedSize(text, rect.width, rect.height)

I was reminded reworking of sorting algorithms.

You must replace the endSize with the highest number of size that you believe will use.

I tried with 250 (which is a pretty big number) and at most you’ll change the text 8 times and not 250(number of hypothetical changes with your algorithm).

I hope you find it useful. :slight_smile:

However, I also saw the other article of the link. I also have problems on that. I hope that someone will respond soon.

-Max