Styling Words in a Text String

Getting Started Newbie Questions
#1

I have a recipe app.  I am trying to style the individual words in the Recipe Title.

The recipe titles are pulled from a database and then displayed using the tableView widget.

I want to stye the first word in the title differently from the rest.  For example . . .

“Asian Beef Lettuce Wraps”   

I want “Asian” bold type and green.  “Beef Lettuce Wraps” normal type, black.

I figured out how to separate the first word from the rest of the title (“listRecs[idx].name” is the Recipe Title variable):

        local titleLength = string.find(listRecs[idx].name, " ", 1)

        local titleFirst = string.sub(listRecs[idx].name, 1, titleLength )

        local titleRemain = string.sub(listRecs[idx].name, titleLength )

I thought that would be the hard part.  What I can’t get right is putting the title back together.  

The obvious way was to use display.newText on each the two pieces of the title.  Problem is when I have a lengthy title like “Asian Beef Lettuce Wraps.”  It looks like this on screen:

Asian Beef Lettuce

Wraps

See how “Wraps” aligns itself under Beef?  Yeah, no bueno.  Since Asian is it’s own display.newText, Corona won’t word wrap “Beef Lettuce Wraps” under “Asian.”  And the y axis gets all screwy too. 

What I want is:

Asian Beef Lettuce

Wraps

My other thought was to take each piece of the title, style it with the bold and color and concatenate the two pieces into one string and then use display.newText.  But I couldn’t figure out how to do that. 

Anyways, if someone could point me in the right direction it would be appreciated.  

#2

The official answers are.

1.  Code your text in HTML and use a native.newWebView() to show the content.  This will let you use HTML, CSS and JavaScript as necessary to format your data.

2.  Use display.newText() but you will have to have different objects for each thing you want to bold, color or use a different font.  Kind of a pain, but it’s the way display.newText() works.

The unofficial answer is to search the forums for “formatted text” and see if you can find the forum thread where a community member put together a text library that allows you to do some HTML type markup on text that is rendered with display.newText().  I’ve not looked at it, nor in anyway can we at Corona Lab’s support something a community member provides, but it may be the thing for you.

#3

@davepmoll,

Hi.  This might provide you a starting place: http://forums.coronalabs.com/topic/36577-mltext-for-corona-sdk-released/?hl=mltext

Tip: Start with native fonts and then try custom fonts.  I encountered wrapping issues with some custom fonts, and never determined the source of the issue.

#4

Thanks guys.

#5

The official answers are.

1.  Code your text in HTML and use a native.newWebView() to show the content.  This will let you use HTML, CSS and JavaScript as necessary to format your data.

2.  Use display.newText() but you will have to have different objects for each thing you want to bold, color or use a different font.  Kind of a pain, but it’s the way display.newText() works.

The unofficial answer is to search the forums for “formatted text” and see if you can find the forum thread where a community member put together a text library that allows you to do some HTML type markup on text that is rendered with display.newText().  I’ve not looked at it, nor in anyway can we at Corona Lab’s support something a community member provides, but it may be the thing for you.

#6

@davepmoll,

Hi.  This might provide you a starting place: http://forums.coronalabs.com/topic/36577-mltext-for-corona-sdk-released/?hl=mltext

Tip: Start with native fonts and then try custom fonts.  I encountered wrapping issues with some custom fonts, and never determined the source of the issue.

#7

Thanks guys.