search

seek-oss / capsize

Flipping how we define typography in CSS.
https://seek-oss.github.io/capsize/
MIT License
1.51k stars 37 forks source link

Fix a Firefox specific whitespace bug #132

Closed jimmynotjim closed 10 months ago

jimmynotjim commented 1 year ago

When text managed by Cap Size is contained within a table element and has white-space set as break-line, pre, or pre-wrap the :before and :after pseudo elements pick up excess spacing due to being display: table. This fix resets the white-space value of the pseudo elements to remove the excess spacing.

Open this demo in Firefox to view the bug and fix https://stackblitz.com/edit/vitejs-vite-dwmuts?file=src%2FApp.css.ts,src%2FApp.tsx

changeset-bot[bot] commented 1 year ago

⚠️ No Changeset found

Latest commit: 957adcb3997a439cb0f504b0c7d58f110f85be94

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

michaeltaranto commented 10 months ago

Hey Jim, thanks for the PR.

I was looking at adding a test and what stood out to me when reviewing your demo was the merging of layout related styles and the capsize styles on the same element. This is not recommended, as the capsize styles will be forever competing with a growing list of possible collisions.

Instead, I would recommend using nested elements:

<table style="border-collapse: collapse;">
  <tr>
    <td>
      <div class="capsizeStyle">
        <span style="display: block; white-space: break-spaces;">Table cell</span>
      </div>
    </td>
  </tr>
</table>

This is the approach we take for text truncation. We address this in the FAQs under "What is the recommended way to handle text overflow/truncation?", but not in the readme. I'll look to add something in there too.

Apologies for not progressing this discussion sooner, let me know your thoughts.

michaeltaranto commented 10 months ago

Added a note under the createStyleObject docs to capture this advice.

If required we can continue this discussion, but i'll close the PR for now.