ブラウザ上でMarkdownやTeX数式を執筆し、そのまま綺麗なPDFとして出力したい――。この要求は多くの学生や研究者、エンジニアが抱える共通の願いです。

しかし従来のWebアプリにおけるPDF出力は、html2canvasによる画像ラスタライズで文字がボケる、あるいはブラウザの印刷機能（Ctrl+P）で余白や改ページ位置が崩れるといった数々の妥協に悩まされてきました。

本記事では、自作エディタ「Markdown TeX Viewer」において、新世代のRust製組版エンジン「Typst」をWebAssembly化して内蔵し、サーバーを一切介さずブラウザ完結で学術論文クオリティのベクターPDFを出力する技術設計を解説します。

1. なぜブラウザでのPDF出力は破綻しやすいのか？

クライアントサイドのPDF生成ライブラリには大きく2つのアプローチが存在します：

• DOMラスタライズ方式 (html2pdf.js, html2canvas): HTML要素を一旦Canvasに描画してPNG画像化し、それをPDFに貼り付ける方式。文字選択ができず、拡大するとピクセルが荒れ、ファイルサイズも巨大化します。
• ブラウザ標準印刷 (window.print): ブラウザのエンジン任せになるため、印刷余白・ヘッダー/フッター・数式の改ページ位置の精密な制御が不可能です。

2. 救世主としての「Typst」とWebAssembly

ここで採用したのが、LaTeXの現代的な代替として脚光を浴びている組版エンジン「Typst」です。TypstはRustでゼロから書かれており、LaTeXと同等以上の数式組版品質を持ちながら、数千倍高速にコンパイルできます。

さらに重要なのが、Rust製であるためWebAssembly（WASM）へのコンパイルが極めて自然に行えるという点です。

// MarkdownのASTからTypst記法への変換レイヤー（概念コード）
function markdownToTypst(markdownText) {
    let typstDoc = `
#set page(paper: "a4", margin: (x: 2cm, y: 2.5cm))
#set text(font: ("Noto Sans CJK JP", "Inter"), size: 10.5pt)
#set par(justify: true, leading: 0.75em)
`;
    // KaTeX数式ブロック ($$...$$) を Typst数式 ($ ... $) へ変換
    typstDoc += convertFormulasAndSyntax(markdownText);
    return typstDoc;
}

// Typst WebAssemblyコンパイラによる直接PDFバイナリ生成
const pdfBytes = await typstWasmCompiler.compile({
    mainFile: typstDoc,
    fonts: embeddedFontBuffers
});
saveAsFile(pdfBytes, "output.pdf");

3. リアルタイム表示（KaTeX）とTypstのハイブリッド設計

入力中のタイピングレスポンスを犠牲にしないため、エディタは2層構造をとっています：

1. 入力・プレビュー時: KaTeX + Markdown-it + Prism.js を用いてDOMに直接差分レンダリング（60fpsの即時フィードバック）。Obsidian風の [!NOTE] コールアウトもここで装飾。
2. エクスポート時: バックグラウンドのWeb WorkerでTypst WASMが数式・図表・ページネーションを計算し、生PDFバイナリ（Uint8Array）を生成。

4. Web File System Access APIによる「本物のデスクトップ感」

ChromeやEdge等のモダンブラウザでは、Web File System Access API（showOpenFilePicker / FileSystemWritableFileStream）をサポートしています。

これにより、WebアプリでありながらローカルPC上の .md ファイルを直接開き、Ctrl + S でそのファイルへ直接上書き保存できるようになりました。クラウドへのログインもアップロード待ちも不要です。

5. まとめと今後の展望

WebAssemblyの成熟によって、従来は重量級サーバーやネイティブアプリでしか行えなかった「本格組版」がブラウザ内のサンドボックスで瞬時に完結する時代になりました。

Markdown TeX ViewerはオープンソースとしてGitHubで公開しています。ぜひWeb版やAndroid PWAでお試しください。