Repository navigation
fix(style): honour line-height instead of forcing 1.2 x font-size - #24
Open
leshchenko1979 wants to merge 1 commit into
Open
leshchenko1979 wants to merge 1 commit into
leshchenko1979 wants to merge 1 commit into
Conversation
line-height never reached the renderer: every line advanced by 1.2 x
font-size regardless of what the element declared.
Two causes, both in style/resolve.go:
1. The tail of resolveStyle clobbered the resolved value on every node
that did not declare line-height itself:
if v, ok := props["line-height"]; ok {
cs.LineHeight = resolveLineHeight(v, cs.FontSize, ctx)
} else {
cs.LineHeight = 1.2 * cs.FontSize
}
Text nodes never declare line-height, so the inherited value was
overwritten with the default on the way down to them.
2. resolveLineHeight collapsed a unitless value to px immediately, so
inheritance could only carry a stale px number. CSS inherits the
number, which means a child with a different font-size recomputes it.
Fix: keep the unitless multiplier in ComputedStyle.LineHeightFactor and
let inheritance carry it; recompute the px value against the element's
own font-size. A unitless declaration now survives the whole tree.
Percentages are resolved against the element's own font-size instead of
going through ResolveContext.ContainerSize, which is 0 for line-height
and produced 0.
Verified against Chromium (same DejaVu Sans file for both engines),
wrapped text at font-size 20px:
line-height 1 step 20px (was 24px, Chromium 20px)
line-height 2 step 40px (was 24px, Chromium 40px)
line-height 3 step 60px (was 24px, Chromium 60px)
250% step 50px (was 24px, Chromium 50px)
inherited 2.5 step 50px (was 24px, Chromium 50px)
Fixes Macawls#21
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
line-heightis parsed and stored, but never reaches the renderer: every line advances by1.2 × font-sizeno matter what the element declares.Reproduced on
main(32f3fad) — wrapped text,font-size: 20px, all four declarations produce a byte-identical SVG with baselines at19.3, 43.3, 67.3, 91.3, i.e. a fixed 24px step:Cause
Two bugs in
style/resolve.go, both needed fixing:1. The inherited value is clobbered. The tail of
resolveStyle:Text nodes never declare
line-heightthemselves, so theelsebranch overwrites the value inherited two lines earlier with the default. Only the declaring element ever sees its own value, and it is not the element that draws the text.2. Inheritance cannot carry a unitless value.
resolveLineHeightcollapses2.5to50pxat the ancestor. CSS inherits the number, so a child withfont-size: 10pxmust get25px, not50px.Fix
ComputedStyle.LineHeightFactorkeeps the unitless multiplier;inheritPropertycarries it alongsideLineHeight.cs.LineHeight == 0), and a factor inherited from an ancestor is recomputed against the element's ownfont-size.font-size. Previously they went throughResolveContext.ContainerSize, which is 0 forline-height, so250%produced 0.Verification
Measured against Chromium (Playwright) with the same DejaVu Sans file handed to both engines, wrapped text,
font-size: 20px:123250%2.5from parentTests added:
style/line_height_test.go— unit: unitless scaling, px inheritance, override, percent against own font-size, default when absent.ogre_line_height_e2e_test.go— through the publicRender: line step follows the declaration, inheritance from a parent without a declaration on the child, percent.go build ./...,go vet ./...andgo test ./...pass.Fixes #21