Superscript all registered trademark characters

Design help Custom code
1

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)

2

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.

3 Likes
3

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?

4

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

image

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

5

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:

6

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

7

Use this code (Again this is not so “modular” code).

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
8

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

9

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

10

Thank you very much! It works like a charm.

34
342716×1314 409 KB

1 Like
12

Hi, Luc_Reinders. I think you can also add custome Superscript text to your project. Here you can change a normal text to superscript text and just copy it and paste where you want.

2 Likes
13

Hey Luc_Reinders you can check Super text for making this text

14

This worked well for me! Thanks for the tip. Looks like .5EM for font size and .75EM positioned up get’s it darn close to exact for standard superscript size/positioning.

*edit: lol just noticed there is a dedicated superscript option nowadays

CleanShot 2022-10-14 at 14.59.10

1 Like
15

Superscript all the things!