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?
LVL 16
hankknightAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
VoteyDiscipleConnect With a Mentor Commented:
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
 
callrsConnect With a Mentor 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...
0
 
Mark StegglesConnect With a Mentor Web 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
[Webinar] Kill tickets & tabs using PowerShell

Are you tired of cycling through the same browser tabs everyday to close the same repetitive tickets? In this webinar JumpCloud will show how you can leverage RESTful APIs to build your own PowerShell modules to kill tickets & tabs using the PowerShell command Invoke-RestMethod.

 
radnorConnect With a Mentor 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>
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
All Courses

From novice to tech pro — start learning today.