How to apply a style to a single special HTML char

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.

Answer 1

• I don't think you can do this will css alone
• Using jquery/javascript/css you could create a class containing the style information for the character then have jquery parse the file section and wrap the character inside <span></span> tags with that css class applied
• I know nothing about silverstripe so I cant comment on its usage

Answer 2

Strictly speaking you cannot create "super-script" with any single CSS property (there is veritcal-align "super", but it doesn't change the size or style of the characters, only it's position relative to the text baseline). However, there are ways to accomplish this successfully that I have tried before.

First of all, as the two other posters have mentioned, you'll need to target the symbol somehow. If you can wrap all ® characters with markup, then the rest can be easily done with CSS. For example:

When you have <sup>&reg;</sup> you can simply add these styles to your stylesheet to get a desired effect:

<div>
<p>This is some crazy text brought to you by my Company<sup>&reg;</sup><p>
<div>​

div{
 background:#000;
 width:80%;
 height:80%;
 padding:10% 10%;    
}
p{
 background:#4d4d4d;
 padding:10% 20%;    
 color:#fff;
 font-family:Arial-black,Arial,sans-serif;
 font-size:2em;
}
sup{
 position:relative;
 font-size:.75em;
}

​ Here's an example: http://jsfiddle.net/jglovier/vqHuu/

Of course, if you can't access the markup like this, you'll need to use jQuery to look for the characters and wrap them in a <sup> tag as other's have suggested.

Answer 3

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)

Answer 4

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!

Answer 5

In the PHP code, you can put this into your Page class to do what you want on the server side:

function Content() {
  return str_replace('®', '<sup class="copyright">®</sup>', $this->Content);
}

$Content in the template engine will first look for $page->Content() (the method) and if that doesn't exist will look for $page->Content. By contrast, the CMS editor only looks for $page->Content. This means that by defining a Content() method that processes the output, you can include code that is only executed on template display and doesn't muck with the CMS.