7

So, link and link give hints about how fonts are implementation dependent. This question is very especific to font-size in the following case:

font-size: 50px; will take aditional space to render (60px in my case)

div {
  height: 50px;
  font-size: 50px;
  background: green;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}
<p>Green is 50px, Red is not</p>
<div><span>fg</span></div>

<p>You can still see the overflow without span:</p>
<div>jAaMgÁ</div>

<p>line-height does not solve the issue (just makes it prettier)</p>
<div class="lineheight"><span>jAaMgÁ</span></div>
  • What i expect to happen is: ascender and descender inside em square
  • What i get is: descender is draw outside the em square.
  • From the documentation link: "The font size corresponds to the em square"
  • From this reference the em square should include both descender and ascender: enter image description here

So why is the browser doing something else? I tried Firefox and Chrome, and both seem consistent with this (miss?)behaviour... did the specification change? if so, what is the appropiate way to tell the browser the font height including descender and ascender?

(width can be ignored, and you are free to use up to CSS4, but CSS3 is appreciated)

JesusTCS
  • 158
  • 10
  • 2
    I think the font size is still 50px but the line height has to be adjusted – B001ᛦ Feb 19 '20 at 11:26
  • Hello B001,thanks for your comment, the issue is that from descender to ascender is taking 60px instead of the expected 50px. – JesusTCS Feb 19 '20 at 11:31
  • @B001ᛦ keep only `Â` and you will still have the same result > 50px – Temani Afif Feb 19 '20 at 11:54
  • _keep only  and you will still have the same result > 50px..._ How do you measure the pixel? I use mspaint and it shows 50px – B001ᛦ Feb 19 '20 at 11:57
  • @B001ᛦ inspect the code and hover on the span element and you will get the height – Temani Afif Feb 19 '20 at 11:59
  • The answer is simply that yes, fonts are able to put pixels outside of the calculated font rectangle. Otherwise you could never have zero-width characters that still have visible glyphs. – Mr Lister Feb 19 '20 at 12:52
  • 2
    By the way, the problem in your code example is that inline elements such as `span` don't honour the `height` property, while `div` does. So the span simply overflows out of the div. To solve this, you can remove the `height` from the div, so that it becomes as high as its content, or set its `overflow` so the excess height from the span is cut off. – Mr Lister Feb 19 '20 at 12:56
  • Hello Mr Lister, thanks for your comment, i am usign the span to highlight the issue. and the question explicitly ask for 50px from descender to ascender. so removing height from the div is not acceptable – JesusTCS Feb 19 '20 at 13:31
  • @B001ᛦ I Inspected the element and also compared a screenshot with MsPaint. I also changed the browser Zoom resulting in diferent heights but all of them over 55px. But you may be onto something here... Maybe font-size is the size of just 1 Letter.. and sometimes that letter can be placed higher (Â) or lower (j) ? if you can find documentation pointing that out i will accept that as the awnser – JesusTCS Feb 19 '20 at 13:41
  • @JesusTCS If you need to text to fit in the 50px div, you should make its font-size slightly smaller. Normal line-height is 1.2, so 50 / 1.2 or 41px should do. It depends on the exact font though. – Mr Lister Feb 19 '20 at 14:09
  • @MrLister i appreciate your input, but changing the font-size, relaxing the height or removing the overflow. will just hide the issue. I will update the question with more relevant information – JesusTCS Feb 19 '20 at 14:26

2 Answers2

2

The default line-height is higher than the font-size, that's why the span is higher than 50px in your example. If you set line-height to 1 or 100%, you see that the span has the same "real" height as the div: 50px. The accent on the "A" simply exceeds the 100% line-height and goes beyond the font-size, as an addition/exception.

div {
  height: 50px;
  font-size: 50px;
  line-height: 1;
  background: green;
}

span {
  background: red;
}
Green and Red are 50px high, with line-height 100%:
<div><span>jAaMgÁ</span></div>
The only thing that overflows is the accent on the "A" (and the very first letter "j", but to the left...):
<div>jAaMgÁ</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Hello Johannes, I appreciate your input, but this "solution" as it stands only hides the issue: the font should not have any overflow to begin with. (at least not for the characters used) – JesusTCS Feb 19 '20 at 15:38
  • But some fonts/letters *do* have a overflow. As an additional example take a look at the initial "j", which for example overflows to the left, regardless of font-size, line-height etc. - an even more complex example of overflowing, for which (in comparison to top and bottom overflowing) it takes even more complex measures to work around. – Johannes Feb 19 '20 at 15:45
  • i won't mind Horizontal overflow neither special cases. but look at the "font's measurement" reference, the em unit should include both f (ascender) and g (descender) fairly regular letters. however the browser is drawing them outside the em square – JesusTCS Feb 19 '20 at 15:53
  • The only thing which (vertically) extends the line-height in my example is the accent on the "A", and I suppose that's not considered a letter per se, but a letter with an addition on top / outside of its actual area of the letter/font. – Johannes Feb 19 '20 at 16:00
  • in your example "g" is overflowing – JesusTCS Feb 19 '20 at 16:19
  • @Johannes Like I said in my comment to the question, it depends on the font. On my screen, the j extends below the bottom of the span as well as to the left. JesusTCS What kind of answer are you looking for? You can't change the font size, you can't change the height and you can't hide the overflow; what kind of magic do you expect? – Mr Lister Feb 19 '20 at 16:37
  • i understand that this question is not as easy as it seems. Its more about the specification and less about an inmediate fix. I either look for a property that will set the font size (from descender to ascender) or a documented explanation about why it does not exists. please see my anwser proposal. And if you wish i would like to chat with you. – JesusTCS Feb 20 '20 at 11:27
2

It is not acurrate.

CSS3 introduced a few changes allowing OpenType fonts: link. But also altering how font-size works:

  • CSS2 font-size: The font size corresponds to the em square.
  • CSS3 font-size: The font-size is a scale factor applied to the EM unit of the font.

If your browser supports only CSS2 the em square will be exactly the same as the font-size.

  • But, by supporting CSS3 most browsers will now multiply the font-size against the font's "em unit" which is diferent for each font but allways > 1.

  • As a result you will end with a bigger em square than expected which is the cause of the inacurracy.

A quick dirty solution would be to adjust the font size to your needs:

  font-size-adjust:0.4; //equivalent to 1:1 ratio

This will allow you to alter the font "em unit" thus the span height without changing the font-size. 

div {
  height: 50px;
  font-size: 50px;
  background: green;
  font-size-adjust:0.4;
}

span {
  background: red;
}

.lineheight {
  line-height: 50px;
}
<p>Green is 50px, Red is 50px too</p>
<div><span>fg</span></div>

<p>Combine with line-height for best results</p>
<div class="lineheight"><span>fgjAaMgÁ</span></div>
JesusTCS
  • 158
  • 10