background color of text with metadata

[bamakojeff]

I am using

Code: Select all

set the backgroundcolor of char X to Y of fld "Z" to "color"

to highlight text in a field. But if I add metadata to the text, then the background color has "gaps" in it - lines one pixel wide where the new background color is not set. This happens whether you use htmltext in the field and have the metadata in <span> tags or you create it programmatically.

So I create a fld "txt" and then in the Message Box I run:

Code: Select all

set the htmltext of fld "txt" to "<span metadata='1'>Lorem</span> <span metadata='2'>ipsum</span> <span metadata='3'>dolor</span> <span metadata='4'>sic</span> <span metadata='5'>mit</span>"

That creates the words "Lorem ipsum dolor sic mit" in the field exactly as you expect.
Then I run:

Code: Select all

set the backgroundcolor of char 1 to -1 of fld "txt" to "green"

But now there are lines one pixel wide in the background color of the text as you can see in the image below.

The exact same thing happens if I add the text to the field as simple (rather than html) text, and then programmatically add the metadata.

Code: Select all

set the metadata of word 1 of fld "txt" to "1"
set the metadata of word 2 of fld "txt" to "2"
...

And even more puzzling, the colorless vertical stripes are not consistent. Each word in the field has metadata attached to it in exactly the same way, but not each word has a stripe in the same position relative to the word itself.

This happens at every level below "line". If you say "set backgroundcolor of byte/char/word..." then there are always the stripes. If you use "line X" then the background of the entire line does change and there are no stripes. But I am looking to "highlight" words in sentences, not whole lines, so I am looking to set the background color at either the character or the word level.

I'm developing on Windows, but if I test it on Android, I see exactly the same thing. If anyone has any ideas of what's going on, I would love to hear them. Or if there is some other way that I can accomplish my goal of "highlighting" text by some mechanism other than "set the backgroundcolor...", that would be great as well.

Thanks all.

Jeff

[bn]

Hi Jeff,

I see the same behavior regarding the backgroundColor you see. And it has bugged me also.

If I understand correctly what you want is to store information regarding certain words for further processing.

LC has the option to setting the textStyle of textChunks (chars, words etc.) to "link". That will set the marked text to the "linkColor". You can control the linkColor by setting it for the stack and also the linkVisitedColor. You can also attach a "linkText" to the marked textChunks. Similar to the metadata you now use.
A linkClicked message is sent when the user clicks on a "linked" textChunk.
The linkClicked message will have as parameter the linkText, if linkText is empty then the text of the linked text will be sent.

You can use the linkClicked message to extract useful information for further action.

Code: Select all

on linkClicked pClick
   beep
   put the target && pClick & cr & the clickChunk & cr & the clickText & cr & the metadata of the clickChunk into field "fRes"
end linkClicked

