2
I need to leave the ® of the smaller trademark and aligned with the upper part of the text, follows the print example of how I would need
Unfortunately thanks to the other factors I’m using in this element of the site I can not separate into 2, for example 2 text elements or 2 div’s.
<h3 style="font-size:40px; font-color: #000;">
<span>CVS<span style="font-size:24px;">®</span> - </span>
</h3>5
How is an element inline you can use vertical-align: super It would look like the image below.
Below I talk more about top/top
Follows code from the image
<h3 style="font-size:40px; font-color: #000;">
<span>CVS<span style="font-size:24px; vertical-align: super">®</span> - </span>
</h3>Note that every text creates a "text box" where the content is inside.
That one caixa de texto is defined by descender line and ascending line and may vary from font-family for font-family, because it is intrinsic to the source archive (.ttf or .otf).
Although there is no typographical rule, and neither does the W3C, that says you have to align the ® in the top or in the super
See how it is aligning the ® to 100% of vertical-align, he "glue" on top of caixa de texto, and not at the "top of the text"
See how between two typographical families you can have a different "anatomy". Here we have the Time New Roman and the Verdana, the two of the same size 20pt, but visually they have different size, this was defined by the font design and is something referring to the file itself...
Here’s an article more related to typography, but there’s A LOT of interesting stuff about the history of typography, and why Fig decide to change their understanding of line-height and how it is rendered. https://www.figma.com/blog/line-height-changes/
OBS: According to Mozilla the tag <sup> should not be used for this, although visually look like, is not a tag made to treat wordmark.
to stylize the wordmark of a company or product that uses a high baseline should be done using CSS (most likely
vertical-align) instead of<sup>.
Proper use of tag <sup>
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup#Usage_notes
1
You can just use the tag HTML <sup>
<h3 style="font-size:40px; font-color: #000;">
<span>CVS<sup style="font-size:24px">®</sup> - </span>
</h3>Actually according to the Mozilla documentation the <sup> is not indicated for this, "to style the wordmark of a business or product which uses a Raised baseline should be done using CSS (Most likely vertical-align) rather than <sup>. ", although it looks similar to what the author needs. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup
I learned something new. I would have used the <sup> even...
@fernandosavio even edited my answer with some more interesting things that I found
Neither of them worked out, so I’m running some extra tests to figure out why. If you want to see the result: http://comovendersoftware.com.br/ right away
And already won my +1...
Gabriel, it’s probably an error in your code.. Hugo’s answer is working correctly.
Yes, it’s really correct, in the case is the tool that I’m using for this company that is giving the problem, the answer is very correct
anyway, just so people understand here: as I’m using wordpress, in the general css code was saying that the tag sup was vertical-align: baseline;, I just switched to vertical-align: super; and it worked
@Gabrielramalhogrotto only that in the answer here he does not even speak of vertical-aling, he uses the tag SUP, which by the way is not recommended!! Not etendi pq to choose this answer and not the other, since you are using inclusive Vertica-align....
@Geremias both give right, if you are 0 of css on your site the sup will work as the vertical super works
0
You can try using Flexbox. See if it helps you.
<h3 style="font-size:40px; font-color: #000;">
<span style="display: flex; align-items: flex-start">
CVS<span style="font-size:24px;">®</span>
</span>
</h3>0
You get this alignment effect by setting the position of the parent element as relative and the position tag <span> as absolute alignment will occur by adjusting the properties top and font-size of this tag.
<h3 style="font-size:40px; font-color: #000; position:relative;">
CVS<span style="position:absolute; top: 4px; font-size: 22px">®</span>
</h3>Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
And perhaps it is worth mentioning that thus will be used the typographical line that defines the rise to height, not the cap height, which justifies the symbol being higher than the capital letters.
– Woss
@Andersoncarloswoss I’m working on it, I found some interesting things
– hugocsl
I took my vote just so I could vote again +1
– Woss
@Andersoncarloswoss haha :D was worth young, I took the opportunity to include a few more words. This "text box" thing was something I had noticed. Even includes an extra GIF.
– hugocsl
+1 for the gifs :)
– Davi Wesley
@Daviwesley haha, sometimes we have to explain "drawing"... vlw
– hugocsl
Caraca, this was the most complete answer I’ve ever seen. Congratulations too!!! and it was worth too much also!!
– Gabriel Ramalho Grotto
@Gabrielramalhogrotto was worth the young force! At first I thought it would be a simple answer, but I noticed several details that I took the opportunity to explain more fully, []’s
– hugocsl