[Solved] How to style text and add images to Content Area of field?

[ValiantCuriosity]

Hello Again,

Is there a simple way to add text styling and images to the contents area of a LC field? As you see in the following sample from the LC conferences:

I've found reference to adding some styling using the text scripting but these examples seem to be script intensive. They depend on referencing the words in the field. There is no mention of how to handle images within the content area. Styling in HTML5/CSS is fairly simple.

I can't find any examples of how to do this in LC. It would sure make life easier to be able to type into the content area and style the text therein.

My second thought is that maybe the above sample was built in a word processor and pasted or imported somehow. Again, I didn't see anything in the stack, card, or field script.

Any help to raise the eye blinders will be appreciated. Are you tired of my questions yet?

TIA
-Rachel

[bogs]

Well, the part about images in the content area we already discussed sometime back, unless you mean something else

Styling text is something you can do through code, or through preparing the text itself manually, if I understand the question correctly (I might not, due to lack of resources intake at this point ).

Keywords for styling text would be things like htmlText, plainText, RTFText, textColor, textFont, textSize, etc.

In the dictionary, just type 'text', you will find more about text than you could consume easily. Now, if you wanted prepared text to look as it does in a field, then you set the htmlText or RTFText of the field to the prepared text.

Are you tired of my questions yet?

Not hardly

[[-hh]]

The image-in-text example you mention is done with imagesource.

Type put the htmltext of fld "narrativeContent" into the message box and you see how this is done:
You can set the image source "directly" in the htmltext as seen now
or by set the imagesource of char x of fld y to the short id of img z.

[ValiantCuriosity]

Thanks guys.

Sorry @Bogs. I thought I'd checked my previous questions but missed the one on flowing text around an image and justification. I think the answer was over my head when I first asked it. I was approaching LC in the way I would a word processor or maybe CSS. The work around in LC is pure scripting, albeit easier than the way a lot of languages handle strings, but still challenging for me. I'll do some practicing and take a look again at your kind example code.

BTW, where can I actually find/see this code in the conference script? I have looked but don't see anything related to styling the text in the field area.

I really appreciate the command help. Those commands should clear things up for me. The dictionary, as Bogs pointed out, can be a challenge to search through. That is especially true when you don't know the command to search for.

Have a day filled up with laughter.
-Rachel

[bogs]

-hh already answered the question about seeing the code in the conference script, so I'll just submit this little demo to hopefully point out a couple of ways that htmlText can be useful.

htmlTextDemo.zip

Maybe helpful?

(2.11 KiB) Downloaded 283 times

Since you are fluent with html/css/etc, you might find the dictionary entry on htmlText to be a worth while read, especially the amount of tags that you can use that you already know, such as

align="left|center|right" appears if an alignment has been applied to the line.
firstindent="N" (where N is an integer representing number of pixels) appears if the firstIndent has been set for the line.
leftindent="N" appears if the leftIndent has been set for the line.
rightindent="N" appears if the rightIndent has been set for the line.
spaceabove="N" appears if the spaceAbove has been set for the line.
spacebelow="N" appears if the spaceBelow has been set for the line.
tabstops="N" appears if tabStops have been set for the line.
tabAlign="left|center|right[,left|center|right...]" appears if tabAlign has been set for the line.
borderwidth="N" if a borderWidth has been set for the line.
hgrid="true|false" if the vGrid property has been set for the line.
vgrid="true|false" if the hGrid property has been set for the line.
dontwrap="true|false" if the dontWrap property has been set for the line.
padding="N" if the padding has been set for the line.
hidden="true|false" if the hidden property has been set for the line.
bgcolor="#NNNNNN" if a backgroundColor has been set for the line.
bordercolor="#NNNNNN" if a borderColor has been set for the line.

Also, the styledText (see a theme here? ) maybe of some use for you as well. Eventually, to see everything Lc offers in the world of text, including metadata (we didn't cover that one I don't think) and lots of stuff I haven't even seen yet, just type 'text' into the dictionary and spend a day (or month) going through it making little demos

