Long formulae are truncated on phone

[ice1000]

Code:

#import "@preview/ctheorems:1.1.2": *
#import "/book.typ": book-page
#show: book-page.with(title: "Tesla Zhang")

The purpose of this page is to test some random things.

#show: thmrules.with(qed-symbol: $square$)

#let definition = thmbox("definition", "Definition", inset: (x: 1.2em, top: 1em))

#let emsp = h(2em)
#definition("Heterogeneous Composition")[
$ (A:bb(I) → cal(U)_1 #emsp φ:bb(F) #emsp r, s : bb(I)
  #emsp u: (i:bb(I)) → "Partial"(φ ∨ i=r, A(i)))/(
  "com"^(r arrow.squiggly s)(u) : { A(s) | φ ∨ r=s ↦ u(s) }) $
]

On mobile, it is truncated:

Trebor said maybe we should change the css into overflow-x: auto, currently it says overflow-x: hidden, is that why?

[Myriad-Dreamin]

It is a long term issues that how to show long math on small screen devices. The canonical way is breaking down equations manually:

#import "@preview/book:0.2.4": get-page-width
#let page-width = get-page-width()

#if page-width < 400pt { $shorter$ } else { $ longer $ }

Notably, this also happens in writing math in LaTeX.

Any smarter idea?

[Myriad-Dreamin]

We can turn overflow-x: hidden into overflow-x: auto, but it is not nice to have a page with overflowed content.

[ice1000]

Any smarter idea?

Can every math block be in its own box and make that box horizontally scrollable? Is this very hard to achieve?

[ice1000]

I don't want to ask for something super difficult...

[ice1000]

We can turn overflow-x: hidden into overflow-x: auto, but it is not nice to have a page with overflowed content.

Would be nice if this can be a custom option!

[Myriad-Dreamin]

Since we have customized label now, I believe we can experiment it a bit.

Context, there is a "data-typst-label" to utilize:

https://github.com/typst/typst/blob/bb38a01d0625d5bdab0af50daf479e60c774d90e/crates/typst-svg/src/lib.rs#L254-L256C10