<sup> doesn't work in WordPress

Question

I'm trying to use trademark and registered / copyright symbols on a WordPress site, but some standard CSS methods do not work, and using what I have, maybe someone has an idea on how I can expand.

Traditional / Normal way I would do this:

Awesomesauce <sup>&reg;</sup> will look like Awesomesauce® (R is smaller than other text).

In the topic I use, she did not do this with this tag

Then I tried <span style="font-size:6px;"> just to see if it would do something else. Bad luck.

So, I approached it from the JavaScript side. I started with my H1 tag

 jQuery(function($){ var $el = $(".section_header .post_title"); var t = $el.text(); t = t.replace('®','<sup>®</sup>'); $el.html(t); }); 

Since this works, how would I do the same job for the main text, because I cannot get it to work using the following code

 jQuery(function($){ var $el = $(".wpb_text_column .wpb_wrapper p"); var t = $el.text(); t = t.replace('®','<sup>®</sup>'); $el.html(t); }); jQuery(function($){ var $el = $(".section_header .post_title"); var t = $el.text(); t = t.replace('®','<sup>®</sup>'); $el.html(t); }); 

What the HTML section looks like:

Answer 1

It is very normal for WP themes overwrite the default browser style.
Try adding this to your custom.css file :

 sup { vertical-align: super; font-size: smaller; } 

If you are not using a custom style or child theme ^{( Why use a child theme )}
Then add this code to the very bottom of your theme style CSS file.

Answer 2

I do not think your problem is that WordPress does not recognize the "sup" element. I support several WordPress sites, and "sup" works fine when I use it. In your case, it seems that you are trying to use javascript (jQuery, in particular, on your WordPress site. WordPress does not handle javascript reliably if it is found on the page. The documentation I read indicates that it is not supported by your own javascript on WordPress pages. However, I was able to use Javascript on some pages of my WordPress site, but with quite conflicting results overall. I recommend that you format the text directly in the WordPress WYSIWYG editor as follows:

AWESOMESAUCE <sup> & p; </SUP>