Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: accurate Equation measurements #1445

Merged
merged 10 commits into from Jun 2, 2023
Merged

feat: accurate Equation measurements #1445

merged 10 commits into from Jun 2, 2023

Conversation

wodeni
Copy link
Member

@wodeni wodeni commented Jun 1, 2023

Description

Resolves #1438, resolves #1448.
Related: #842

For #340, we introduced a way to scale MathJax-generated SVGs such that Equations have visually-consistent sizes in a single diagram. However, #1438 points out that this scaling conversion doesn't produce labels of accurate font size. This PR does exact conversion from MathJax SVG units to pixels for width, height, descent, and ascent of our Equation shape.

Implementation strategy and design decisions

The CSS standard defines all the units, which is implemented by the MathJax source code.

When MathJax generates an SVG, the width, height, viewBox, and vertical-align is computed in https://github.com/mathjax/MathJax-src/blob/a5ae9485cb7441fdd5ea59645cfbd1c12b7d53e1/ts/output/svg.ts#L239.

Our implementation computes the width, height, descent, and ascent by using these values from above. See inline comments for more details.

Examples with steps to reproduce them

https://tex-measure.penrose-72l.pages.dev/try/?gist=5c192c1186607e52d56b86e48ab7c3f5
https://tex-measure.penrose-72l.pages.dev/try/?gist=5e4f9cd917276e11ebaa8e798a4a62c2

Checklist

  • I have commented my code, particularly in hard-to-understand areas
  • I have reviewed any generated registry diagram changes

Open questions

  • Now that we parse the fontSize of Equation, only absolute units are accepted for now. The conversion to relative units such as em and pt needs font-specific information, and there's no guarantee that Text is going to render the same way. It is possible to support them, but this is requires careful work on both Text and Equation. Would love some help on supporting them! Given my own time constraints I'm inclined to convert existing relative fontSizes to absolute units so we can merge this PR.
  • I reverted the fix for Fix newline support for MathJax v3 #339 because it causes MathJax to return a constant height no matter the content of the label. We may consider supporting it, but this requires parsing the content and finding TeX linebreaks. I think this is out of scope as well.

@cloudflare-pages
Copy link

cloudflare-pages bot commented Jun 1, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 0e44515
Status: ✅  Deploy successful!
Preview URL: https://58191c71.penrose-72l.pages.dev
Branch Preview URL: https://tex-measure.penrose-72l.pages.dev

View logs

@wodeni wodeni changed the title refactor: scale Equation to match fontSize setting refactor: accurate Equation measurements Jun 2, 2023
@wodeni wodeni changed the title refactor: accurate Equation measurements feat: accurate Equation measurements Jun 2, 2023
@github-actions
Copy link

github-actions bot commented Jun 2, 2023

± Registry diff

