Multiple Lines in display.newText()

Posted by

Corona Daily Build October 13thTaking a look at a few forum threads on the topic, it’s plain to see that there’s a definite need for built-in text-wrapping capabilities in Corona!

Well today just might be you’re lucky day, that is, if you’re one of those people in need of it, because as of Daily Build 638, display.newText() now has the ability to wrap text, and it now properly supports the newline (\n) character! (Be sure to see the Important Notes section at the end)

Here’s the new syntax:

    display.newText( string, x, y, [w, h,] font, size )

To enable the text-wrapping capabilities, you must specify the new w and h arguments, which correspond to the width and height (in pixels) of your invisible text area.

Here’s a few examples to demonstrate the new functionality:

Example 1: Support for the newline (\n) character:

    local textMessage = display.newText( "Hello Corona User!\nHope you're having a great day.", 25, 25, "Helvetica", 18 )
    textMessage:setTextColor( 0 )

The above code should show this in the simulator screen:

    Hello Corona User!

    Hope you're having a great day.

Example 2: Text wrapping

    local multiText = display.newText( "This text should be wrapped according to the specified width.", 25, 25, 175, 400, "Helvetica", 18 )
    multiText:setTextColor( 0 )

The above example will begin wrapping text once it reaches the 175 pixel width we set when calling display.newText().

Important Notes

  • Currently, these changes are only available on the Simulator and on iOS devices (not on Android yet).
     
  • Previously, the newline (\n) character was supported in the simulator but not on any devices.
     
  • If text goes beyond the specified h (height) parameter, text will be cropped, so be mindful of that.
     
  • Fonts vary slightly, for example, line spacing may be different in the simulator vs. on device, and native.systemFont on the Mac is different than in iOS—so be sure to do extensive on-device testing as you go.
     

Remember, at the moment, this feature is only available through the Corona Daily Builds, which you’ll have access to as soon as you become a subscriber, so what are you waiting for?

And speaking of Daily Builds, remember the new homescreen you read about the other day? The ‘New Project’ button, which was previously non-functional, is now working (since build 638)—so go try it out!

Ready to get started?

Create amazing games and apps for iOS & Android

35 Comments

sivluuOctober 13th, 2011 at 10:06 am

outstanding!

W2MDOctober 13th, 2011 at 10:50 am

This is awesome! It’s so simple but so useful! Does this mean we are going to have multi-line text on buttons for the widget api soon too?!

Thy ToeungOctober 13th, 2011 at 11:57 am

Is it possible to not specify the height parameter if we want the text to wrap, but don’t care about the length?

Jason Schroeder App DesignsOctober 13th, 2011 at 12:55 pm

Woot! Thanks, Ansca!

I hate to rain on the multi-line parade by asking for new features, but if it’s possible to work out some sort of “isScrollable” parameter into the new-and-improved display.newText, that would be amazing!

For example, if I have a very long string of text that cannot fit within the defined height, if “isScrollable” was set to “YES”, then the user could scroll the text up and down within the boundaries of the newText display object.

But don’t mistake this request for ingratitude – you guys are improving the SDK daily, and I know all of us Corona devs are grateful!

lano78October 13th, 2011 at 3:28 pm

Jason,
What you’re asking for is pretty much like textbox?

I would suggest that the height is set by the amount of text that is being rendered or have a define this feature as

display.newParagraph(“Lot’s of text”, x, y, width, alignment, font, size)
and in this case the hight is set by how much text is rendered to avoid clipping.

or here’s another suggestion;

widget.newParagraph (title = “String”, x, y, font, size, color = {r,g,b,a}, {paragraph = “lot’s of text”, x, y, width, font, size, color = {r,g,b,a}} )

and in this case the paragraph height is the same as previous example.

Jason Schroeder App DesignsOctober 13th, 2011 at 5:20 pm

@lano78: D’oh! You are right. I tend to avoid native elements when I can because they can’t be placed in display groups, so I hadn’t really checked out the native.newTextBox API. I have now, and it may come in handy. Thanks!

