How to apply style to one special HTML character on a page

Question

We have a customer who wants to add the “registered trademark” (& reg;) symbol on their website.

The website is based on CMS, and not only do they constantly come up with superscripts, but the superscript style does not transfer to any page names created by CMS, etc.

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

• Can CSS be used to apply style to a specific special character?
• Using jQuery to apply style post page loading.
• Extending Template Analysis Engine (Silverstripe)

Any ideas are welcome.

Answer 1

I do not believe that this can only be done with CSS.

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

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

Change registered characters (R)

Answer 2

• I do not think you can do this, there will only be css
• Using jquery / javascript / css, you can create a class containing style information for the character, then jquery parse the file section and wrap the character inside the <span></span> tags with this css class
• I do not know anything about silverstripe, so I can not comment on its use

Answer 3

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

However...

• There is a CSS rule for the add-in, and this is:

   vertical-align: super; 

• 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/

Hope this helps!

Answer 4

Strictly speaking, you cannot create a "super-script" with any single CSS property (there is veritcal-align "super", but it does not change the size or style of the characters, but only its position relative to the source text). However, there are ways to do this successfully, which I have already tried.

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

If you have <sup>&reg;</sup> , you can simply add these styles to the stylesheet to get the 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 is an example: http://jsfiddle.net/jglovier/vqHuu/

Of course, if you cannot access such markup, you will need to use jQuery to search for characters and wrap them with a <sup> , as others have suggested.

Answer 5

In PHP code, you can put this in 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 search for $page->Content() (method), and if it does not exist, it will search for $page->Content . In contrast, the CMS editor only searches for $page->Content . This means that by defining the Content() method that processes the output, you can include code that runs only on the template display and does not extinguish with the CMS.