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.
This commit is contained in:
Mime Čuvalo 2024-06-03 09:28:41 +01:00 committed by GitHub
parent bc748f66a2
commit c66da1013e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 32 additions and 26 deletions

View file

@ -788,32 +788,38 @@ input,
/* remove overflow from textarea on windows */
margin: 0px;
padding: 0px;
border: 0px;
color: inherit;
caret-color: var(--color-text);
appearance: auto;
background: none;
border-image: none;
font-size: inherit;
font-family: inherit;
font-weight: 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;
border: 0px;
caret-color: var(--color-text);
color: inherit;
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 {

View file

@ -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,
height: textHeight,
width: textWidth ? Math.ceil(textWidth) : undefined,
height: textHeight ? Math.ceil(textHeight) : undefined,
}}
>
<div className={`${cssPrefix} tl-text tl-text-content`} dir="auto">