文字/标签xul xbl的部分中的文字阴影

Question

I have a list of a bunch of names. As a user types I want to highlight the text matches in the names. (aside: if nothing is found i show "No matches for 'rar'").

This is my goal graphic mockup:

The user has typed "rar" and it has given the matched "rar"s in the names a red outline. I can accomplish this on the whole label with text-shadow: 0 0 1px red but i am not able to do on portion.

I've seen content editable divs http://html5demos.com/contenteditable accomplish this. They can give different font colors to ranges. The xul label i can replace with xbl html textbox etc. I just can't figure it out though.

Thanks

Answer 1

They can give different font colors to ranges.

Those ranges essentially get wrapped into spans or font elements and those get styled. You can probably accomplish splitting text nodes by creating a Range() , setting its start and end inside the text node and then using range.surroundContents() to wrap it in a temporary node to style.

Once you don't need the text shadow anymore you can unwrap the text (by simply replacing the wrapper with its content) and normalize the text nodes to restore the original state.

Maybe there is some way to magically create anonymous boxes (such as CSS uses internally for line boxes for example) but I don't know enough to point you in the right direction for that approach.