This handler can be in the field script or higher up e.g. card script. (in my example script it also asks for the metadata which may or may not provide additional information different from the linkText if you desire so.

You can set metadata directly without resorting to htmlText

Code: Select all

set the metadata of word 3 of field 1 to "myMetaData"

You could give it a try and see if that meets your needs.
Kind regards
Bernd

[richmond62]

-
MacOS 14.4

[bn]

Richmond,

That looks very nice.
Now set the metadata of some of the words and see if the colors are still contiguous.

Kind regards
Bernd

[stam]

I too can replicate this on Mac both with htmlText and by setting the metadata of chunks programmatically.

I haven't tested Bernd's workaround (which probably works!) - but the original issue seems like a bug to me and probably should be reported...
It looks like the markers for the metadata inherit color from the field's backgroundColor, rather than the backgroundColor of the chunk they represent.

Stam

[richmond62]

Now set the metadata of some of the words and see if the colors are still contiguous.

That is what I did with 'blue'.

[bn]

Richmond,

try:

Code: Select all

on mouseUp
   repeat with i = 1 to the number of words of field "ff"
      set the metadata of word i of field "ff" to i
   end repeat
end mouseUp

Kind regards
Bernd

[bn]

Hi Jeff,

here is a stack that shows what I mean.

The card script has the logic to process clicks.

Button "cleanFieldTXT" resets the field.
Button "setWordsToLinked" sets up links and linkText
Button "setMetadatafldTXT" sets metadata of the words

Set up the text using the buttons and click on any linked word and see the result in the lower right field.

Kind regards
Bernd

[bamakojeff]

Thank you, Bernd, for creating this stack. I really appreciate all the work you put into helping me.

I also looked at setting the textstyle to "link" for the the highlighting. Unfortunately a link sets the foreground color of the text, not the background color, which is what I want to make the text look "highlighted". And if I use the "link" text style, then I can only have one highlight color, since a stack can only have one link color. If I change the background color, however, then I can have as many highlighting colors as I want. Different colors are helpful as it sets different areas of text off from each other, especially when the two text sections are near to each other.

I have looked at changing the foreground color as an alternative to changing the background color. If I change my highlighting code to say:

Code: Select all

set foregroundcolor of char X to Y of fld "Z" to "color"

then everything works fine. All the words are properly colored.

I've attached two images from my app which which show the difference. This is the first paragraph of the Gospel of John from the Greek New Testament. As you can see, the left screen has changed the background color and the right screen has changed the foreground color. (I removed the metadata so the background does not have the vertical lines.) I would prefer the "highlighting" effect on the left by changing the background color. I think it's easier on the eyes and makes the effect more obvious. But I'll "settle" for changing the foreground color if I can't get this solved any time soon. Having all the vertical lines in the highlighted text looks strange. I'm fear that I will get A LOT of emails from users saying "the new highlighting feature looks really weird on my phone!"

Thanks again for your thoughts on this issue. I appreciate the help.

Jeff

PS - It turns out that it's not just metadata that causes this. I have a '<font color="X">' tag around the verse numbers to change their color slightly from the regular black of the text. When I removed the metadata, there was still a vertical line after all the numbers which are wrapped in the "<font>" tags.

[dunbarx]

Hi.

A kluge would be to overlay a backColored field with the blendLevel of your choice. The dimensions and loc of the field can be easily set to correctly cover the chunk of interest. If that chunk covers more than one line, or if there are additional chunks sprinkled here and there, you will need more fields, but still very doable. The process of creating and placing these fields can be easily automated.

Craig

[bn]

Jeff,

I probably got carried away by how to process metadata/linkText upon user action.

But I am sure you will find a solution for your interface without the backgroundColor.

Kind regards
Bernd

[dunbarx]

I played around with the overlaying of a colored field. Works fine, looks great, and no problem placing and resizing such fields by hand.

But automating that process based on, say, the selectedChunk is not as easy as I thought. There are several ways to get the topLeft of a particular string (foundLoc, selectedLoc), but there is no easy way to get the botRight, and that makes setting the rect of the field difficult.

Still working on it...

Craig

[stam]

PS - It turns out that it's not just metadata that causes this. I have a '<font color="X">' tag around the verse numbers to change their color slightly from the regular black of the text. When I removed the metadata, there was still a vertical line after all the numbers which are wrapped in the "<font>" tags.

Have you submitted a bug report at https://quality.livecode.com ?

[dunbarx]

Hmmm...

Looks like the kluge may be the only way.

Anyone have a clever idea how to find the botRight of a chunk of hilited (or found) text?

If not, the mouseColor could be exploited to scan from the selectedLoc to parts unknown, giving the "size" of the selected text. Then a field could be adjusted to fit and placed over that text.

Craig

[bn]

Jeff,

see edit below

One way to work around the backgroundColor problem with metadata is to use linkText as a property of the word. You just set the linkText of a word and you could handle it just like metaData. As far as I can see there is no functional difference. You do NOT set the textStyle to "link"

Try this htmlText on an empty field by setting the htmlText of the field to the following

Code: Select all

<p><font bgcolor="#DEDEDE">Lorem ipsum <a name="JEFF">dolor</a></font><font bgcolor="#DEDEDE"> sit amet</font></p>

Maybe that is a workaround.

EDIT: it does not always work so it might not be an option. This bug is weird, changing the textSize changes the gap or closes it. Setting one word or a sequence of words makes a difference and so on.

Maybe this is not a viable workaround... Too bad.

Kind regards
Bernd