How to type superscript correctly

Design help General
1

Hi there,

Thanks for helping me out with my language problem@Erry_jonson

I thought it is exceptionally simple yet I was unable to make it.

I was attempting to type cm-2(-2 as superscript) on my item depiction. It works on Microsoft Word yet on my site, it became “cm-2” eventually.

Then, at that point, I attempted to type thusly: “cm^-2”. Subsequent to distributing it became “cm￪2” :slight_smile: some way or another the “^” and "- " have been joined together to a bolt…

Eventually, I composed “cm^ - 2”, definitely I composed a “space” between :slight_smile:

there are my inquiries:

how is it possible that I would type “- 2” as a superscript? (not 2)

how should web-flow not naturally turn “^-” into “￪”?

Thank you.
Dij

2

hi @Dij_L you are misunderstand what is and how content of websites works. I will recommend to invest some time to learn what is HTML and CSS and how these technologies differ from standard software for writing text (text editors).

Anyway back to you question if you browse internet with keywords html superscript or how to superscript website you will find many great sources that will reveal secret weapon of <sup> .

Here is one that may answer your question.

if you will write more complex math formula on website there are libraries that can may help you.

http://mathquill.com

but feel free to fine one that will fulfil your expectations

because HTML is not text editor software

1 Like
3

Hey @Dij_L , on the note from @Stan , <sup> support is not available on Webflow as of now. A workaround I tried may work for you:

  1. Write out cm-2 normally
  2. Wrap -2 within a span and give it a class superscript
  3. Style this class by reducing font-size to 10 or your desired size, change display to to inline-block.
  4. Switching display to inline-block will allow css transform, so you can create a transform move on y-axis.

Let me know if this works!

2 Likes
4

hi @imtiazraqib Im sorry that <sup></sup> doesn’t work for you so you can also use ::after approach. But before you try these complicated ways to create superscript just use <sup>.

CleanShot 2021-08-18 at 08.09.32
CleanShot 2021-08-18 at 08.10.07

let me know if this works for you !!!

1 Like
5

Hi @Stan and @imtiazraqib, thanks for all the tips.
Actually this subscript belongs to one paragraph of a dynamic product description. So at beginning I was expecting to type superscript without HTML Embed. For my problem, I could type 15 N/cm² instead of 15 N cm-2. But I am curious why I could just type cm² but not cm-²(after typed “-”, “cm²” became “cm-2”).

I tried your solutions, all work on a normal page but I am still trying to make it works with dynamic content.

thank you again, I will keep update
Cheers

6

hi dude
that worked for me =)
I do not know why it did not work for guys
But it worked for me :)))
thanks

1 Like
7

hi @Dij_L <sup> is working in CMS RTE as well. Here is just screenshot to prove it. I don’t know what other way to prove that <sup> is working and if you don’t know how to use it just use @imtiazraqib approach or try to use another approach with use of ::after pseudo class.

CleanShot 2021-08-18 at 09.33.52
CleanShot 2021-08-18 at 09.33.521069×456 82.4 KB

2 Likes
10

HI @Dij_L if you don’t have further question related to this topic feel free to close your request as solved

11

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.