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:
parent
bc748f66a2
commit
c66da1013e
2 changed files with 32 additions and 26 deletions
|
@ -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 {
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in a new issue