M	animation/center-shrink-circle.svg
M	atoms-and-bonds/one-water-molecule.svg
M	atoms-and-bonds/wet-floor.svg
M	curve-examples/blobs.svg
M	curve-examples/cubic-bezier.svg
M	exterior-algebra/vector-wedge.svg
M	geometry-domain/siggraph-teaser.svg
M	geometry-domain/textbook_problems/c01p01.svg
M	geometry-domain/textbook_problems/c03p01.svg
M	geometry-domain/textbook_problems/c05p01.svg
M	geometry-domain/textbook_problems/c05p13.svg
M	geometry-domain/textbook_problems/c11p12.svg
M	geometry-domain/textbook_problems/ex.svg
M	group-theory/quaternion-cayley-graph.svg
M	group-theory/quaternion-multiplication-table.svg
M	lagrange-bases/lagrange-bases.svg
M	linear-algebra-domain/two-vectors-perp.svg
M	logic-circuit-domain/half-adder.svg
M	matrix-ops/tests/matrix-matrix-addition.svg
M	matrix-ops/tests/matrix-matrix-division-elementwise.svg
M	matrix-ops/tests/matrix-matrix-multiplication-elementwise.svg
M	matrix-ops/tests/matrix-matrix-multiplication.svg
M	matrix-ops/tests/matrix-matrix-subtraction.svg
M	matrix-ops/tests/matrix-transpose.svg
M	matrix-ops/tests/matrix-vector-left-multiplication.svg
M	matrix-ops/tests/matrix-vector-right-multiplication.svg
M	matrix-ops/tests/scalar-vector-division.svg
M	matrix-ops/tests/scalar-vector-left-multiplication.svg
M	matrix-ops/tests/scalar-vector-right-multiplication.svg
M	matrix-ops/tests/vector-vector-addition.svg
M	matrix-ops/tests/vector-vector-division-elementwise.svg
M	matrix-ops/tests/vector-vector-multiplication-elementwise.svg
M	matrix-ops/tests/vector-vector-outerproduct.svg
M	matrix-ops/tests/vector-vector-subtraction.svg
M	mobius/mobius.svg
M	molecules/glutamine.svg
M	molecules/nitricacid-lewis.svg
M	persistent-homology/persistent-homology.svg
M	ray-tracing/bidirectional.svg
M	ray-tracing/next-event-estimation.svg
M	ray-tracing/path-trace.svg
M	set-theory-domain/continuousmap.svg
M	set-theory-domain/tree-venn-3d.svg
M	set-theory-domain/tree-venn.svg
M	shape-distance/lines-around-rect.svg
M	shape-spec/all-shapes.svg
M	shape-spec/arrowheads.svg
M	timeline/penrose.svg
M	triangle-mesh-2d/diagrams/angle-equivalence.svg
M	triangle-mesh-2d/diagrams/concyclic-pair.svg
M	triangle-mesh-2d/diagrams/cotan-formula.svg
M	triangle-mesh-2d/diagrams/relative-orientation.svg
M	triangle-mesh-2d/diagrams/triangle-centers.svg
M	triangle-mesh-3d/two-triangles.svg

📊 Performance

Key

Note that each bar component rounds up to the nearest 100ms, so each full bar is an overestimate by up to 400ms.

     0s   1s   2s   3s   4s   5s   6s   7s   8s
     |    |    |    |    |    |    |    |    |
name ▝▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▞▀▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▄▖
      compiling labeling optimizing rendering

If a row has only one bar instead of four, that means it's not a trio and the bar just shows the total time spent for that example, again rounded up to the nearest 100ms.

Data

                                                          0s   1s   2s   3s   4s   5s   6s   7s
                                                          |    |    |    |    |    |    |    |