[ValiantCuriosity]

@Bogs,

I was side tracked with "real world" stuff today so I didn't get to work much with chunks, textStyles, etc.I will take a look at your sample code. Thank you. I also found help in the LC Conference on Text & Chunk Expressions (Duh). I am trying to read so many things that sometimes I see only the forest and not the trees. I'm grateful to you and the others here for setting me on the right path.

Oh,...and, I wouldn't call myself any kind of HTML5/CSS/Javascript guru. I am more a "cobbler". I find a lot of things on the internet and cobble them together into some little esoteric apps for iOS. I've learned a little, but not enough. Never enough.

Thanks again. Now, I'll go silent for a day or two while I try to practice some of this.

-Rachel

[bogs]

I wouldn't call myself any kind of HTML5/CSS/Javascript guru. I am more a "cobbler".

Well, to cobble something together, you'd almost have to know how the various parts work

I just meant that the htmlText elements available should be familiar to you, alignRight/middle/left for instance, or 'bgcolor/bordercolor" (something you asked about previously), etc.

I'll go silent for a day or two while I try to practice some of this.

We'll be waiting on the couch

[ValiantCuriosity]

OK @Bogs,
Time to get off that couch!

I've made some good progress in understanding the basics of LC text, but I'm still having trouble with HTMLtext. I am trying to set the HTMLtext in a field when I open the card where the field lives. I was ecstatic when I cut a bit of my html text from one of my apps and pasted it into a field. I started on mainCard and went to the second card. It actually worked. The text was formatted properly.

However, when I went from the previous card to the mainCard and back again to the 2nd card, the field was stripped of the html. It simply displayed as content text without any styling.

Here's my code:

The first mainCard in the stack has only a button to go next card (I've given up on getting nice refreshes in LC. The lack of that continually seems to cause me trouble. I'm used to calling my browser from an IDE and there is a refresh so everything works as I expect. I know this has to be me not understanding LC yet.)

mainCard:

Code: Select all

go next card

At any rate, the second card in the stack has a scrolling field and a button to go to the previous main card in the stack.

The field on the second card has some html text in the Content Area with the normal html tags. ie <p><h3><i> and so forth. The first time, from the browse tool, it works. If I go back to the mainCard and hit the "next" button again, The html tags are stripped away and I just see the text in plain form.

How do I over come this? My user would not want to have to use a button click on the card every time to see the HTML styled text. I think this is a baby coding question, but I'm lost. Maybe it has to do with the tTemp variable. My goal is to show the html text properly every time the user goes to the card.

The second card has the following code:

Code: Select all

on preopenCard 
   put field "Field" into tTemp
   set the htmlText of field "Field" to tTemp
end preopenCard

I understand that we are able to enter everything using code rather than the Content Area. Maybe I'm not supposed to use the Content Area for this type of thing??

Hope you had a nice long rest. Chunks and textStyling were a little challenging for me, but also, a lot more understandable than string manipulation can be. Would sure love to be able to use HTML since I do understand how to style text using the elements there. Although, the built in LC styling isn't too bad.

Thanks again,
-Rachel

[SparkOut]

Hi Rachel
A basic trial would be to

Code: Select all

put the text of field "Field" into tTemp

