search

owid / owid-grapher

A platform for creating interactive data visualizations
https://ourworldindata.org
MIT License
1.37k stars 230 forks source link

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

Closed sophiamersmann closed 3 months ago

sophiamersmann commented 3 months ago

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
Screenshot 2024-06-05 at 16 46 18 Screenshot 2024-06-05 at 16 46 12

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

sophiamersmann commented 3 months ago

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

Join @sophiamersmann and the rest of your teammates on Graphite Graphite

notion-workspace[bot] commented 3 months ago

Allow line breaks after hyphens

owidbot commented 3 months ago
Quick links (staging server): Site Admin Wizard

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

SVG tester: Number of differences (default views): 11 ([7b136e](https://github.com/owid/owid-grapher-svgs/commit/7b136e9449a730cc84f89e9d80512795597add6c)) ❌ Number of differences (all views): 0 ✅

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

sophiamersmann commented 3 months ago

Thanks for the review! I updated the tests :)