Highlight selected text

newbie-question
advanced-prototyping

#1

Hello guys,
I have an example: if I have a text and when I’m going to select one (random) word from the text. Is there a possibility to make it highlighted for example with the green background


Find and highlight text on the page
#2

This is a good challenge for Axure. The short answer, as far as I know is “no.” There is certainly nothing built-in which would allow for highlighting the background of only a portion of text, like a keyword, on a widget.

I think it might be technically possible with javascript and CSS injection (a method which is not supported by Axure.) While text (foreground) color can be styled, the background of text values cannot be styled; only the background of the widget itself. So to achieve a background highlight for a portion of a string, I think the widget containing the string would need a transparent background (easy) and a second widget, serving as the color highlight block would need to be sized to fit the keyword and moved behind the keyword (difficult) --or in front with partial transparency. The trick would be determining the pixel location of the start of a word in a string and the end of a word in that string, as well as the pixel height of a line of text, and if the text block wraps, on which line the word occurs. Easier if the font is fixed, like Courier New, but not so easy for proportional fonts (just about everything else.)

Thinking about this led me to a relatively straightforward solution to highlight the text itself–the foreground color, by using the built-in string functions and rich text styling in Axure. This demo will allow a user to enter any text into a search field and if found in the paragraph will highlight that word in orange. Perhaps this is close enough for your needs.

highlight word in text.rp (56.5 KB)


Rich text styling
#3

You haven’t really provided any information about how this would be used, but you could just make a bunch of widgets, each with one of the words on it, add a selected state to each that changes the background color, and then randomly set one to selected upon some event.


#4

Ha… very simple, but tedious to set up. :fearful:
I did try this out for my “search and highlight” example and well, it works. I took two sentences of the Lorem Ipsum paragraph, separated each word to its own widget and added ability to click the word to toggle selection. To search the text block for a specific word, each “word widget” gets rotated (by 0 degrees, thus a “fake rotation” just to trigger the Rotated event for that widget) --which triggers it to compare its text against a search field, selecting itself if a match. To help with this, all the text widgets are grouped together so only that group (as one target) needs to be “fake rotated”. See Page 2 of this updated file.

highlight word in text.rp (93.6 KB)


#5

Hah yes, tedious indeed. But pretty straightforward at least. With a large body of text I probably wouldn’t do it, but if it was 20 or less words I would.


#6

@flngblsd there is an easy solution with only 3 rows of code, but once again, it’s the power of Javascript and not Axure’s built-in functions

com-video-to-gif%20(1)

Highlight background.rp (64.1 KB)


#7

It’s actually looks interesting. Thanks :slight_smile:


#8

@steven.wang, This is pretty slick. Could you use something like this to satisfy the original request–highlighting a “random” --or rather, specific word, character/set or phrase? For example, in your text block, highlight all instances of “dolor” upon a button click.


#9

@mbc66 yes, it’s also possible with Javascript

Highlight background.rp (64.1 KB)