How to check if an image covers the text?

Hello everyone! I want to change the color of the text that is covered by the image like this:


Changing text is simple using html tags. So the question is: how to know what part of the text is covered by image/rect/etc ? Thanks in advance!

Here is a small example if filler doesn’t move but scales from left side, rightwards.

  1. move the anchors of filler and text to the center-left side of their rectangles (0, 0.5)

  2. combine all anchors to be in the middle of the rect, for both filler and text from their RectTransform.

  3. get “width of filler” / “width of text” percentage ratio every update.

  4. use percentage ratio from 3) to compute which letter needs to be yellow