Superscript in collection item title

Design help CMS
1

Hi,

I have a couple of items in a collection that have a registered trademark name in the title. so It needs to show the ® icon. I copied this into the title of the collection item. It shows, but it doesn’t show as superscript. It is on the same line as the rest of the title.

See the Brustiek items on this page:
https://bussing-brood.webflow.io/brood

Is it possible to make this superscript?
Hope somebody can help me with this.

Kind regards,
Emile

Here is my public share link: LINK
(how to access public share link)

2

If it’s in a CMS collection as a plain text field, you’re limited.
You might try a Rich text element which contains just the version you want with the superscripting.

Otherwise, It can be done using custom script, replace ®’s with <sup>®</sup>

3

Hi MIchael,
it is in fact the title of the collection item. Don’t Think I can change the title field to a rtch text element
Screenshot 2023-09-01 at 12.16.42

Screenshot 2023-09-01 at 12.17.00
Screenshot 2023-09-01 at 12.17.00950×906 72 KB

And When I replace the ®’s with <sup>®</sup> it just shows <sup>®</sup> in the title…

4

@emilenzo Try to use this script (it’s find ® symbol in all .broos-collection-item-name texts and replaced it to superscript):

<script>
  const elements = document.querySelectorAll('.broos-collection-item-name');
  elements.forEach(element => {
    const text = element.innerHTML;
    const replacedText = text.replace(/®/g, '<sup>®</sup>');
    element.innerHTML = replacedText;
  });
</script>
5

@bro-design

This should work, but for some reason it doesn’t… I’m sort of a beginner in Webflow. I added the script in de custom code section in the websites’ dashboard in the head section.
I hope that’s the correct place?

6

Correct place is Footer code section :v::blush:

7

@bro-design It works!
Thank you very much!

Now I’m wondering how I can set this for the title on the collection page as well:
https://bussing-brood.webflow.io/assortiment/brustiek-r-bruin

8

So you can rename in code: broos-collection-item-name to for example: superscript and use superscript combo class on elements for which you want to apply superscript replace effect)

9

@bro-design yes of course…It works… Learning a lot, thank you!!