If that's not the simple fix then I don't know (what you're running up against, nor the solution) without more understanding.

[bogs]

Sorry, I was getting a snack from the fridge

I think you were close, SparkOut was closer, but the text is just the text part.

Code: Select all

on openCard
   put htmlText of field "Field" into tTemp
   set the htmlText of field "Field" to tTemp
end openCard

Text in fields can get a little complex to understand, but it is extremely easy to manipulate even without full understanding. Just wait till you see the things you can get into with metadata of text in fields oh boy!

*Edit - doh forgot to post the demo

htmlTextOnFieldOpen.livecode.zip

htmlDemo

(827 Bytes) Downloaded 281 times

[SparkOut]

I was thinking maybe the field contains the literal html source code including tags, so getting the text of the field is probably (possibly?) what is wanted. Then that "text" can be applied to the destination field as htmltext and see the effect of all those elements.

[jacque]

If the htmltext of the field hasn't changed, there shouldn't be any reason to refresh the card. But I'm not sure what you're doing exactly.

At any rate, there are several text formats: text, htmlText, rtfText, styledText, etc. If you don't specify a format you get plain text without any styling. So in your script, you are putting the plain text of the field into temp and then putting temp back into the field. In other words, that handler replaced the htmlText with plain text. This is actually a quick way some of us use to remove all styling from a field.

[ValiantCuriosity]

I think that I am trying to do a similar thing to what @Sparkout is talking about, but I just want to use one field. So... Html formatted text into field. Then have that field display html text regardless of what card I come from. Does that make sense?

@Bogs, your sample does a similar thing as my sample. Mine displays one time and strips the html thereafter. Yours never displays the styled htmlText. It strips the html tags/elements out of the field. That even happens when I shut down and reload your sample in LC (what I now consider refreshing--boy do I miss a browser refresh like when I'm in an IDE similar to Code or Brackets, etc.) Also, I REALLY don't like having to close out everything from memory each time that I want to load a file. Is there any shortcut key(s)for that? -- just a big grump here.

I've spent another hour and a half this morning trying to get a simple html text to show each time I move from one card to another card. As Klaus mentions in his memory game information, I'm probably just WAY over thinking this (In my case, it could be under thinking).

I've tried using a global variable to save the html tagged text and then loading it into another variable for the field. That doesn't work either. There has to have an easy solution: Displaying styled text from the Content area in html without stripping out the html tags and without using a button on the card to refresh the field

Maybe I just need to give up and go back to fighting with javascript. Blah...

You guys are great. I'm just head banging a lot right now.

TIA
-Rachel

[Klaus]

Hi Rachel,

mnot sure I fully understand your problem, but do not store html source text (htmltext) in a field, and not at all in the same field where you later want to diplay the formatted text in. That is asking for trouble.

Copy your html source code into a custom property like this:

Code: Select all

...
set the cHTMLText of this stack to the text of fld "field with html source code"
...

Or create a new custom property in the Inspector for your stack and simply paste the source code into that cp.

Then you can always use this custom property to fill any field of any card in your stack(s) with formatted text like this.

Code: Select all

on opencard
  set the htmltext of fld "Field FIELD? REALLY? RACHEL! :-)" to the cHTMLText of this stack
end opencard

Advantage of custom properties, they get saved with the stack, if the stack gets saved.
If that was NOT what you were after, please explain, thanks.

Best

Klaus

[bogs]

@Bogs, your sample does a similar thing as my sample. Mine displays one time and strips the html thereafter. Yours never displays the styled htmlText.

That is odd, the picture you posted *is* showing the htmlText and it shows it that way every single time here
I added another field to cover the 'effective' htmlText, just in case that is what you are actually talking about ...

Html and plain and effective OH MY!

No matter how many times I went back to the first card, the 2nd card always shows the htmlText.

Klaus made a good point about custom properties, but doing it this way is certainly workable as well.

I was thinking maybe the field contains the literal html source code including tags, so getting the text of the field is probably (possibly?) what is wanted. Then that "text" can be applied to the destination field as htmltext and see the effect of all those elements.

What Jacque said, and Jacque, just so you know, I mentally pronounce your name correctly every time I type it. I have an unfair advantage, though, my cousin shares your name. Of course, we could start appending an 's' to the end of it to make it more international and make you more of an aquatic adventurer eh

Also Rachel, I'm prettttyyyyy sure when you open a card, such as going from one to another, that card is refreshed by default. Anyone know for sure? The reason I think it is is because the controls on it have to be redrawn each time, i.e. it has to be refreshed by default. I could be wrong though, or maybe not understanding what you mean.