We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

CSS for ®

hankknight
hankknight asked
on
Medium Priority
2,419 Views
Last Modified: 2013-12-03
Hello,

In the following example, "Registered Trademark®" the ® is the SAME SIZE at the other text.  I want ALL ® to be superscript (smaller and higher than regular text).

Can this be done STRICTLY with CSS?  Can I identify a font and size etc for just a character?
Comment
Watch Question

Awarded 2006
Top Expert 2006
Commented:
<style type="text/css">
span.reg {font-size: 75%; vertical-align: super;}
</style>
"Registered Trademark<span class=reg>&reg;</span> etc."


Someone else may have a better way...

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006
Commented:
Greetings hankknight,

You could try putting the character inside a <span class="reg">&reg;</span>

CSS
.reg {
font-size:8px;
}

If you want it to be higher than usual position try something like this css

CSS
.reg {
font-size:8px;
display:inline-block;
margin-bottom:4px;
}

Regards
Unfortunately styles aren't of any use if the page isn't marked up correctly in the first place.  To get a symbol supserscript, it should be <sup>&reg;</sup> and no special styling will even be required.

If you have no control over the HTML I think you're out of luck on this one.
Commented:
<html>
<head>
<title>test</title>
<style>
.regtm {
      position: relative;
      top: -6px;
      font-size:11px;
}
</style>

</head>
<body>
Registered Trademark<span class='regtm'>&reg</span>

</body>
</html>

Commented:
<html>
<head>
<title>test</title>
<style>
.regtm {
      position: relative;
      top: -6px;
      font-size:11px;
}
</style>

</head>
<body>
Registered Trademark<span class='regtm'>&reg</span>

</body>
</html>
I don't get what this great aversion to the <sup> tag is.  d-:

The whole issue here is that the markup present doesn't allow the character to be styled, so when suggesting a change to the markup let's at least stick with the correct tag?  

Author

Commented:
Thank you, everyone.

I think that VoteyDisciple is right-- <sup>&reg;</sup> is certainly the BEST way to do it.
The it could be further controlled like this:

                   sup {
                        position: relative;
                        top: -6px;
                        font-size:11px;
                        color:red;
                   }
I guess I was just hoping to get away with being lazy, cause I have about 75 html pages that have to be fixed...  But I might just have to do a mass find and replace to chage &reg; to <sup>&reg;</sup>
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.