Streaming live at 10am (PST)

Superscript all registered trademark characters

Hi Guys,

The font I am using doesn’t automatically changes ‘®’ to superscript. Is there a way (maybe with javascript) to change all ‘®’ to superscript?

Thanks in advance :slight_smile:


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Select the character, “span it” (click on the brush icon), unselect, select the span again, give it the .superscript class, then change the font size and use Position to up it some pixels.

Reuse the class on any other character you need to superscript.

Hi Vincent,

Thank you for your quick reply. I meant to implement this into rich-text-content fields for the cms. That’s why I think it’s something that has to happen in the DOM, don’t you?

Only by code - wrap with sup (Or another font like @vincent answer) . This is base codepen example

https://codepen.io/ezra_siton/pen/XwXVXM

image

You put the (r) before or after the name (This is matter for the code pattern).

I was reading around because for example the tm symbol is already superscripted.

And depending on the fonts, ® unicode symbol is already superscripted.

So the real answer is that it has to happen in the font and we have to work with good fonts. So many things to pay attention to when buying a font… usually when money is involved all the characters are there and well designed.

There’s a solution to style some special symbols with RT, but it’s limited and very dirty. Use the H5 that you’re probably not using at all. Define it as inline, and superscripted. Should work. But semantically, it’s a total nonsense :smiley:

I tried implementing this but I can’t get it to work.

The custom code I put in is:

jQuery(document).ready(function($){
//	var pattern = /\b(these|three|words)/gi; // words you want to wrap
  var pattern = /\b( ®)/gi; // words you want to wrap
	var replaceWith = '<sup>$1</sup>'; // Here's the wap
	$('#section-container').each(function(){
		$(this).html($(this).html().replace(pattern,replaceWith));
	});
});

I placed this in css:

sup{ color: blue !important;}

the website I am working on is: https://pathonostics-staging.webflow.io

Use this code (Again this is not so “modular” code).
https://codepen.io/ezra_siton/pen/XwXVXM

Use this code and that`s it it:

<script>
/* convert DermaGenius® */
jQuery(document).ready(function($){
//	var pattern = /\b(these|three|words)/gi; // words you want to wrap
  var pattern = /\b(®)/gi; // words you want to wrap
	var replaceWith = '<sup>$1</sup>'; // Here's the wap
	$('#target').each(function(){
		$(this).html($(this).html().replace(pattern,replaceWith));
	});
});
/* convert DermaGenius ® */
jQuery(document).ready(function($){
//	var pattern = /\b(these|three|words)/gi; // words you want to wrap
  var pattern = /\b( ®)/gi; // words you want to wrap
	var replaceWith = '<sup>$1</sup>'; // Here's the wap
	$('#target').each(function(){
		$(this).html($(this).html().replace(pattern,replaceWith));
	});
});
1 Like

I have read about that approach but I simply have too much style iterations of the character. (https://pathonostics-staging.webflow.io/)

That’s the worst approach anyway, using a title for a styled character, omg

Thank you very much! It works like a charm.

1 Like