CSS superscript registration trademark

user_143725 0
Viewed 69782

I would like all "®" on a site to be in superscript. Can I do that with CSS?

css
11 Answers

add this to your html file <sup>your mark here</sup>

then add this to your css

sup {
    position: relative;
    font-size: 40%;
    line-height: 0;
    vertical-align: baseline;
    top: -1.2em;
}

You can adjust the height of the mark using "top" in the css and the size with "font-size". This will also work for any TM, SM, or symbol you want. It will not effect any of your spacing or typography.

user_9101160

I've used the CSS below for positioning the trademark registration symbol ® in HTML whereby the result is the ® symbol with a link, smaller and above the normal text. Note there are two links in the example. The reason for this is because I wanted the main anchor link to be underlined and the ® symbol to be not underlined.

.trademark {
  position: relative;
  font-size: 40%;
  top: -1.2em;
}

.no-style {
 text-decoration: none !important;
}

Example with CSS using JSX in React:

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a><a 
 href="https://www.photoprintsnow.com" className="no-style"><span 
 className="trademark">®</span></a>

Example in HTML with CSS where the syntax is class instead of className:

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a><a 
 href="https://www.photoprintsnow.com" class="no-style"><span class="trademark">®</span> 
 </a>

Example in HTML with STYLE:

 <a href="https://www.photoprintsnow.com">Photo Prints Now</a>
 <a href="https://www.photoprintsnow.com" style="text-decoration: none; "> 
 <span style="position: relative;font-size: 40% ;top: -1.2em;">®</span>
 </a>
user_11813840
Related