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?
1
-
Ended up wrapping the ® with a <sup> tag using a modified CSS class of sup { vertical-align: text-top; font-size:0.7em; } – JGallardo Jan 3 '13 at 0:06
5
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; } – JGallardo Jan 2 '13 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
suptag so that your HTML stays cleaner. I've updated my answer to address this. – Hanna Jan 2 '13 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. – JGallardo Jan 2 '13 at 23:36
-
1The hybrid technique is ideal as it brings in the semantics of the
suptag, and can be styled further. Best of both worlds. Aspanadds no semantic meaning, and it requires more markup. – Grant Palin Feb 14 '14 at 17:53