However, since these new and improved text fields can be placed in groups (for better-looking apps!), I’d still love to see some sort of scrolling parameter. And +1 for alignment support and auto-height, per lano78′s comment.

NaveenOctober 13th, 2011 at 5:27 pm

Any chance for getting alignment? It looks pretty bad sometimes when it cuts off a line and starts a new one because a word is too long to fit on the current line.

RubenOctober 13th, 2011 at 6:08 pm

This is a great feature, but as lano78 pointed out, in case you don’t define the height parameter, it should be set by the amount of text entered.

That would allow newText to be used efficiently to make long paragraphs (especially in combo with widget.newScrollView)

HarmikOctober 13th, 2011 at 7:24 pm

Thank you!
Of course I just spent good half of previous day setting all the texts up in the app.
This would have probably saved most of that time :p

Lano78October 13th, 2011 at 11:09 pm

@jason
I’m inserting my “paragraphs” into a scrollView and it look much better than textboxes. There is another option for paragraphs, get CrawlspaceLib. It got a very handy paragraph feature but make sure you remove the text scale part when using it with widgets or else youre in for a big surprise…

VivendoOctober 13th, 2011 at 11:51 pm

Great new feature! Can we please have one more parameter for text justification (left/center/right)? This would make this feature even more useful. I am assuming that for now the text is left-justified?

SpiderOctober 14th, 2011 at 2:57 am

An extra parameter to control line spacing would be very useful.

vweb20October 14th, 2011 at 7:13 am

Can you make it behave like util.wrappedText (widely used util library)? That seems to handle any length text without truncating it. Then we can create this type of display object and add it to scrollview. That way, if the text is long, it scrolls correctly.

It might be a better idea to create Corona approved libraries, instead of changing the core API for such things. (Currently the only option is to find out these libraries from other shared code available on the web). Maybe open source it so people can contribute to it, but corona can keep them in one place.

Steve BOctober 14th, 2011 at 7:33 am

Thank you so much. This is great.

+1 for alignment support and auto-height and for adding this for Android as soon as that is practical, per other’s comments. You folks rock!

WalterOctober 14th, 2011 at 3:01 pm

Thanks for the feedback!

Auto height should be available in the next daily build (640 or after). Pass 0 for the height argument and the height will change according to amount of text — except it will *not* exceed the maximum texture height for the device.

Coming to Android soon.

MarioOctober 14th, 2011 at 10:34 pm

OOOOKKKK, not sure what the heck is going on, but I have the latest build (640) and none of these examples are wrapping anything? Hell, the text doesn’t even show up for me unless I delete the

multiText:setTextColor( 0 )

line….

help?!??!

-Mario

MarioOctober 14th, 2011 at 10:36 pm

Wait…I meant build 639! I’m not time travelling here…..yet. ;)

But yeah, still now text wrapping love in my simulator…on windows….did I miss another important notes section?

Joshua QuickOctober 14th, 2011 at 11:18 pm

Mario,

The simulator for Windows doesn’t have text wrapping support yet because the Windows developer (that would be me) was too busy adding this feature to Android… which you’ll find in daily build 640. :)

AlexOctober 15th, 2011 at 2:33 pm

Mario, the multiText:SetTextColor(0) sets the text color to black, that’s why you are not seeing it (just replace to (255) and you will get it).

Jonathan/Walter, I couldn’t make the \n work at all (copying and paste the above examples). Am I missing something on the newline character?

StefanOctober 16th, 2011 at 12:21 am

Am I correct that libraries such a CrawlspaceLib will need to be updated to accommodate these changes?

PopOctober 17th, 2011 at 2:14 am

Awesome, been waiting for this for a while.

One small request: could there be an optional “line spacing/height” parameter? It’d be great to be able to force the exact same layout across all devices – and also to be able to control the spacing for stylistic purposes.

Dave HaynesOctober 17th, 2011 at 5:23 am

This is excellent. I’m just waiting for the dust to settle on this feature before I start using it, but it will make things so much simpler for me.

HarmikOctober 17th, 2011 at 8:20 pm

This has been a great help, thanks one more time :)

