Is there a way to force / calculate text to be a maximum of 2 lines?

Solar2D General Questions/Discussion
#1

And if it were to be more than 2 lines, ‘…’ would be appended to the text.

eg: On the device, instead of

Lorem ipsum dolor sit amet, consectetur adipiscing

Lorem ipsum dolor sit amet, sit adipiscing amet

Lorem ipsum dolor sit amet, consectetur adipisci

the resulting text would be:

Lorem ipsum dolor sit amet, consectetur adipiscing

Lorem ipsum dolor sit amet, sit adipiscing amet…

#2

Yes.  Anything is possible with a little work.

You can do this via iteration.

One way to do this is as follows.

  1. Create a blank text object using the options method.  But do not specify a width or height limit.
  2. Split the text you displayed on spaces, generating a table of words/phrases.
  3. Iterate over the table of words/phrases.
  4. On each iteration, keep track of the current text value of the text object and add a new word to the text object.  (Obviously, add spaces where needed).
  5. Measure the text object width.  If the object is too wide, remove the last text element and place a new line in the text instead.
  6. Repeat this on the second line, but instead, stop the iteration and add ellipses to cap the two-line object.

Yes, this is NOT efficient for a lot of text objects rendered all at once, but all devices are plenty fast to do this for a few text objects at a time while leaving you plenty of time to do other work.

If you like this idea but can’t figure it out, I’d be glad to do it as a level-1 hit. Follow directions here if you are interested: https://sellfy.com/p/sank/

#3

I just coded this up (based on my own private libs), so if you do go for the hit, you can have it right away… :slight_smile:

#4

Hi,

I’ve been doing a lot of text formatting lately and yes it is quite easy actually, one just have to remember that text is a display object like almost everything else, meaning its an image.

To wrap text, set the display.newText objects width to your desired width.

To limit the number of lines, you set the object height.

The main problem with this is that there is no way to calculate exactly how high it needs to be for a given font and number of lines. Add to that the issue that each device may handle fonts a little differently, meaning any numbers you find working fine in the simulator and on a win32 build may sometimes not fit perfectly on an android device.

So how to overcome this? Here is the logic I’m using in my current project where I need to handle many different font types and font sizes.

[lua] local fHeights={} local function analyzeFonts() local sample="H/gyqQ,gY" for size=12,32,2 do fheights[size]={} for i=1,10 do local txt for n=1,i do if n==1 then txt=sample else txt=txt.."\n"..sample end end local fnt=display.newText({text=txt,0,0,font=v.font,fontSize=size}) fheights[size][i]=fnt.height display.remove(fnt) fnt=nil end end end analyzeFonts() [/lua]

What I do here is loop through font sizes from 12 to 32 step 2, and for each of these create 10 display objects where i force a new line using “\n”. I store the different heights in the array fHeights.

If I for example want to create a text object and I know I want to set it to use font size 16 and 3 lines, I add “height=fHeights[16][3]” and thats it.

This works perfectly and is blazingly fast as you do it once at startup.

Sometimes you may not know how many lines its gonna take though. For that you need to first create the new text object with the desired width to measure the generated height. If the height is larger than you have set as maximum, you then refer to the fHeights array to find the correct height to use, remove the object and recreate it with the correct height.

Now if only I could figure out how to post code on this forum without it getting messed up…any tips is appreciated cause this manual space inserting is counterproductive.

Happy coding!

EDIT - Dont worry about words being split in the middle, it will only do that if you have a single word that is wider than your object width, which makes perfect sense.

#5

@ anaqim

  • I paste my code into notePad (a non formatting text editor)
  • Do a global replace of tabs with three spaces
  • Select that
  • Click code block button 
  • paste into popup
#6

Thanks for the tip Ed  :slight_smile:

#7

Thanks for both of your replies and info.  Some really valuable advice and tips which I appreciate.

#8

Yes.  Anything is possible with a little work.

You can do this via iteration.

One way to do this is as follows.

  1. Create a blank text object using the options method.  But do not specify a width or height limit.
  2. Split the text you displayed on spaces, generating a table of words/phrases.
  3. Iterate over the table of words/phrases.
  4. On each iteration, keep track of the current text value of the text object and add a new word to the text object.  (Obviously, add spaces where needed).
  5. Measure the text object width.  If the object is too wide, remove the last text element and place a new line in the text instead.
  6. Repeat this on the second line, but instead, stop the iteration and add ellipses to cap the two-line object.

Yes, this is NOT efficient for a lot of text objects rendered all at once, but all devices are plenty fast to do this for a few text objects at a time while leaving you plenty of time to do other work.

If you like this idea but can’t figure it out, I’d be glad to do it as a level-1 hit. Follow directions here if you are interested: https://sellfy.com/p/sank/

#9

I just coded this up (based on my own private libs), so if you do go for the hit, you can have it right away… :slight_smile:

#10

Hi,

I’ve been doing a lot of text formatting lately and yes it is quite easy actually, one just have to remember that text is a display object like almost everything else, meaning its an image.

To wrap text, set the display.newText objects width to your desired width.

To limit the number of lines, you set the object height.

The main problem with this is that there is no way to calculate exactly how high it needs to be for a given font and number of lines. Add to that the issue that each device may handle fonts a little differently, meaning any numbers you find working fine in the simulator and on a win32 build may sometimes not fit perfectly on an android device.

So how to overcome this? Here is the logic I’m using in my current project where I need to handle many different font types and font sizes.

[lua] local fHeights={} local function analyzeFonts() local sample="H/gyqQ,gY" for size=12,32,2 do fheights[size]={} for i=1,10 do local txt for n=1,i do if n==1 then txt=sample else txt=txt.."\n"..sample end end local fnt=display.newText({text=txt,0,0,font=v.font,fontSize=size}) fheights[size][i]=fnt.height display.remove(fnt) fnt=nil end end end analyzeFonts() [/lua]

What I do here is loop through font sizes from 12 to 32 step 2, and for each of these create 10 display objects where i force a new line using “\n”. I store the different heights in the array fHeights.

If I for example want to create a text object and I know I want to set it to use font size 16 and 3 lines, I add “height=fHeights[16][3]” and thats it.

This works perfectly and is blazingly fast as you do it once at startup.

Sometimes you may not know how many lines its gonna take though. For that you need to first create the new text object with the desired width to measure the generated height. If the height is larger than you have set as maximum, you then refer to the fHeights array to find the correct height to use, remove the object and recreate it with the correct height.

Now if only I could figure out how to post code on this forum without it getting messed up…any tips is appreciated cause this manual space inserting is counterproductive.

Happy coding!

EDIT - Dont worry about words being split in the middle, it will only do that if you have a single word that is wider than your object width, which makes perfect sense.

#11

@ anaqim

  • I paste my code into notePad (a non formatting text editor)
  • Do a global replace of tabs with three spaces
  • Select that
  • Click code block button 
  • paste into popup
#12

Thanks for the tip Ed  :slight_smile:

#13

Thanks for both of your replies and info.  Some really valuable advice and tips which I appreciate.