How to apply a style to a single special HTML character across the page

Question

We've got a client who want's to superscript to "registered trademark" (®) character across their website.

The website is CMS based and not only are they having trouble consistently superscripting characters but the superscript styling doesn't carry across to any CMS generated page titles etc.

I'm wondering what are the possible/ best ways to achieve this:

• Can CSS be used to apply a style to a specific special character?
• Using jQuery to apply the style post page load.
• Extending the template parsing engine (Silverstripe)

Any ideas are appreciated.

Solution 1

I dont believe it can be done with CSS alone.

I would use jQuery to find and replace the ® content with <sup>&reg;</sup>

There is a similar question below with a correct answer on how to do this (saves me the trouble):

Altering registered symbols (R)

Solution 2

Unfortunately, I don't think you can just select certain characters with only CSS.

However...

1. There is a CSS rule for superscript, and it is:

   vertical-align: super;
   

2. This jQuery works:

   $(document).ready(function() {
      $('*').each(function() {
       var n = $(this).html().replace(
           new RegExp('®','g'),
           '<sup>®</sup>'
           ).replace(
           new RegExp('&reg;','g'),
           '<sup>&reg;</sup>'
           );
       $(this).html(n);
     });
   });​
   

   • jsFiddle example: http://jsfiddle.net/Fwjd4/

I hope this helps!