Need Help Understanding Line Wrapping Difference Between Browsers and TextMeasurer #367

alecrodden · 2023-12-05T03:30:48Z

alecrodden
Dec 5, 2023

A specific sentence, in a specific font (Courier Prime Regular), wraps to 3 lines in a given width in modern browsers (Chrome and Firefox tested), but TextMeasurer counts only 2 lines.

HTML

<!doctype html>
<html>

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700"
        rel="stylesheet">
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: "Courier Prime", monospace;
            font-size: 12pt;
            color: black;
            line-height: 1;
        }
    </style>
</head>

<body>
    <div style="width: 3.875in; background-color: lightgray;">
        Leer, but lonesome has fussin&#x27; change a faith. Themself seen and four trample.
    </div>
</body>

</html>

Rendered Output (Firefox)

C#

var fontCollection = new FontCollection();
fontCollection.Add("./CourierPrime-Regular.ttf");
var fontFamily = fontCollection.Families.First();
var font = fontFamily.CreateFont(12);

var text = @"Leer, but lonesome has fussin' change a faith. Themself seen and four trample.";

var textOptions = new TextOptions(font)
{
    Dpi = 96, // 1in = 96px
};
var wrappingLengthInInches = 3.875f;
textOptions.WrappingLength = wrappingLengthInInches * textOptions.Dpi;
Console.WriteLine($"Wrapping Length: {wrappingLengthInInches}in ({textOptions.WrappingLength}px)");

var lineCount = TextMeasurer.CountLines(text, textOptions);
Console.WriteLine($"Line Count: {lineCount}");

Console Output

Wrapping Length: 3.875in (372px)
Line Count: 2

Am I missing any other options to set? My understanding is that modern browsers and this library should match. The difference ends up being (looking at the layout generated internally by TextMeasurer) that TextMeasurer doesn't wrap the "a" before " faith", but browsers do, so browsers end up not having enough room for the last word "trample" and so wrap to a third line.

Answered by JimBobSquarePants

Feb 15, 2024

Today!! 🎉

View full answer

JimBobSquarePants · 2023-12-05T04:38:32Z

JimBobSquarePants
Dec 5, 2023
Maintainer

I think it simply boils down to accuracy. We measure the glyph points to determine wrapping and if the glyph (before rasterization) fits in those bounds it will not get wrapped.

Wrapping positions is determined by the algorithm defined by UAX14 and pass all the provided tests so there are no issues there.

Maybe the browser is less accurate?

0 replies

alecrodden · 2023-12-05T19:18:12Z

alecrodden
Dec 5, 2023
Author

Looks like the glyphs in both renderings line up, the library just allows a little bit more room for the "a"?

Is the difference in accuracy quantifiable? Can I make a small adjustment to get close enough to browser behavior? Unfortunately, I'm in a situation where I need to lay out text server-side (in order to know the exact page count ahead of time), but ultimately the browser renders the text client-side.

7 replies

JimBobSquarePants Feb 9, 2024
Maintainer

OK. So, I finally got a chance to investigate this. It turns out we were not breaking until too late if the break opportunity was at the very end of a calculated text line. I've opened a PR #380 that fixes this and other issues.

Six Labors

Firefox

alecrodden Feb 9, 2024
Author

That's awesome, thank you! When will this show up in stable?

JimBobSquarePants Feb 10, 2024
Maintainer

Likely Monday, I have a couple of low hanging performance optimisations I want to merge first.

JimBobSquarePants Feb 15, 2024
Maintainer

Today!! 🎉

Answer selected by JimBobSquarePants

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Need Help Understanding Line Wrapping Difference Between Browsers and TextMeasurer #367

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 7 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Need Help Understanding Line Wrapping Difference Between Browsers and TextMeasurer #367

alecrodden Dec 5, 2023

Replies: 2 comments · 7 replies

JimBobSquarePants Dec 5, 2023 Maintainer

alecrodden Dec 5, 2023 Author

JimBobSquarePants Feb 9, 2024 Maintainer

alecrodden Feb 9, 2024 Author

JimBobSquarePants Feb 10, 2024 Maintainer

JimBobSquarePants Feb 15, 2024 Maintainer

alecrodden
Dec 5, 2023

Replies: 2 comments 7 replies

JimBobSquarePants
Dec 5, 2023
Maintainer

alecrodden
Dec 5, 2023
Author

JimBobSquarePants Feb 9, 2024
Maintainer

alecrodden Feb 9, 2024
Author

JimBobSquarePants Feb 10, 2024
Maintainer

JimBobSquarePants Feb 15, 2024
Maintainer