Skip to content

fix: use makeEm() consistently to truncate long CSS decimals#4181

Merged
grigoriy-reshetniak merged 3 commits intoKaTeX:mainfrom
jaydeep-pipaliya:fix/truncate-css-decimal-values
Mar 26, 2026
Merged

fix: use makeEm() consistently to truncate long CSS decimals#4181
grigoriy-reshetniak merged 3 commits intoKaTeX:mainfrom
jaydeep-pipaliya:fix/truncate-css-decimal-values

Conversation

@jaydeep-pipaliya
Copy link
Copy Markdown
Contributor

Summary

  • Fixed 3 places where raw numbers were concatenated with "em" instead of using makeEm(), producing unnecessarily long decimals like 1.1764999999999999em
  • domTree.ts: SymbolNode.toMarkup()this.italic + "em"makeEm(this.italic)
  • delimiter.ts: makeStackedDelim().toFixed(3) + "em"makeEm() (also normalizes to .toFixed(4) for consistency)
  • functions/enclose.ts: mathmlBuilderthk + "em"makeEm(thk)

Fixes #897

Test plan

  • Run yarn test to verify snapshot tests pass (some may need updating with -u)
  • Inspect rendered output for expressions using italic symbols, tall delimiters, and \fcolorbox to verify CSS values are truncated to 4 decimal places

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 26, 2026

Greptile Summary

This PR fixes three locations where numeric values were concatenated directly with "em" instead of using the existing makeEm() utility, which rounds to 4 decimal places and removes trailing zeros. The result is cleaner, consistent CSS output (e.g. 0.1176em instead of 0.11764999999999999em).\n\nKey changes:\n- src/domTree.tsSymbolNode.toMarkup(): this.italic + "em"makeEm(this.italic) for margin-right\n- src/delimiter.tsmakeStackedDelim(): .toFixed(3) + "em"makeEm() for SVG width/height attributes (minor precision bump from 3→4 dp, behaviorally identical for integer/1000 inputs)\n- src/functions/enclose.tsmathmlBuilder: thk + "em"makeEm(thk) for the \\fcolorbox border style\n\nAll three files already import makeEm from ../units, so no new imports are required. The fix is minimal, correct, and consistent with how the rest of the codebase produces em values.

Confidence Score: 5/5

Safe to merge — all three changes are correct, imports are already present, and no logic is altered beyond decimal truncation.

The changes are tiny and mechanical: swap raw string concatenation for an already-imported helper that's used identically everywhere else in the codebase. makeEm already exists in all three files' import lists. The only behavioural delta in delimiter.ts (3→4 dp) is inconsequential because the inputs are always integers divided by 1000, giving at most 3 significant decimal digits. No new risk is introduced.

No files require special attention.

Important Files Changed

Filename Overview
src/domTree.ts Replaces raw this.italic + "em" with makeEm(this.italic) to truncate long float values in the margin-right CSS property; correct and clean.
src/delimiter.ts Replaces .toFixed(3) + "em" with makeEm() for SVG width/height; since inputs are integers divided by 1000 (≤3 decimal digits), output is effectively identical in practice.
src/functions/enclose.ts Replaces raw thk + "em" string concatenation with makeEm(thk) in the MathML border style; straightforward and correct.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["Raw number\n(e.g. 0.11764999999...)"] -->|"old: + \"em\""| B["Long CSS string\n0.11764999999999999em"]
    A -->|"new: makeEm(n)"| C["makeEm(n)\n+n.toFixed(4) + 'em'"]
    C --> D["Clean CSS string\n0.1176em"]

    subgraph "Call sites fixed"
        E["domTree.ts\nSymbolNode.toMarkup()\nmargin-right: italic"]
        F["delimiter.ts\nmakeStackedDelim()\nSVG width / height"]
        G["enclose.ts\nmathmlBuilder()\nborder thickness thk"]
    end

    E --> A
    F --> A
    G --> A
Loading

Reviews (1): Last reviewed commit: "fix: use makeEm() consistently to trunca..." | Re-trigger Greptile

