Better Typst.ts

[Myriad-Dreamin]

We are currently planning to improve Typst.ts, and as such, we are proposing a few small but high-impact proposals.

Before diving into the proposals, let us first illustrate the existing workflow of Typst.ts. The workflow involves two entities Compiler (Server-side) and Renderer (Client-side). We do not assume that these entities run in any particular location. Compiler could potentially run in a browser while Renderer could run on a server. The following list provides a complete overview of Typst.ts workflow:

• Step 0, Precompile: The Compiler compiles the Artifact. This section is designed to be as simple as possible, as Typst is still in its early stages.

• Step 1, Load Document: The Renderer loads the pre-compiled Artifact. The header of the Artifact contains the following information:

  • Metadata: title, author, etc.
  • Page information: number of pages, width and height of each page.
  • Font information: font family, font variant, etc., which is currently identical to typst::font::FontInfo.
  • Document: The pre-processed document itself.

• Step 2, Load Font: The Renderer loads the fonts. By:

  • allowing the Renderer to request Compiler and load the fonts,
  • or by using the experimental api: queryLocalFont.

• Step 3, Render the display layer: The Renderer renders the display layer of the document. By:

  • allowing the document to be exported as an image or PDF file,
  • or by rendering the image or PDF onto a given HTML element.

• Step 4, Render the text layer: The Renderer renders the HTML semantic layer of the document. By:

  • creating HTML elements using the PDF text extraction algorithm and placing them on top of the display layer.

At present, not all components of Typst.ts can run on a browser. We have planed to eventually port all components to the browser. Nevertheless, for the time being, we primarily focus on abstracting the Compiler and Renderer.

Proposal 1, Renderer: the Renderer API

Design a Renderer API for alpha release.

State:The proposal is under draft.

Proposal 2, Renderer: Retrieve Text from Document

Replace the PDF text extraction algorithm by retrieving information from document accurately and efficiently.

To finish the task we need to implement the following function:

/// pdfJs.TextContentSource
pub struct TextContentSource;
pub fn reconstruct_text_information(&self, doc: &typst::doc::Document) -> TextContentSource;

State:The proposal has been accepted and implemented.

Proposal 3, Renderer: Fine-granular Canvas Update

Break the canvas into small pieces and update them individually to shorten E2E latency.

To finish the task we need to implement the following function:

pub struct OpaqueCanvasState;
pub struct CanvasUpdate(x: usize, y: usize, img: ImageData);
pub type CanvasUpdateFn = FnMut(updates: &[CanvasUpdate]);
pub fn update_canvas(&self, state: OpaqueCanvasState, doc: &typst::doc::Document, update: CanvasUpdateFn) -> OpaqueCanvasState;

State:The proposal has been accepted and implemented.

Proposal 4, Renderer: Differential Rendering

Diff the document, and reuse the unchanged parts.

To finish the task we need to implement the following function:

#[comemo::memoize]
pub fn CanvasCache;
pub fn diff_updation<T: Prehashed>(&self, cache: &mut CanvasCache, elem: T, update: CanvasUpdate);

State: combined with the proposal 3.

Proposal 5, Compiler+Renderer: Incremental Font Transfer

Use IFT to reduce the font transfer latency and bandwidth.

To finish the task we need to implement the following function:

pub struct FontResolver;
impl FontResolver {
  pub fn resolve(&self, id: GlyphId) -> Option<&[u8]>;
}
pub fn render_glyph(&self, res: &mut FontResolver, id: GlyphId);

Following the IFT standard is optional.

State:The proposal is under draft.

Proposal 6, Compiler: Artifact Streaming

Design a stream representation for artifact to transfer and apply the artifact differences between the Compiler and Renderer.

The idea is borrowed from Dynamic Graph in Stream Representation.

To finish the task we need to implement the following function:

pub struct ArtifactStream;
pub struct Server;
pub struct Client;
impl Server {
  pub fn send(&mut self, artifact: ArtifactStream);
}
impl Client {
  pub fn render(&mut self, artifact: ArtifactStream);
}

State:The proposal is under draft.

Proposal 7, Renderer: In-place Replacement Plugin for MathJax Users

Design a plugin to replace the MathJax with Typst.ts, rendering the math and tikz code every side.

State:The proposal is under draft.