Settings the `margin`s to 0 in SVG Export | Typst | Page 1

olive matrix Oct 25, 2023, 5:27 PM

#

Hello! I'm experimenting with making a Typst inline math previewer for Emacs just like org-latex-preview and co.
I decided that the output format be svg so that I can easily open view it in Emacs. Since the images are to be viewed inline, i also set the following page show rules

#set page(width: auto, height: auto, margin: 0pt)

However, I noticed that certain previews were "cut-off". e.g. for the code

#example[
  Express the function $f(t) = cases(20t & 0<=t<5, 0 & t>=5)$
  #solution[$f(t) = 20t(1-heaviside(t-5))$]
]

I confirmed it with Firefox that the .svgs produced were "clipped". It seems to only happen only in inline math fragments, not the display math fragments.

lethal spindle Oct 25, 2023, 5:28 PM

#

Settings the margins to 0 in SVG Export

#

Hello @olive matrix , do you mind providing a MRE (minimal reproduction example) so others can test it locally? Thanks!

#

In principle, I don't see any obvious causes for the problem, but messing a bit with it could be insightful.

olive matrix Oct 25, 2023, 5:30 PM

#

Sure, I can send in the generated preview .typ file's contents

#set page(width: auto, height: auto, margin: 0pt)

$m(t) = cases(20t quad & 0<=t<5, 0 quad & t>=5) $

Note that it's inline math, display math doesn't reproduce the same issue

lethal spindle Oct 25, 2023, 5:31 PM

#

ah.

#

I don't think inline math handles height very well

#

?render ```

Text text text text text text text
text $x + cases(20t, 40t, 30t)$ text text text
hello world!

agile lichen Oct 25, 2023, 5:32 PM

#

certainly reproducable in the web app which also uses svg for preview

wooden whaleBOT Oct 25, 2023, 5:32 PM

#

lethal spindle ?render ``` Text text text text text text text \ text $x + cases(20t, 40t, 30t)...

lethal spindle Oct 25, 2023, 5:32 PM

#

agile lichen certainly reproducable in the web app which also uses svg for preview

no it uses png i believe

agile lichen Oct 25, 2023, 5:32 PM

#

oh

lethal spindle Oct 25, 2023, 5:32 PM

#

however the typst preview vscode extension uses svg

agile lichen Oct 25, 2023, 5:32 PM

#

well in any case, webapp has same problem

lethal spindle Oct 25, 2023, 5:33 PM

#

wooden whale

well interesting, i was expecting the cases to go above the text or something

#

so let's just test the given code directly

lethal spindle Oct 25, 2023, 5:33 PM

#

olive matrix Sure, I can send in the generated preview .typ file's contents ```typ #set page(...

also is that space at the end intentional?

#

like $... $

#

usually it's either $...$ (for inline math) or $ ... $ (for display math)

olive matrix Oct 25, 2023, 5:34 PM

#

The issue is exacerbated in Emacs because the svgs are interleaved with the buffer text

olive matrix Oct 25, 2023, 5:34 PM

#

lethal spindle also is that space at the end intentional?

No, i was messing around with it, switching between inline and display math

lethal spindle Oct 25, 2023, 5:34 PM

#

?render

#set page(width: auto, height: auto, margin: 0pt)

b $m(t) = cases(20t quad & 0<=t<5, 0 quad & t>=5) $ a \
c

wooden whaleBOT Oct 25, 2023, 5:34 PM

#

