Semantic text replacement using css

[nielsoeltjen]

Take for example this header:

Some text to change

…styled like this:

h1 {

text-transform: uppercase;

}

As is very trendy at the moment I wish to replace the cap A with a triangle (Δ aka Delta).

The catch: the text change must be presentational only (no replacing of text in the DOM).

This is where I am at so far:

//Wrap 'a' and 'A' in spans

var text = jQuery('h1').text();

var text = text.replace('a', 'a').replace('A', 'A') ;

jQuery('h1').html(text);

I have attempted a solution using :after to insert the delta and hiding the contents of the span. But any technique for hiding the span also naturally hides the content of :after.

Any thoughts on how to achieve this?

[joshuanhibbert]

So this isn’t ideal, but it works: http://jsfiddle.net/joshnh/TF7je/

You sure replacing the ‘A’ is such a good idea though? It isn’t great for accessibility.

[nielsoeltjen]

Thanks @joshuanhibbert!

I considered adding an extra span as well but was hesitant about adding more markup. Ultimately I don’t want to replace the “a” though, just making it look like it is. Copy-and-pasting text should still return “Some text to change”.

[joshuanhibbert]

Ah, well as we are using display: none; copying and pasting won’t work anyway. Also, I updated the code so that it only queries the DOM once. It’s not a big performance increase in this case, but it is just good practise.

[joshuanhibbert]

Nice one @wolfcry911.

[nielsoeltjen]

Amigos, I thank you for the outstanding work!

[Author]

Posts