How do I find space between lines in HTML?

Question

This is a follow-up question to a previous question of mine. I am trying to find a way to find the exact location of each line of text in an element.

I was able to find the css lineHeight attribute (see previous answer). The problem is that the height of my element is slightly larger than the cumulative height of the number of lines times the lineHeight.

An example:

I have a <p> that is 2010px tall without padding, border, or margin, (scrollHeight, offsetHeight, and clientHeight all report the same,) and has 89 lines in the browser. The lineHeight of the computedStyle() is 22.

2010 / 22 = 91.37 lines

With small elements I can just floor the value to get the correct number of lines, but run into the above problem with larger elements where I cannot accurately get the exact number of lines.

My assumption is that there is some small space between these lines of text I am not taking into account. Any idea how to find it? Does it have to do with font types? Is it automatically set by the browser? Any documentation would be especially helpful.

Thanks!!

Update:

So I have 26 superscripts in my <p>, each of which protrude up 2px, extending the lineHeight of those lines on which they appear to 24px, which accounts for my missing space. (Woot! Thanks so far!)

I guess the boat I am in now is that I need to find a way to dynamically calculate how much they protrude above the normal top of the line, or discover how much higher the baseline of a <sup> is above the normal baseline. (Vice-versa for a <sub>.) Otherwise, could I determine that with CSS?

Answer 1

Providing my own answer, as @lanzz's is incomplete to some extent.

If you define the block element as:

div {
 font-size: 10px;
 line-height: 10px;
 height:30px;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 0px;
 overflow-y: hidden;
 padding: 0px;
}

you will get sufficient space for EXACTLY 3 lines. However, if you have sub-scripts or super-scripts less lines are visible. By removing the overflow you can force it to only display 3 lines of space.

This is demonstrable at: http://jsbin.com/ogoruy/4/

Superscript and Subscript are 'inline-block elements':

The height of the inline box encloses all glyphs and their half-leading on each side and is thus exactly 'line-height'.

When there is only one value of 'line-height' for all inline boxes in a block container box and they are all in the same font (and there are no replaced elements, inline-block elements, etc.), the above will ensure that baselines of successive lines are exactly 'line-height' apart.

http://www.w3.org/TR/CSS2/visudet.html#line-height

Answer 2

Superscripts and subscripts usually protrude above and below the line boundaries, as illustrated in this demo — you see that the left example has more apparent space between the lines than the right one, even though they have the same line-height. Unfortunately, browser "typography" (if you can call it that) does not allow you to determine how much the sub/super-scripts protrude, so you cannot take that into account when you calculate the actual line heights.