Question

One thing I’ve seen in some Desktop applications is the ability to change the color of text as the background changes — to effectively have multiple colors on a single character. I’ve seen this most commonly with progress bars that display the percentage inside the bar. Generally a darker background color will be used as the progress bar color, and as it progresses, the dark color doesn’t contrast enough with the dark text, so the text color changes as soon as the bar overlaps with the text. This image should explain what I mean:

As you can see, the text is black when it’s at 0% — when there is no dark background. When the background image fully progresses to 100%, the text is completely white. But in the middle, as you can see at 50%, the text is half black/half white, and it’s actually split on the “0” character in this example.

Is there any way to do this at all on a webpage? CSS, Images, Jquery, otherwise? (Preferably not Flash or a Java applet though — I’m really wondering whether an HTML-based solution is possible.) Thanks!

Answer 1

I’ll get you started:

1. Create two equally sized “progress bars” (divs). Set their size to the full width they would be if they were at 100%.
2. Set one bar to black text with a white background and the other to yellow text with a blue background, as per your example above.
3. Set the yellow/blue bar in a parent div and increase the width of the parent on every percentage increase. Position the parent above the black/white bar.
4. Also on every increase, update the labels of both progress bars to represent the percentage.

That will simulate the same effect without having to manually paint half a character. It will be difficult in CSS because you will have to position one over the other.

The benefit of doing it this way is that you can easily display half-painted characters. There is already a jQuery progress bar you can use, though.