3 ms·

In my experience, browsers are not good at word-wrapping a div with, say, width=100px in a consistent way. First, different browsers break text at different poi

In my experience, browsers are not good at word-wrapping a div with, say, width=100px in a consistent way. First, different browsers break text at different points. Second, if the div is scaled (e.g. to 120px) and the font-size is scaled accordingly, this may again cause line breaks to occur at different points, potentially causing the number of lines to change. This was surprising to me. What are my options if I want to enforce consistent line breaks? I've thought about "freezing" line breaks by inserting <br/> tags, but to do that I would have to find out where the browser actually breaks the text, and I'm not sure how to go about that task.

d2wa 5y ago
> First, different browsers break text at different points. If the screen resolution and scaling is the same, and the operating system is the same, then you should get very consistent results across operating systems. They use the same algorithm, but subpixel hinting may differ slightly. If you stick to metrically compatible fonts for the different operating systems, you’ll get almost identical results across OSes too (assuming same screen resolution and scaling). https://www.ctrl.blog/entry/font-stack-text.html https://www.ctrl.blog/entry/font-stack-text.html
- loevborg 5y ago
  I agree that font rendering is fairly consistent. The problem is that a single pixel difference in vertical rendering can affect word-wrapping in such a way that a new line is added, making the div taller, potentially breaking the page layout. One related thing I know for a fact is different between browsers is how they treat fractional line-height. While Firefox accurately scales the line-height along with a fractional font-height, Chrome notoriously snaps the line-height to an integer number.
  - nyanpasu64 5y ago
    And both Firefox and Chrome quantize the height of text divs integer physical pixels, meaning the size of a div changes based on zoom level and DPI scaling, and can even take on fractional levels on non-100% scaling!
- nyanpasu64 5y ago
  > If the screen resolution and scaling is the same, and the operating system is the same, then you should get very consistent results across operating systems. Or so you'd think. On Linux Firefox, if you turn off system antialiasing using fontconfig, then glyph widths are quantized to integers. And due to a bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1732577 https://bugzilla.mozilla.org/show_bug.cgi?id=1732577), turning off hinting but keeping antialiasing on does the same thing. And I recall on Windows (Chrome?), if you zoom out a page until the text is really small, then the font stops shrinking when the zoom level decreases (causing text to take up more width than before).

d2wa 5y ago

> First, different browsers break text at different points. If the screen resolution and scaling is the same, and the operating system is the same, then you should get very consistent results across operating systems. They use the same algorithm, but subpixel hinting may differ slightly. If you stick to metrically compatible fonts for the different operating systems, you’ll get almost identical results across OSes too (assuming same screen resolution and scaling). https://www.ctrl.blog/entry/font-stack-text.html https://www.ctrl.blog/entry/font-stack-text.html

loevborg 5y ago
I agree that font rendering is fairly consistent. The problem is that a single pixel difference in vertical rendering can affect word-wrapping in such a way that a new line is added, making the div taller, potentially breaking the page layout. One related thing I know for a fact is different between browsers is how they treat fractional line-height. While Firefox accurately scales the line-height along with a fractional font-height, Chrome notoriously snaps the line-height to an integer number.
- nyanpasu64 5y ago
  And both Firefox and Chrome quantize the height of text divs integer physical pixels, meaning the size of a div changes based on zoom level and DPI scaling, and can even take on fractional levels on non-100% scaling!
nyanpasu64 5y ago
> If the screen resolution and scaling is the same, and the operating system is the same, then you should get very consistent results across operating systems. Or so you'd think. On Linux Firefox, if you turn off system antialiasing using fontconfig, then glyph widths are quantized to integers. And due to a bug (https://bugzilla.mozilla.org/show_bug.cgi?id=1732577 https://bugzilla.mozilla.org/show_bug.cgi?id=1732577), turning off hinting but keeping antialiasing on does the same thing. And I recall on Windows (Chrome?), if you zoom out a page until the text is really small, then the font stops shrinking when the zoom level decreases (causing text to take up more width than before).