Multiple Lines in display.newText()
Taking 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:
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:
textMessage:setTextColor( 0 )
The above code should show this in the simulator screen:
Hope you're having a great day.
Example 2: Text wrapping
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!
outstanding!
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?!
Is it possible to not specify the height parameter if we want the text to wrap, but don’t care about the length?
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!
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.
@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.
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.
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)
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
@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…
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?
An extra parameter to control line spacing would be very useful.
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.
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!
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.
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
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?
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.
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?
Am I correct that libraries such a CrawlspaceLib will need to be updated to accommodate these changes?
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.
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.
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?
Does display.newText() support the Retina display?
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.”
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.
I forgot to mention, I inserted my Paragraphs into a widget scrollView.
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
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
I guess I should try a custom font rather than relying on the system ones, so I get a consistent result?
nice. n works, at least if you use witdh/height parameters for your text field.
the next nice thing would be t for tabulators…
Did someone port this to ui.lua. Many people use ui.newLabel…
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
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.
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?