search

chearon / dropflow

A CSS layout engine
https://chearon.github.io/dropflow/
MIT License
1.26k stars 27 forks source link

Line height inconsistencies #23

Closed jfrueh closed 4 months ago

jfrueh commented 4 months ago

I've been battling some line height issues (or at least what I believe are issues related to line height on block style elements). The image below is just really simple HTML on the left and that same HTML rendered to the canvas on the right. My expectation was that both words would have the same vertical position.

Code for the left 'Test': <p style="font-size:120px;font-family:'Noto Sans'">Test</p>

Code for the right 'Test':

var textflow = `<p style="font-size:120px;font-family:'Noto Sans'">Test</p>`;
var rootElement = flow.parse(textflow);
var tree = flow.generate(rootElement);
flow.paintToCanvas(tree, context)

Wondering if there is something obvious that I'm missing here? I've tried every combination of line-height and margins that I can think of. Any ideas what I might be overlooking (or if there is an issue)?

image
chearon commented 4 months ago

I think that's the margin actually. Do the differences go away with margin: 0? I missed this duality in the spec:

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.

— § 4.3.2 Lengths

Working on a fix... thanks for the bug report!

jfrueh commented 4 months ago

Awesome, works great. Thank you!