typst.ts icon indicating copy to clipboard operation
typst.ts copied to clipboard

Render different pages into seperate SVGs

Open AliasQli opened this issue 1 year ago • 1 comments

Is your feature request related to a problem? Please describe.

My 20-page pdf is rendered into a single SVG and is causing severe performance issues. The browser reacts slowly and sometimes stuck. Example is here: https://alias.qliphoth.tech/post/stlc/

Describe the solution you'd like

Though not tested, I think dividing it into multiple SVGs may help, and it's natural to render each page into a seperate SVG.

Describe alternatives you've considered

It's also possible to render only the part displayed in the screen, but this sounds harder.

AliasQli avatar Dec 06 '23 14:12 AliasQli

it's natural to render each page into a seperate SVG.

What would you do if you get seperated svg? Putting all seperated SVGs into webpage will just have same performance as a single SVG one.

It's also possible to render only the part displayed in the screen, but this sounds harder.

Another project, typst-preview, using typst.ts applies the partial rendering technique, but I have not adopted them to typst.ts yet. I'm working on it.

Myriad-Dreamin avatar Dec 07 '23 00:12 Myriad-Dreamin

If we are willing to sacrifice links, we can lazy load individual ꜱᴠɢs using <img> or <object> tags. Additionally, isolated ꜱᴠɢs that are not in the page's DOM will have better performance.

The ideal approach would be to generate reasonable chunks based on Frame, so that parts with links can be directly embedded into HTML, while others are loaded as images. This way it won't break anchors (I guess).

OverflowCat avatar Jul 05 '24 18:07 OverflowCat

We are rendering only the part displayed in the screen.

Myriad-Dreamin avatar Jul 16 '24 01:07 Myriad-Dreamin