[experiment] add 4px horizontal padding to text

[steveruizok]

This PR adds padding to the left and right of text, similar to arrow labels.

Change Type

• patch — Bug fix

Test Plan

1. Check out the delta on large projects

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
examples	✅ Ready (Inspect)	Visit Preview	Feb 16, 2024 8:43pm

1 Ignored Deployment

Name	Status	Preview	Updated (UTC)
tldraw-docs	⬜️ Ignored (Inspect)		Feb 16, 2024 8:43pm

[steveruizok]

I considered adding a -4px offset to all text shapes, however this might disrupt alignment in projects; and disrupting alignment may actually be a bigger change than the visual offset.

[SomeHats]

I feel like the thing we're trying to do here is make the top/bottom spacing (which is sort of a function of the font and line-height) be about the same as the left-right spacing. So I think we should make this be proportional to the font size, rather than a hard-coded 4px. It avoids quirks like this:

Here, we have two different sizes of text (S & XL) scaled to be the same size (text sizing lol). Both of these look a bit off - the padding is too big on the top (S) and too small on the bottom (XL).

Also, curious about the alignment thing! What do you mean by that?

[mimecuvalo]

drive-by comment: i'd love for us to have a cssConstants.ts file that auto-generates var(--padding-for-something) for use in a .css file so that the same constant can be use across the .ts/.css chasm. happy to help build that separately for this kind of thing that will get out-of-sync potentially.

[steveruizok]

Here, we have two different sizes of text (S & XL) scaled to be the same size (text sizing lol). Both of these look a bit off - the padding is too big on the top (S) and too small on the bottom (XL).

Oh I'd overlooked scaling. At minimum we'd need to divide the padding by scale.