CODEWITHSUNDEEP
htmlcss
Andy Braham
Andy Braham

Reputation: 10191

HTML special character display

When dealing with special characters is there a way to shrink only the special character and shift the position up slightly?

In particular I am trying to use the registration character (little R with circle) but it seems to render at the same size of the font which is not how it should be displayed. It should be shifted up towards the top of the text and the size should be at least half the size.

Is there some sort of escape character that can be inserted right before it so it renders correctly? Or is there a way to use CSS to select only the special character from the text?

The only option I can think of is enclosing each one in a tag or something similar but I would think that there is a better way of doing this.

Upvotes: 0

Views: 152

Answers (2)

aaronmallen
aaronmallen

Reputation: 1438

You could use the sup tag.

<sup>&reg;</sup>

Which is equivalent to:

sup {
    vertical-align: super;
    font-size: smaller;
}

HTML sup tag

MDN

Upvotes: 2

Deryck
Deryck

Reputation: 7668

Two options for you. I don't mean to steal from @aaronmallen, I just want you to have a comparison.

CSS (change ELEMENT to whatever - span most likely):

ELEMENT:after {
    content: '\00AE';
    display: inline; /* if you use on a block element like div */
    zoom: .75;
    position: relative;
    top: -8px; /* because default font size is 16px */
}

HTML would be the <sup>&reg;</sup> that was posted already.

See comparison here

Upvotes: 4

Related Questions