CSS superscript registration trademark_问答_开发者

I would like all "®" on a site to be in superscript. Can I开发者_如何学JAVA do that with CSS?

AverageAdam's answer will work fine, but if you for some reason wanted a CSS version, you could do this:

.sup { vertical-align: super; }

and

<span class="sup">&reg;</span>

From here.

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.

<sup>&reg;</sup>

Unfortunately CSS doesn't have a way to specify superscript's. You can however simulated it using a span and some tags.

Correction 2021: As others have mentioned there are many ways including using CSS. Based on the various options and issues presented in this question I've created a pen to demonstrate options for superscript styling and line-height fixes.

My personal favorite is position:relative since it doesn't require the line-height:0 fix. Thanks @osuthorpe

use the CSS below to create a tag that doesn't mess with your leading. Adjust values as needed. Font-size is optional, I used it to make my r-balls a little smaller than the registered trademarked text.

sup{
 vertical-align: 75%;
 line-height: 5px;
 font-size:11px;
}

I know you asked CSS but this jQuery code worked for me, hope it helps you

<html>
    <head>
        <script type="text/javascript"
            src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("body").html(
                    $("body").html().replace("®", "<sup>&reg;</sup>")
                ); 
            });
        </script>
    </head>
    <body>
        Some text here &reg;
    </body>
</html>

Victor's answer only worked for the first Reg mark on my page. I found this code to work on the entire page. Hope it helps someone:

$("body").html(
   $("body").html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;</sup>')
);

found it here: http://www.cmexsolutions.com/blog/use-jquery-to-superscript-all-register-marks-reg-or-%C2%AE

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>

Further to the previous answers, I'd suggest that superscript is presentational rather than semantic, and therefore styling the registration mark should be done using CSS. Whether superscripted or not, a registration mark is still a registration mark, and would be recognised as a registration mark by humans/computers. The symbol itself may be considered semantic, in that it gives a 'special' meaning to the object to which it relates, but the styling of it is entirely presentational. By convention the registration mark is often (but not always) superscripted, as is the trademark symbol.

The only issue with some of the scripts above is that they don't deal with the fact that there might already exist some ^® elements on the page. In this case, they will be replaced with: ^{^®}.

I think a solution like this might make more sense.

$("body").html(
   $("body").html().replace(/<sup>&reg;<\/sup>/gi, '&reg;').
        replace(/&reg;/gi, '<sup>&reg;</sup>').
        replace(/®/gi, '<sup>&reg;</sup>')
);

if you don't mind using jQuery:

$("p,h1,h2,h3,h4").each(function(){
    $(this).html($(this).html().replace(/&reg;/gi, '<sup>&reg;</sup>').replace(/®/gi, '<sup>&reg;</sup>'));
});

it works much faster than modyfying whole body tag (as in Robert's and Victor's answers)

If you are going to use regex, why not clean it up with one call

$("p,h1,h2,h3,h4,h5,h6,li,dd,dt,a").each(function(){
    var $this = $(this);
    $this.html($this.html().replace(/(<sup>)?(&reg;|®)(<\/sup>)?/gi, '<sup>®</sup>'));
});

I don't recommend doing this on the body like the OP ended up doing. It could interfere with inline javascript that might have the symbol in it.