LiveCode LessonsHow To - Step-By-Step Guides To Tasks In LiveCode TextHow do I style paragraphs in a field in LiveCode 5.5?

How do I style paragraphs in a field in LiveCode 5.5?

In this lesson we will look at the new field features in LiveCode 5.5.

Create a stack with a field of text

Create a stack with a field of text

In all of the following steps we'll be looking at how to manipulate the second paragraph (or line 3 of field "content"). Each step will have a line of two of code and a screenshot of the results.

Center align our paragraph (textAlign Property)

Center align our paragraph (textAlign Property)

set the textAlign of line 3 of field "content" to "left"

Highlight our paragraph (backgroundColor property)

Highlight our paragraph (backgroundColor property)

set the backgroundcolor of line 3 of field "content" to "200,180,241"

Give our paragraph a strong border (borderWidth and borderColor properties)

Give our paragraph a strong border (borderWidth and borderColor properties)

set the bordercolor of line 3 of field "content" to "30,30,30"

set the borderwidth of line 3 of field "content" to 5

Pad our paragraph from it's border (padding property)

Pad our paragraph from it's border (padding property)

set the padding of line 3 of field "content" to 15

Indent the first line of our paragraph (firstIndent property)

Indent the first line of our paragraph (firstIndent property)

set the firstindent of line 3 of field "content" to 40

Indent our paragraph (leftIndent and rightIndent properties)

Indent our paragraph (leftIndent and rightIndent properties)

set the rightIndent of line 3 of field "content" to 30

set the leftIndent of line 3 of field "content" to 30

Add space above and below our paragraph (spaceBefore and spaceAfter properties)

Add space above and below our paragraph (spaceBefore and spaceAfter properties)

set the spaceAbove of line 3 of field "content" to 18

set the spaceBelow of line 3 of field "content" to 18

Summary

All of the above steps can be gathered into a single routine to set the style of a particular run of text such as the paragraph in this example:

set the textalign of line 3 of field "content" to "left"

set the backgroundcolor of line 3 of field "content" to "200,180,241"

set the bordercolor of line 3 of field "content" to "30,30,30"

set the borderwidth of line 3 of field "content" to 5

set the padding of line 3 of field "content" to 15

set the firstindent of line 3 of field "content" to 40

set the rightIndent of line 3 of field "content" to 30

set the leftIndent of line 3 of field "content" to 30

set the spaceAbove of line 3 of field "content" to 18

set the spaceBelow of line 3 of field "content" to 18

1 Comments

Sean Cole

You can also change many other properties like 'textSize', 'textFont' or 'textStyle["Bold"] in a similar way using 'item', 'word', 'char' and so on. You could therefore highlight individual words based on a search.

Add your comment

E-Mail me when someone replies to this comment