✨ (grapher) allow line breaks after hyphens / TAS-524

[sophiamersmann]

Summary

Adds the ability to break after hyphens (-) to TextWrap. This is then used for slope labels to reduce the space we need for the labels on both sides.

I considered making this the default but decided against it because many labels looked worse / less balanced with additional line breaks after hyphens.

SVG tester

Some charts come back with a difference, but they're visually the same. The new code trims whitespace from each side:

Svg was different for 2649. The difference starts at character 15152.
Reference: 5" y="465.895">home) </tspan></text></g>
Current  : 5" y="465.895">home)</tspan></text></g><

Svg was different for 3552. The difference starts at character 11307.
Reference: "4.995000000000001"> Lower respiratory i
Current  : "4.995000000000001">Lower respiratory in

Svg was different for 5215. The difference starts at character 8953.
Reference: urement policies and </tspan><tspan x="1
Current  : urement policies and</tspan><tspan x="16

Screenshots

Before	After

Example chart: https://ourworldindata.org/grapher/maternal-mortality-slope-chart?country=High-income+countries~Lower-middle-income+countries

[sophiamersmann]

• ✨ (grapher) allow line breaks after hyphens / TAS-524 #3689 👈
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[notion-workspace]

Allow line breaks after hyphens

[owidbot]

Quick links (staging server):

Site	Admin	Wizard

Login: ssh owid@staging-site-grapher-hyphen-breaks

• Site-screenshots: https://github.com/owid/site-screenshots/compare/grapher-hyphen-breaks
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/grapher-hyphen-breaks

SVG tester:

Number of differences (default views): 11 (7b136e) ❌
Number of differences (all views): 0 ✅

Edited: 2024-06-10 11:38:13 UTC
Execution time: 1.17 seconds

[danyx23]

Looks good! I'd change the tests a bit though. I think it would be good to add two simple unit tests that just demonstrate what splitIntoFragments does with just a space and with space and hyphen.

I think it would also be more interesting to change the existing property style test to include the hyphen, rather than just default to space (but I really like that you added this kind of test :) )

[sophiamersmann]

Thanks for the review! I updated the tests :)