Looking ahead, I am displaying an issue where the colors are almost perfect, but when different percentages are applied, some or all of the text becomes obscured.
My goal is to assign the font color based on the background difference. I vaguely remember seeing something similar in DHTML many years ago. The desired outcome is as follows
- In a 50% sample, the '5' should be white and the '0' should be black.
- In a 75% sample, the '75' should be white.
- In a 20% sample, the '20' should be black.
I believe there is a way to achieve this using CSS/CSS3, but resources seem scarce.
The style information generated should be within the 'p' style in the CSS file without any tricks like splitting data or manipulating HTML with JavaScript / etc. The number inside the <p> element should remain whole.
body {
background: #000000;
}
p {
background: #ffffff;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAA1BMVEVilQmZw+RvAAAAAXRSTlOF3TSvyQAAAD1JREFUeNrtwQENAAAAwqD3T20PBxQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPBmnQgAAd4aVNwAAAAASUVORK5CYII=");
background-repeat: repeat-y;
background-size: 0% auto;
color: #ffffff;
padding: 5px;
text-align: center;
border: 1px solid #3E8096;
display: block;
}<p style="background-size: 50% auto !important">50</p>
<p style="background-size: 75% auto !important">75</p>
<p style="background-size: 20% auto !important">20</p>Note:
I considered adding a drop-shadow, but it would distort the appearance especially for white fonts. Another option was putting the text in a border, but the ideal scenario is for the font to adjust according to the background.