• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2260
  • Last Modified:

CSS for ®

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?
0
hankknight
Asked:
hankknight
4 Solutions
 
callrsCommented:
<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...
0
 
Mark StegglesWeb DeveloperCommented:
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
0
 
VoteyDiscipleCommented:
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.
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
radnorCommented:
<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>
0
 
radnorCommented:
<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>
0
 
VoteyDiscipleCommented:
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?  
0
 
hankknightAuthor 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>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now