On the web, using ® (®
or ®
) will make the Registered mark almost as big as the rest of the text. How can you modify the size of it to match how it would appear in print?
-
Ended up wrapping the ® with a <sup> tag using a modified CSS class of sup { vertical-align: text-top; font-size:0.7em; }– JGallardoJan 3, 2013 at 0:06
1 Answer
The term you for making text smaller and floating upwards is called superscript.
HTML
You can use the <sup>
HTML tag to superscript text.
My text<sup>
®</sup>
My text®
Here is a live example from w3schools.
CSS
Alternatively it can be done with CSS with something like this:
.superscript { vertical-align:super; font-size:0.8em; }
And then implemented in HTML like this:
My Text<span class="superscript">
®</span>
EDIT (HTML & CSS)
If you are looking to keep your HTML cleaner but still wish to customize your superscript with CSS then apply CSS styling to the <sup>
tag like so:
sup {
color: red;
font-size: 0.7em;
}
Just add whatever stylings you need. I just added two for example's sake. That way, whenever you use the <sup>
tag the styling is automatically applied.
-
4
-
Thanks, that got me going in the right direction. I ended up going the CSS route to get it to the designers specs by implementing the following modification .superscript { vertical-align:text-top; font-size:0.7em; } Jan 2, 2013 at 23:30
-
1Sure! Glad to have helped. I think the HTML route is cleaner, but the CSS obviously gives you the ability to customize it further. Though I would suggest styling the
sup
tag so that your HTML stays cleaner. I've updated my answer to address this.– HannaJan 2, 2013 at 23:33 -
@Johannes yes I agree about cleaner code and would encourage others to do it that way. In my scenario though, the specs are so picky that it has required a lot of custom CSS classes which has bloated the document. Jan 2, 2013 at 23:36
-
1The hybrid technique is ideal as it brings in the semantics of the
sup
tag, and can be styled further. Best of both worlds. Aspan
adds no semantic meaning, and it requires more markup. Feb 14, 2014 at 17:53