lethal spindle ?render ``` #set page(width: auto, height: auto, margin: 0pt) b $m(t) = cases...

lethal spindle Oct 25, 2023, 5:34 PM

#

okay

#

interesting

#

lol

#

so

#

seems like u need a bit of margin

agile lichen Oct 25, 2023, 5:35 PM

#

ig inline math might try to use the text height as its height for the page, therefore clipping stuff when there are no margins?

inner sandal Oct 25, 2023, 5:36 PM

#

i wondering what is the default margin?

#

seems that 0pt and auto both produce bad result🤔

olive matrix Oct 25, 2023, 5:36 PM

#

lethal spindle seems like u need a bit of margin

If possible, i'd like to avoid margins, as they'd make every preview unnecessarily padded out

#

Case in point, this would get padded out

#

Oh, yeah that preview example exhibits another bug, fractions don't display correctly in Emacs, nor Inkscape. But that's better left for another "issue"

inner sandal Oct 25, 2023, 5:39 PM

#

how about chrome or ff

olive matrix Oct 25, 2023, 5:39 PM

#

It's normal in Firefox

inner sandal Oct 25, 2023, 5:39 PM

#

https://gitlab.com/inkscape/inbox/-/issues/9119 inkscape has problem displaying totally valid svg

GitLab

Fail to render svg correctly when defs of symbols are put at the en...

Summary: For this svg file. , inkscape's render result is

lethal spindle Oct 25, 2023, 5:40 PM

#

olive matrix Oh, yeah that preview example exhibits another bug, fractions don't display corr...

that's probably https://github.com/typst/typst/issues/1986

GitHub

Cli SVG export doesn't show up in inkscape properly. · Issue #1986 ...

Description using Inkscape 1.3 (0e150ed6c4, 2023-07-21) and prerelease typst (you can't export svgs otherwise) typst 0.7.0 (3fcb5ea) I created a image using the following: #import "@previe...

agile lichen Oct 25, 2023, 5:40 PM

#

olive matrix If possible, i'd like to avoid margins, as they'd make every preview unnecessari...

you can add a show rule that adds slight padding for inline math maybe

#

?render

#set page(width: auto, height: auto, margin: 0pt)
#show math.equation.where(block: false): pad.with(0.5em)

$m(t) = cases(20t quad & 0<=t<5, 0 quad & t>=5)$

wooden whaleBOT Oct 25, 2023, 5:40 PM

#

agile lichen ?render ``` #set page(width: auto, height: auto, margin: 0pt) #show math.equatio...

olive matrix Oct 25, 2023, 5:41 PM

#

agile lichen you can add a show rule that adds slight padding for inline math maybe

That's a good fix for now. I'm just worried if it scales

agile lichen Oct 25, 2023, 5:41 PM

#

yea idk either tbh

olive matrix Oct 25, 2023, 5:41 PM

#

?render

#set page(width: auto, height: auto, margin: 0pt)
#show math.equation.where(block: false): pad.with(0.5em)

$m(t) = cases(20t quad & 0<=t<5, 0 quad & t>=5, 0 quad & t>=5, 0 quad & t>=5, 0 quad & t>=5)$

wooden whaleBOT Oct 25, 2023, 5:41 PM

#

olive matrix ?render ``` #set page(width: auto, height: auto, margin: 0pt) #show math.equatio...

olive matrix Oct 25, 2023, 5:42 PM

#

Seems like it, lemme try it in emacs

agile lichen Oct 25, 2023, 5:42 PM

#

you can also just pad on the y-axis, the left and right one seemed fine i think

olive matrix Oct 25, 2023, 5:44 PM

#

agile lichen you can also just pad on the y-axis, the left and right one seemed fine i think

Yeah that works! Thanks!

agile lichen Oct 25, 2023, 5:45 PM

#

nice

lethal spindle Oct 25, 2023, 5:45 PM

#

?render

#set page(width: auto, height: auto, margin: 0pt)
#show math.equation.where(block: false): pad.with(top: 0.5em, bottom: 0.5em)

$m(t) = cases(20t quad & 0<=t<5, 0 quad & t>=5) $

wooden whaleBOT Oct 25, 2023, 5:45 PM

#

lethal spindle ?render ``` #set page(width: auto, height: auto, margin: 0pt) #show math.equat...

lethal spindle Oct 25, 2023, 5:45 PM

#

seems like its exactly 0.5em

olive matrix Oct 25, 2023, 5:45 PM

#

Even the absurdly tall line.

agile lichen Oct 25, 2023, 5:46 PM

#

lethal spindle ?render ``` #set page(width: auto, height: auto, margin: 0pt) #show math.equat...

could have just used y: 0.5em i think

olive matrix Oct 25, 2023, 5:46 PM

#

Also, one question. Is it normal for typst to not rename the extension when you choose the export format?

#

I compile with typst compile -f svg ./test.typ and get a test.pdf that is actually a svg (typst v0.8)

lethal spindle Oct 25, 2023, 5:47 PM

#

-f svg you mean?

#

yea so

#

that was fixed already on main

#

so the fix will be out on 0.9

#

https://github.com/typst/typst/pull/2166

GitHub

Use specified or inferred format extension for the output path by L...

Per #2147, use specified or inferred format in the output_path. Previously is hardcoded to be pdf.
it should handle both the case where a filename with extension is given, such as typst compile x.t...

olive matrix Oct 25, 2023, 5:49 PM

#

So for now i could just specify typst compile test.typ test.svg and it would work?

lethal spindle Oct 25, 2023, 5:49 PM

#

yes

#Settings the `margin`s to 0 in SVG Export