canvas/svg vs html

[memeplex]

The approach of rendering to svg and canvas elements either directly or from an intermediate form has interesting use cases like the previewer. For other use cases like books it's certainly great that they can be rendered to a web page at all but there seem to be some inherent constraints to the ability to adequately select text and copy&paste it, not any different to what's usually the case for pdf documents.

How do you see the future of typst.ts for publishing sites and blogs (what's mentioned as "Static but responsive rendering" in the README), specially when there seems to be momentum and will to add html output to typst?

[ajmalfaris11]

The future of Typst.ts for publishing sites and blogs, particularly with its "Static but responsive rendering" feature, can be promising, especially considering the growing interest in static site generators (SSGs) and the need for flexible and efficient content publishing solutions.

Here are some considerations for Typst.ts in this context:

1. Static Site Generation (SSG) Trend: There's a trend towards using SSGs for building websites and blogs due to their simplicity, speed, and security benefits. Typst.ts's ability to generate static but responsive rendering can cater well to this trend by providing a lightweight and efficient way to publish content.

2. Responsive Design: Responsive rendering is crucial for ensuring that content looks good and functions well across various devices and screen sizes. Typst.ts's support for responsive rendering can help publishers deliver a seamless and consistent experience to their readers.

3. Limitations of SVG and Canvas Rendering: While SVG and canvas elements offer interesting use cases for rendering content dynamically, they may have limitations in terms of text selection and copy-pasting, similar to PDF documents. However, for certain use cases like previews or interactive visualizations, SVG and canvas rendering can still be valuable.

4. HTML Output Addition: The addition of HTML output to Typst.ts can significantly expand its capabilities and appeal. HTML output provides greater flexibility in terms of styling, interactivity, and accessibility compared to SVG and canvas rendering. It can also address the limitations related to text selection and copy-pasting.

5. Integration with Existing Tools and Workflows: Typst.ts's ability to generate static but responsive rendering can complement existing tools and workflows used by publishers, such as content management systems (CMS) or version control systems. Integration with these tools can streamline the publishing process and enhance productivity.

Overall, the future of Typst.ts for publishing sites and blogs looks promising, especially with the addition of HTML output and continued focus on responsive rendering. By catering to the evolving needs of publishers and leveraging modern web technologies, Typst.ts can become a valuable tool for content creators looking to deliver engaging and accessible content to their audience.

[memeplex]

This isn't actually addressing my question. If in a not so distant future typst (not typst.ts as in point 4) supported html output (which is highly probable) which would be a compelling argument to use typst.ts for, say blogging, given its inherent limitation for selecting and copying text. I could ask Gemini but prefer to know the opinion of smart people here.

[Myriad-Dreamin]

I think all of them can take a place in typst.ts, but it rather requires more efforts. This is what I'm going on the road to a better document format (than PDF). This framework are also inspired by pdf.js.

Three layers

HTML (Semantic) Layer

it brings semantic ability to adequately select text, copy text, paste text, link reaction, and so on.

currently better text output than PDF

Now we have generally better text output than PDF, especially whitespaces. Because PDF infers that whitespaces by layout spaces, but we get whitespaces information from typst and embed it inside of the HTML layer.

currently worse text selection than PDF

But we have a poor text selection, because we don't get nice layout information from typst.

• We are working on a seamless text selection for absolute positioning, which should work on all browsers and all platforms feat: better fallback emit #480.
• If typst supports HTML export in future, it is possible to extract heading, paragraph, and other semantics from HTML output.

SVG Layer

It can also retrieve user events as DOM nodes, but too many SVG nodes on will degrade performance of the webpage significantly. We current start to make use of both SVG and Canvas export.

We render typst elements inside of window (screen, or viewport) as SVG, because:

• We can bind CSS properties to SVG, to attach diverse CSS styles and SVG animation to elements.
• We can have high quality render quality, since SVG is vectorized.

Canvas (Display) Layer

The canvas has less pressure to HTML layout, so we render those elements which don't have interaction to the user as canvas. For example, we render typst elements outside of window as canvas.

Note: it could be also replaced by other advanced rasterization technique. For example, render typst with vello (webgpu acceleration). linebender/vello#466

Responsiveness

• CSS styles: we now have simple responsive SVG, built by CSS.
• HTML embeddings: we can have html embeddings with SVG's <foreignObject>. For example, embed a HTML5 video inside of it, Feature request: Enable svg elements with video embeds Enter-tainer/typst-preview#242.
• responsive layout: we compile multiple layouts and compress them into a single file. If we can rerender elements smoothly, this should have no difference with responsive layout of HTML. We can apply the technique adopted by typst-preview.

Compare with official HTML export

Official HTML export should:

• 👍be competitive with markdown's HTML export.
• 👎but also share same problems as LaTeX's HTML exports.
• 👎lack of many advanced text features, for example Implement sophisticated CJK punctuation adjustment typst/typst#954. This is because HTML is the backend, and HTML doesn't have that features. Although HTML is also working on that features, typst is expected to be more professional.
• 👎lose many styles written in typst code and you may have to write CSS for generated HTML again.

Semantics+SVG+Canvas export

• 👍allows you write once and export everywhere, having same render quality as PDF export.
• 👎currently has poorer responsiveness and performance than pure HTML export.
• 👎almost all of code is done by myself, so it is quite not matural.

[memeplex]

Thank you very much! This answer is not only extremely detailed and interesting but it also brings exciting news, the approach seems very promising.