set-theory-domain/tree-venn                               ▝▀▚▚
set-theory-domain/tree-tree                               ▝▀▞▖
set-theory-domain/tree-venn-3d                            ▝▚▚
group-theory/quaternion-multiplication-table              ▝▀▀▚▞▖
group-theory/quaternion-cayley-graph                      ▝▀▚▚
atoms-and-bonds/wet-floor                                 ▝▚▀▖
atoms-and-bonds/one-water-molecule                        ▝▞▖
set-theory-domain/continuousmap                           ▝▞▖
linear-algebra-domain/two-vectors-perp                    ▝▚▚
molecules/nitricacid-lewis                                ▝▀▀▚▀▀▖
exterior-algebra/vector-wedge                             ▝▚▚
shape-spec/all-shapes                                     ▝▚▚▄▄
shape-spec/arrowheads                                     ▝▞▖
graph-domain/textbook/sec1/fig1                           ▝▀▀▀▞▀▖
graph-domain/textbook/sec1/fig2                           ▝▀▀▀▞▀▖
graph-domain/textbook/sec1/fig3                           ▝▀▀▀▚▀▚
graph-domain/textbook/sec1/fig4                           ▝▀▀▀▚▀▀▚
graph-domain/textbook/sec1/fig5                           ▝▀▀▀▀▀▀▞▀▀▀▚
graph-domain/textbook/sec1/fig6                           ▝▀▀▀▀▀▀▀▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▖
graph-domain/textbook/sec1/fig7                           ▝▀▚▀▖
graph-domain/textbook/sec1/fig8a                          ▝▀▀▀▀▀▚▀▀▀▀▀▖
graph-domain/textbook/sec1/fig8b                          ▝▀▀▀▞▀▀▖
graph-domain/textbook/sec1/fig9                           ▝▀▀▞▚
graph-domain/textbook/sec1/fig10                          ▝▀▀▞▖
graph-domain/textbook/sec1/fig11                          ▝▀▀▀▚▀▚
graph-domain/textbook/sec1/fig12                          ▝▀▀▀▀▀▞▀▀▀▀▀▖
graph-domain/textbook/sec1/fig13                          ▝▀▀▀▞▀▚
graph-domain/textbook/sec2/fig3                           ▝▀▀▀▀▀▀▀▞▀▀▀▀▚
graph-domain/textbook/sec2/fig4                           ▝▀▀▀▀▚▀▀▀▚
graph-domain/textbook/sec2/fig5                           ▝▀▀▀▀▀▀▀▀▀▞▀▀▀▀▚
graph-domain/textbook/sec2/fig6                           ▝▀▀▀▀▀▀▀▞▀▀▀▀▀▚
graph-domain/textbook/sec2/fig9                           ▝▀▀▀▀▀▀▀▀▀▀▚▀▀▀▀▀▀▀▖
graph-domain/textbook/sec2/fig10a                         ▝▀▀▚▀▀▚
graph-domain/textbook/sec2/fig10b                         ▝▀▀▚▀▚
graph-domain/textbook/sec2/fig11a                         ▝▀▞▖
graph-domain/textbook/sec2/fig11b                         ▝▀▞▖
graph-domain/textbook/sec2/fig11c                         ▝▀▚▚
graph-domain/textbook/sec2/fig12                          ▝▀▀▞▖
graph-domain/textbook/sec2/fig13                          ▝▀▀▀▀▀▀▀▀▀▀▚▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚
graph-domain/textbook/sec2/fig14                          ▝▀▀▀▚▀▖
graph-domain/textbook/sec2/fig16b                         ▝▀▚▚
geometry-domain/textbook_problems/c05p13                  ▝▀▚▚
geometry-domain/textbook_problems/c01p01                  ▝▀▞▖
geometry-domain/textbook_problems/c03p01                  ▝▀▚▚
geometry-domain/textbook_problems/c05p01                  ▝▀▚▚
geometry-domain/textbook_problems/ex                      ▝▀▀▚▀▖
triangle-mesh-3d/two-triangles                            ▝▚▚
random-sampling/test                                      ▝▀▀▀▞▖
geometry-domain/textbook_problems/c11p12                  ▝▀▚▚
word-cloud/example                                        ▝▀▞▖
geometry-domain/siggraph-teaser                           ▝▀▀▞▖
minkowski-tests/maze/non-convex                           ▝▀▞▖
lagrange-bases/lagrange-bases                             ▝▚▚
hypergraph/hypergraph                                     ▝▀▀▚▀▀▀▀▀▀▀▀▀▀▚
persistent-homology/persistent-homology                   ▝▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚▖
walk-on-spheres/laplace-estimator                         ▝▀▞▖
walk-on-spheres/poisson-estimator                         ▝▀▞▚
walk-on-spheres/nested-estimator                          ▝▀▀▞▀▀▚
walk-on-spheres/offcenter-estimator                       ▝▀▞▀▖
shape-distance/points-around-star                         ▝▀▀▀▞▖
shape-distance/points-around-polyline                     ▝▀▀▞▖
shape-distance/points-around-line                         ▝▀▚▚
shape-distance/lines-around-rect                          ▝▚▚
fake-3d-linear-algebra/projection                         ▝▞▖
animation/center-shrink-circle                            ▝▞▖
structural-formula/molecules/caffeine                     ▝▀▀▞▚▄
mobius/mobius                                             ▝▚▚
molecules/glutamine                                       ▝▀▞▖
matrix-ops/tests/matrix-matrix-addition                   ▝▚▚
matrix-ops/tests/matrix-matrix-division-elementwise       ▝▚▚
matrix-ops/tests/matrix-matrix-multiplication-elementwise ▝▚▚
matrix-ops/tests/matrix-matrix-multiplication             ▝▚▚
matrix-ops/tests/matrix-matrix-subtraction                ▝▚▚
matrix-ops/tests/matrix-transpose                         ▝▚▚
matrix-ops/tests/matrix-vector-left-multiplication        ▝▚▚
matrix-ops/tests/matrix-vector-right-multiplication       ▝▚▚
matrix-ops/tests/scalar-vector-division                   ▝▚▚
matrix-ops/tests/scalar-vector-left-multiplication        ▝▚▚
matrix-ops/tests/scalar-vector-right-multiplication       ▝▚▚
matrix-ops/tests/vector-vector-addition                   ▝▚▚
matrix-ops/tests/vector-vector-division-elementwise       ▝▚▚
matrix-ops/tests/vector-vector-multiplication-elementwise ▝▚▚
matrix-ops/tests/vector-vector-outerproduct               ▝▚▚
matrix-ops/tests/vector-vector-subtraction                ▝▚▚
logic-circuit-domain/half-adder                           ▝▀▞▖
curve-examples/cubic-bezier                               ▝▀▞▀▀▖
triangle-mesh-2d/diagrams/cotan-formula                   ▝▀▞▚
triangle-mesh-2d/diagrams/concyclic-pair                  ▝▀▞▚
triangle-mesh-2d/diagrams/halfedge-mesh                   ▝▀▞▖
triangle-mesh-2d/diagrams/relative-orientation            ▝▀▞▖
triangle-mesh-2d/diagrams/triangle-centers                ▝▀▞▖
triangle-mesh-2d/diagrams/angle-equivalence               ▝▀▚▀▀▚
timeline/penrose                                          ▝▀▀▞▖
graph-domain/textbook/sec5/ex32                           ▝▀▀▀▀▚▀▀▀▀▀▀▀▚
curve-examples/open-elastic-curve                         ▝▀▀▞▀▖
curve-examples/closed-elastic-curve                       ▝▀▀▚▀▚
graph-domain/other-examples/arpanet                       ▝▀▀▀▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▚
graph-domain/other-examples/nyc-subway                    ▝▀▀▀▀▀▚▀▀▀▀▀▚
curve-examples/blobs                                      ▝▀▀▀▀▀▀▀▀▚▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▖
curve-examples/space-curves                               ▝▀▀▀▀▀▚▀▀▀▀▖
solid/example                                             ▐
geometric-queries/ray-intersect/test-group                ▝▀▀▀▀▀▀▀▀▚▚
ray-tracing/path-trace                                    ▝▀▀▚▚
ray-tracing/bidirectional                                 ▝▀▀▞▖
ray-tracing/next-event-estimation                         ▝▀▀▚▚
geometric-queries/test                                    ▝▀▚▚
geometric-queries/closest-point/test-group                ▝▚▚
geometric-queries/closest-point/test                      ▝▚▚
geometric-queries/closest-silhouette-point/test           ▝▚▚
geometric-queries/ray-intersect/test                      ▝▀▀▀▀▀▀▀▀▚▚

@wodeni
Copy link
Member Author

wodeni commented Jun 2, 2023

Note on relative units: although pt is nominally an "absolute" unit, MathJax treats it as a "relative" unit like em: https://github.com/mathjax/MathJax-src/blob/a5ae9485cb7441fdd5ea59645cfbd1c12b7d53e1/ts/util/lengths.ts#L42.

I'm not sure if this has any implications to Penrose, but I am erring on the safer side of not providing support for it for now. More experimentation is needed to find out how pt is handled by both Text and Equation to make sure there's a one-to-one relationship between their sizes.

@wodeni wodeni marked this pull request as ready for review June 2, 2023 17:25
@samestep
Copy link
Collaborator

samestep commented Jun 2, 2023

Glancing at the registry diff, what's going on with exterior-algebra/vector-wedge.svg and the matrix-ops examples?

Copy link
Collaborator

@samestep samestep left a comment

Choose a reason for hiding this comment

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

Looks great to me! Thanks so much for doing this deep dive 😃

@wodeni wodeni merged commit 93d30f5 into main Jun 2, 2023
10 checks passed
@wodeni wodeni deleted the tex-measure branch June 2, 2023 18:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants