Line height

[peterudo]

Line height is restricted by the line-height set on the first parent block element.
When selecting all text inside a contenteditable div, rangy surroungs everything in a element.
Since this is an inline element, it can never set a line-height that is lower than the line-height set on it's parent. But if we changed the wrapper to be a div, or any other block element, it could override it.

Consider the following example:

<h1 style="line-height: 50px">
    <span style="line-height: 20px">Some long title or excerpt or something</span>
</h1>

The result to this will be 50px, and not 20px as set on the span. But if we changed it to this:

<h1 style="line-height: 50px">
    <div style="line-height: 20px">Some long title or excerpt or something</div>
</h1>

Now the line-height will be correct.

So if we could wrap a block element around the selected contents, instead of an inline element, the user would be able to pick any line-height.

Any thoughts @pahen ?

[pahen]

Yes, I think changing it to a div element will make more sense since you never want to use different line-heights on the same "row". I'll do some tests!