text labels: address some rendering inconsistencies with the content vs. textarea (#3830)

original bug was this:


https://github.com/tldraw/tldraw/assets/469604/1bb3c401-4221-4981-b4d9-7325ea27944c

it seemed to be related to how the Draw font specifically was kerning or
something (maybe ligatures??), we don't really know. it seems to be only
Chrome specific.

See video:


https://github.com/tldraw/tldraw/assets/469604/1a54ba78-ebd5-4ddf-9351-3ecc44a8702a

Also, there's a line height issue when resizing vertically:


https://github.com/tldraw/tldraw/assets/469604/b7b3ac16-70a6-476c-8f23-e619725799b6

So, to address these various things:
- for the overflow bug (and related Draw font issue), we do `Math.ceil`
to help with this fuzziness. I _think_ this will help but I'm not 100%
certain this will help in all cases.
- for the line height issue, we do `Math.floor` to avoid this subpixel
wonkiness
- for good measure, I made sure that the content & textarea rendering
has matching CSS styles (things like `font-feature-settings`, etc.) the
content now matches what the `textarea` has be default in Chrome's user
agent styling.

fuuuuuuun 🥳 

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [x] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [ ] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know


### Release Notes

- Text labels: fix some inconsistencies with rendering.

packages/editor/editor.css

@@ -788,32 +788,38 @@ input,
 	/* remove overflow from textarea on windows */
 	margin: 0px;
 	padding: 0px;
-	border: 0px;
+
-	color: inherit;
+	appearance: auto;
-	caret-color: var(--color-text);
 	background: none;
 	border-image: none;
-	font-size: inherit;
+	border: 0px;
-	font-family: inherit;
+	caret-color: var(--color-text);
-	font-weight: inherit;
+	color: inherit;
-	line-height: inherit;
-	font-variant: inherit;
-	font-style: inherit;
-	text-align: inherit;
-	letter-spacing: inherit;
-	text-shadow: inherit;
-	outline: none;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	text-rendering: auto;
-	text-transform: none;
-	text-indent: 0px;
-	display: inline-block;
-	appearance: auto;
 	column-count: initial !important;
-	writing-mode: horizontal-tb !important;
+	display: inline-block;
+	font-family: inherit;
+	font-feature-settings: normal;
+	font-kerning: auto;
+	font-optical-sizing: auto;
+	font-size: inherit;
+	font-stretch: 100%;
+	font-style: inherit;
+	font-variant: inherit;
+	font-variation-settings: normal;
+	font-weight: inherit;
+	letter-spacing: inherit;
+	line-height: inherit;
+	outline: none;
+	overflow-wrap: break-word;
+	text-align: inherit;
+	text-indent: 0px;
+	text-rendering: auto;
+	text-shadow: inherit;
+	text-transform: none;
+	white-space: pre-wrap;
 	word-spacing: 0px;
+	word-wrap: break-word;
+	writing-mode: horizontal-tb !important;
 }
 
 .tl-text-measure {

packages/tldraw/src/lib/shapes/shared/TextLabel.tsx

@@ -96,12 +96,12 @@ export const TextLabel = React.memo(function TextLabel({
 				className={`${cssPrefix}-label__inner tl-text-content__wrapper`}
 				style={{
 					fontSize,
-					lineHeight: fontSize * lineHeight + 'px',
+					lineHeight: Math.floor(fontSize * lineHeight) + 'px',
 					minHeight: lineHeight + 32,
-					minWidth: textWidth || 0,
+					minWidth: Math.ceil(textWidth || 0),
 					color: labelColor,
-					width: textWidth,
+					width: textWidth ? Math.ceil(textWidth) : undefined,
-					height: textHeight,
+					height: textHeight ? Math.ceil(textHeight) : undefined,
 				}}
 			>
 				<div className={`${cssPrefix} tl-text tl-text-content`} dir="auto">