css to replace characters in paragraph tag

Question

Already checked exisitng questions for this, but didn't find an exact match.

My aim is to replace characters (like spaces) on a webpage with a small image using css.

Example:

<p><span>This is a text</span></p>

becomes:

<p><span>ThisIMGisIMGaIMGtext</span></p>

(where IMG stands for a visible image (middot-pic for a space f.e.))

I cannot think of a suitable css selector. But myabe one of you guys (or girls) know a solution. Is this possible at all?

Answer 1

No, css doesn't have this ability. The only such things it can do are text-transform, which can do things like make it all uppercase.

Answer 2

Since you're not having an ID, I assume you want it on all <p><span>...</span></p>. jQuery will help you:

$(document).ready(function(){ 
  $("p span").html($("p span").html().replace(/ /g,'<img src="yourimg.gif" />'));
});

Answer 3

If a monochromatic image will suffice, you could use a custom web font that has the glyph of your choice in place of the usual empty space character (U+0020).