I found that the text width doesn’t scale with other content on different devices. So if it’s set to certain width in pixels the same width will be used also on higher resolution screens making the textfield really small.

Should I place some device check and alter the width for different devices (namely normal and retina displays) or is there a better way to accomplish this?

DanOctober 17th, 2011 at 8:54 pm

Does display.newText() support the Retina display?

DanOctober 18th, 2011 at 6:36 pm

The new display.newText() routine can wrap long stings to create a multi-line string which can effectively be used as a paragraph.

But I couldn’t find a way to space succeeding paragraphs below the preceding paragraph because there’s no way to get the y coordinate of the bottom of the preceding multi-line wrapped string tat was created by display.newText(). I tried using object.contentHeight() but that returns a fixed value which is the 5th (height) argument in the call to display.newText().

Since there’s no telling how high the line-wrapped multi-line string will be in advance, what is required is a dynamic height value, generated by display.newText() depending on how many lines it created. I found that using 0 as the 5th argument causes display.newText() to calculate how much vertical space it needs to create the new multi-line string. Then object.contentHeight() will return the height dynamically. This return value can be used to properly space succeeding paragraphs vertically.

The only problem is that display.newText() outputs a series of warning messages to the terminal, causing a bit of a slowdown. It’d be nice to have an argument that turns these warning messages off.

FYI the messages are:

“WARNING: Due to system limitations, display.newText() height is going to be increased to nearest multiple of 4: 0 ===> 24.”

lano78October 20th, 2011 at 5:43 pm

There’s a little issue with this feature on Retina devices that the text is only half size on both simulator and device.

For those of you who want line breaks just use nn to get that Paragraph look in your texts.

I also seem to have an issue with setting different device fonts and none worked, I tried anything from Helvetica, Verdana-Italic, Zapfino etc.

lano78October 20th, 2011 at 5:45 pm

I forgot to mention, I inserted my Paragraphs into a widget scrollView.

HHOctober 26th, 2011 at 4:36 am

Hi – I’ve just started using Corona so excuse me if this is a stupid question…

I’m using the new fixed width text item for an input box, and I want to add a cursor to show where your next keypress will appear (not using Native UI stuff for this as I need to react to each keypress as it happens).

Previously, when it was just one line long, I was using the text item width and height to show me where the end of my text was, so I could position a cursor there. Now, of course, they’re fixed, so that won’t work.

Is there an way to find the x,y coordinate of the end point of my new, multiline text? Or to find out how many lines the text has wrapped to so I can work it out?

Thanks

HHOctober 26th, 2011 at 5:02 am

Ah… I see Dan asks the same thing, above. Another question – trying this on an Android device (daily build 645) – I’m finding the y position for my text is too high when displayed. The amount ‘out’ it is seems to be relative to the fixed height of the text box (ie the bigger the box, the more out the ‘y’ is).

It’s fine in the simulator, and also on iPhone hardware.

Anyone else found this?

Thanks

HHOctober 26th, 2011 at 5:04 am

I guess I should try a custom font rather than relying on the system ones, so I get a consistent result?

finefinOctober 29th, 2011 at 3:46 am

nice. n works, at least if you use witdh/height parameters for your text field.
the next nice thing would be t for tabulators…

HoanNovember 1st, 2011 at 7:46 pm

Did someone port this to ui.lua. Many people use ui.newLabel…

Luis GalhardoDecember 19th, 2011 at 10:37 am

Lots of “WARNING: Due to system limitations, display.newText() height is going to be increased to nearest multiple of 4: 0 ===> 24.”

Performance slows down…lots of simulator slow refreshes and transition effects stop working or perform real bad

ZiaoJanuary 31st, 2012 at 9:57 pm

I agree, the terminal spam has to be fixed, it causes slowdown when creating a lot of texts on the device itself. At the very least turn it off when height and width are set to 0.

Byron FillmoreMay 4th, 2012 at 11:00 pm

If the orientation changes, is there a way to modify the width to allow additional room for the text?

I tried using txt.width, but it did not work.

How do I modify the width of the display.newText() object after it is created?

Leave a comment

Your comment