options.minRuleThickness, // user override
);
node.setAttribute("style", "border: " + thk + "em solid " +
node.setAttribute("style", "border: " + makeEm(thk) + " solid " +
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use template literals here an below.

@grigoriy-reshetniak
Copy link
Copy Markdown
Collaborator

Could you please also update snapshots?

Replace direct number + "em" concatenation with makeEm() which applies
.toFixed(4) rounding. This avoids outputting values like
"1.1764999999999999em" caused by floating-point arithmetic.

Fixes KaTeX#897
Update snapshot to reflect the consistent use of makeEm() which
rounds to 4 decimal places (e.g. 0.10903em → 0.109em).
Address review feedback: convert string concatenation to template
literals in domTree.ts and enclose.ts.
@jaydeep-pipaliya jaydeep-pipaliya force-pushed the fix/truncate-css-decimal-values branch from a8da4f8 to 08c8746 Compare March 26, 2026 07:04
@codecov
Copy link
Copy Markdown

codecov bot commented Mar 26, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 93.30%. Comparing base (314f856) to head (08c8746).
⚠️ Report is 109 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #4181      +/-   ##
==========================================
+ Coverage   93.15%   93.30%   +0.14%     
==========================================
  Files          91       91              
  Lines        6795     6810      +15     
  Branches     1582     1582              
==========================================
+ Hits         6330     6354      +24     
- Misses        429      454      +25     
+ Partials       36        2      -34     
Files with missing lines Coverage Δ
src/delimiter.ts 87.35% <100.00%> (ø)
src/domTree.ts 77.52% <100.00%> (ø)
src/functions/enclose.ts 98.54% <100.00%> (ø)

... and 13 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 75d137b...08c8746. Read the comment docs.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jaydeep-pipaliya
Copy link
Copy Markdown
Contributor Author

Thanks for the review @grigoriy-reshetniak! I've updated the PR:

  • Switched to template literals in both domTree.ts and enclose.ts
  • Updated the snapshot (0.10903em0.109em)

Let me know if anything else needs changing.

@grigoriy-reshetniak grigoriy-reshetniak merged commit 0967dcc into KaTeX:main Mar 26, 2026
9 checks passed
@grigoriy-reshetniak
Copy link
Copy Markdown
Collaborator

Looks good, thank you!

@edemaine
Copy link
Copy Markdown
Member

🎉 This PR is included in version 0.16.43 🎉

The release is available on:

Your semantic-release bot 📦🚀

yonas pushed a commit to yonasBSD/KaTeX that referenced this pull request Mar 27, 2026
## [0.16.43](KaTeX/KaTeX@v0.16.42...v0.16.43) (2026-03-26)

### Bug Fixes

* use makeEm() consistently to truncate long CSS decimals ([KaTeX#4181](KaTeX#4181)) ([0967dcc](KaTeX@0967dcc))
dadezzz pushed a commit to dadezzz/ice-notes that referenced this pull request Mar 31, 2026
This PR contains the following updates:

| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [katex](https://katex.org) ([source](https://github.com/KaTeX/KaTeX)) | [`0.16.40` → `0.16.44`](https://renovatebot.com/diffs/npm/katex/0.16.40/0.16.44) | ![age](https://developer.mend.io/api/mc/badges/age/npm/katex/0.16.44?slim=true) | ![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/katex/0.16.40/0.16.44?slim=true) |

---

### Release Notes

<details>
<summary>KaTeX/KaTeX (katex)</summary>

### [`v0.16.44`](https://github.com/KaTeX/KaTeX/blob/HEAD/CHANGELOG.md#01644-2026-03-27)

[Compare Source](KaTeX/KaTeX@v0.16.43...v0.16.44)

##### Bug Fixes

- remove extra \jot space at bottom of align/gather/etc. ([#&#8203;4184](KaTeX/KaTeX#4184)) ([3870ee9](KaTeX/KaTeX@3870ee9))

### [`v0.16.43`](https://github.com/KaTeX/KaTeX/blob/HEAD/CHANGELOG.md#01643-2026-03-26)

[Compare Source](KaTeX/KaTeX@v0.16.42...v0.16.43)

##### Bug Fixes

- use makeEm() consistently to truncate long CSS decimals ([#&#8203;4181](KaTeX/KaTeX#4181)) ([0967dcc](KaTeX/KaTeX@0967dcc))

### [`v0.16.42`](https://github.com/KaTeX/KaTeX/blob/HEAD/CHANGELOG.md#01642-2026-03-24)

[Compare Source](KaTeX/KaTeX@v0.16.41...v0.16.42)

##### Features

- \underbracket and \overbracket ([#&#8203;4147](KaTeX/KaTeX#4147)) ([5be9abb](KaTeX/KaTeX@5be9abb))

### [`v0.16.41`](https://github.com/KaTeX/KaTeX/blob/HEAD/CHANGELOG.md#01641-2026-03-24)

[Compare Source](KaTeX/KaTeX@v0.16.40...v0.16.41)

##### Bug Fixes

- \sout in text mode ([#&#8203;4173](KaTeX/KaTeX#4173)) ([e748578](KaTeX/KaTeX@e748578))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My44Ni4wIiwidXBkYXRlZEluVmVyIjoiNDMuOTkuMSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->

Co-authored-by: Renovate Bot <renovate@zarantonello.dev>
Co-committed-by: Renovate Bot <renovate@zarantonello.dev>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

used a fixed number of decimal places in output

3 participants