Merge ae187fa9c8412f9e2d332448609b307a66dad1b9 into 70710deb2b813eacc79d57436f5bd4c15c215f2e

Every element, like path, text, etc., had a group around them, that defined it's
transform. These changes accumulate the transformations of these groups and release
them to the element itself. This reduces the overall size of the exported SVG,
because those group elements can be removed.

Added new SVG path builder using relative coordinates. The previous with
global coordinates is still used for glyph paths. Using relative
coordinates allows to transform the entire element without changing the entire path.

Cargo.lock

@@ -413,7 +413,7 @@ dependencies = [
 [[package]]
 name = "codex"
 version = "0.1.1"
-source = "git+https://github.com/typst/codex?rev=a5428cb#a5428cb9c81a41354d44b44dbd5a16a710bbd928"
+source = "git+https://github.com/typst/codex?rev=9ac86f9#9ac86f96af5b89fce555e6bba8b6d1ac7b44ef00"
 
 [[package]]
 name = "color-print"
@@ -2861,7 +2861,7 @@ dependencies = [
 [[package]]
 name = "typst-assets"
 version = "0.13.1"
-source = "git+https://github.com/typst/typst-assets?rev=c1089b4#c1089b46c461bdde579c55caa941a3cc7dec3e8a"
+source = "git+https://github.com/typst/typst-assets?rev=edf0d64#edf0d648376e29738a05a933af9ea99bb81557b1"
 
 [[package]]
 name = "typst-cli"
@@ -3032,6 +3032,7 @@ version = "0.13.1"
 dependencies = [
  "az",
  "bumpalo",
+ "codex",
  "comemo",
  "ecow",
  "hypher",

Cargo.toml

@@ -32,7 +32,7 @@ typst-svg = { path = "crates/typst-svg", version = "0.13.1" }
 typst-syntax = { path = "crates/typst-syntax", version = "0.13.1" }
 typst-timing = { path = "crates/typst-timing", version = "0.13.1" }
 typst-utils = { path = "crates/typst-utils", version = "0.13.1" }
-typst-assets = { git = "https://github.com/typst/typst-assets", rev = "c1089b4" }
+typst-assets = { git = "https://github.com/typst/typst-assets", rev = "edf0d64" }
 typst-dev-assets = { git = "https://github.com/typst/typst-dev-assets", rev = "bfa947f" }
 arrayvec = "0.7.4"
 az = "1.2"
@@ -47,7 +47,7 @@ clap = { version = "4.4", features = ["derive", "env", "wrap_help"] }
 clap_complete = "4.2.1"
 clap_mangen = "0.2.10"
 codespan-reporting = "0.11"
-codex = { git = "https://github.com/typst/codex", rev = "a5428cb" }
+codex = { git = "https://github.com/typst/codex", rev = "9ac86f9" }
 color-print = "0.3.6"
 comemo = "0.4"
 csv = "1"

crates/typst-cli/Cargo.toml

@@ -29,6 +29,7 @@ typst-svg = { workspace = true }
 typst-timing = { workspace = true }
 chrono = { workspace = true }
 clap = { workspace = true }
+clap_complete = { workspace = true }
 codespan-reporting = { workspace = true }
 color-print = { workspace = true }
 comemo = { workspace = true }

crates/typst-cli/src/args.rs

@@ -7,6 +7,7 @@ use std::str::FromStr;
 use chrono::{DateTime, Utc};
 use clap::builder::{TypedValueParser, ValueParser};
 use clap::{ArgAction, Args, ColorChoice, Parser, Subcommand, ValueEnum, ValueHint};
+use clap_complete::Shell;
 use semver::Version;
 
 /// The character typically used to separate path components
@@ -81,6 +82,9 @@ pub enum Command {
     /// Self update the Typst CLI.
     #[cfg_attr(not(feature = "self-update"), clap(hide = true))]
     Update(UpdateCommand),
+
+    /// Generates shell completion scripts.
+    Completions(CompletionsCommand),
 }
 
 /// Compiles an input file into a supported output format.
@@ -198,6 +202,14 @@ pub struct UpdateCommand {
     pub backup_path: Option<PathBuf>,
 }
 
+/// Generates shell completion scripts.
+#[derive(Debug, Clone, Parser)]
+pub struct CompletionsCommand {
+    /// The shell to generate completions for.
+    #[arg(value_enum)]
+    pub shell: Shell,
+}
+
 /// Arguments for compilation and watching.
 #[derive(Debug, Clone, Args)]
 pub struct CompileArgs {

crates/typst-cli/src/compile.rs

@@ -14,10 +14,10 @@ use typst::diag::{
     bail, At, Severity, SourceDiagnostic, SourceResult, StrResult, Warned,
 };
 use typst::foundations::{Datetime, Smart};
-use typst::html::HtmlDocument;
 use typst::layout::{Frame, Page, PageRanges, PagedDocument};
 use typst::syntax::{FileId, Lines, Span};
 use typst::WorldExt;
+use typst_html::HtmlDocument;
 use typst_pdf::{PdfOptions, PdfStandards, Timestamp};
 
 use crate::args::{

crates/typst-cli/src/completions.rs

@@ -0,0 +1,13 @@
+use std::io::stdout;
+
+use clap::CommandFactory;
+use clap_complete::generate;
+
+use crate::args::{CliArguments, CompletionsCommand};
+
+/// Execute the completions command.
+pub fn completions(command: &CompletionsCommand) {
+    let mut cmd = CliArguments::command();
+    let bin_name = cmd.get_name().to_string();
+    generate(command.shell, &mut cmd, bin_name, &mut stdout());
+}

crates/typst-cli/src/main.rs

@@ -1,5 +1,6 @@
 mod args;
 mod compile;
+mod completions;
 mod download;
 mod fonts;
 mod greet;
@@ -71,6 +72,7 @@ fn dispatch() -> HintedStrResult<()> {
         Command::Query(command) => crate::query::query(command)?,
         Command::Fonts(command) => crate::fonts::fonts(command),
         Command::Update(command) => crate::update::update(command)?,
+        Command::Completions(command) => crate::completions::completions(command),
     }
 
     Ok(())

crates/typst-html/src/attr.rs

@@ -0,0 +1,195 @@
+
+#![cfg_attr(rustfmt, rustfmt_skip)]
+#![allow(non_upper_case_globals)]
+#![allow(dead_code)]
+
+use crate::HtmlAttr;
+
+pub const abbr: HtmlAttr = HtmlAttr::constant("abbr");
+pub const accept: HtmlAttr = HtmlAttr::constant("accept");
+pub const accept_charset: HtmlAttr = HtmlAttr::constant("accept-charset");
+pub const accesskey: HtmlAttr = HtmlAttr::constant("accesskey");
+pub const action: HtmlAttr = HtmlAttr::constant("action");
+pub const allow: HtmlAttr = HtmlAttr::constant("allow");
+pub const allowfullscreen: HtmlAttr = HtmlAttr::constant("allowfullscreen");
+pub const alpha: HtmlAttr = HtmlAttr::constant("alpha");
+pub const alt: HtmlAttr = HtmlAttr::constant("alt");
+pub const aria_activedescendant: HtmlAttr = HtmlAttr::constant("aria-activedescendant");
+pub const aria_atomic: HtmlAttr = HtmlAttr::constant("aria-atomic");
+pub const aria_autocomplete: HtmlAttr = HtmlAttr::constant("aria-autocomplete");
+pub const aria_busy: HtmlAttr = HtmlAttr::constant("aria-busy");
+pub const aria_checked: HtmlAttr = HtmlAttr::constant("aria-checked");
+pub const aria_colcount: HtmlAttr = HtmlAttr::constant("aria-colcount");
+pub const aria_colindex: HtmlAttr = HtmlAttr::constant("aria-colindex");
+pub const aria_colspan: HtmlAttr = HtmlAttr::constant("aria-colspan");
+pub const aria_controls: HtmlAttr = HtmlAttr::constant("aria-controls");
+pub const aria_current: HtmlAttr = HtmlAttr::constant("aria-current");
+pub const aria_describedby: HtmlAttr = HtmlAttr::constant("aria-describedby");
+pub const aria_details: HtmlAttr = HtmlAttr::constant("aria-details");
+pub const aria_disabled: HtmlAttr = HtmlAttr::constant("aria-disabled");
+pub const aria_errormessage: HtmlAttr = HtmlAttr::constant("aria-errormessage");
+pub const aria_expanded: HtmlAttr = HtmlAttr::constant("aria-expanded");
+pub const aria_flowto: HtmlAttr = HtmlAttr::constant("aria-flowto");
+pub const aria_haspopup: HtmlAttr = HtmlAttr::constant("aria-haspopup");
+pub const aria_hidden: HtmlAttr = HtmlAttr::constant("aria-hidden");
+pub const aria_invalid: HtmlAttr = HtmlAttr::constant("aria-invalid");
+pub const aria_keyshortcuts: HtmlAttr = HtmlAttr::constant("aria-keyshortcuts");
+pub const aria_label: HtmlAttr = HtmlAttr::constant("aria-label");
+pub const aria_labelledby: HtmlAttr = HtmlAttr::constant("aria-labelledby");
+pub const aria_level: HtmlAttr = HtmlAttr::constant("aria-level");
+pub const aria_live: HtmlAttr = HtmlAttr::constant("aria-live");
+pub const aria_modal: HtmlAttr = HtmlAttr::constant("aria-modal");
+pub const aria_multiline: HtmlAttr = HtmlAttr::constant("aria-multiline");
+pub const aria_multiselectable: HtmlAttr = HtmlAttr::constant("aria-multiselectable");
+pub const aria_orientation: HtmlAttr = HtmlAttr::constant("aria-orientation");
+pub const aria_owns: HtmlAttr = HtmlAttr::constant("aria-owns");
+pub const aria_placeholder: HtmlAttr = HtmlAttr::constant("aria-placeholder");
+pub const aria_posinset: HtmlAttr = HtmlAttr::constant("aria-posinset");
+pub const aria_pressed: HtmlAttr = HtmlAttr::constant("aria-pressed");
+pub const aria_readonly: HtmlAttr = HtmlAttr::constant("aria-readonly");
+pub const aria_relevant: HtmlAttr = HtmlAttr::constant("aria-relevant");
+pub const aria_required: HtmlAttr = HtmlAttr::constant("aria-required");
+pub const aria_roledescription: HtmlAttr = HtmlAttr::constant("aria-roledescription");
+pub const aria_rowcount: HtmlAttr = HtmlAttr::constant("aria-rowcount");
+pub const aria_rowindex: HtmlAttr = HtmlAttr::constant("aria-rowindex");
+pub const aria_rowspan: HtmlAttr = HtmlAttr::constant("aria-rowspan");
+pub const aria_selected: HtmlAttr = HtmlAttr::constant("aria-selected");
+pub const aria_setsize: HtmlAttr = HtmlAttr::constant("aria-setsize");
+pub const aria_sort: HtmlAttr = HtmlAttr::constant("aria-sort");
+pub const aria_valuemax: HtmlAttr = HtmlAttr::constant("aria-valuemax");
+pub const aria_valuemin: HtmlAttr = HtmlAttr::constant("aria-valuemin");
+pub const aria_valuenow: HtmlAttr = HtmlAttr::constant("aria-valuenow");
+pub const aria_valuetext: HtmlAttr = HtmlAttr::constant("aria-valuetext");
+pub const r#as: HtmlAttr = HtmlAttr::constant("as");
+pub const r#async: HtmlAttr = HtmlAttr::constant("async");
+pub const autocapitalize: HtmlAttr = HtmlAttr::constant("autocapitalize");
+pub const autocomplete: HtmlAttr = HtmlAttr::constant("autocomplete");
+pub const autocorrect: HtmlAttr = HtmlAttr::constant("autocorrect");
+pub const autofocus: HtmlAttr = HtmlAttr::constant("autofocus");
+pub const autoplay: HtmlAttr = HtmlAttr::constant("autoplay");
+pub const blocking: HtmlAttr = HtmlAttr::constant("blocking");
+pub const charset: HtmlAttr = HtmlAttr::constant("charset");
+pub const checked: HtmlAttr = HtmlAttr::constant("checked");
+pub const cite: HtmlAttr = HtmlAttr::constant("cite");
+pub const class: HtmlAttr = HtmlAttr::constant("class");
+pub const closedby: HtmlAttr = HtmlAttr::constant("closedby");
+pub const color: HtmlAttr = HtmlAttr::constant("color");
+pub const colorspace: HtmlAttr = HtmlAttr::constant("colorspace");
+pub const cols: HtmlAttr = HtmlAttr::constant("cols");
+pub const colspan: HtmlAttr = HtmlAttr::constant("colspan");
+pub const command: HtmlAttr = HtmlAttr::constant("command");
+pub const commandfor: HtmlAttr = HtmlAttr::constant("commandfor");
+pub const content: HtmlAttr = HtmlAttr::constant("content");
+pub const contenteditable: HtmlAttr = HtmlAttr::constant("contenteditable");
+pub const controls: HtmlAttr = HtmlAttr::constant("controls");
+pub const coords: HtmlAttr = HtmlAttr::constant("coords");
+pub const crossorigin: HtmlAttr = HtmlAttr::constant("crossorigin");
+pub const data: HtmlAttr = HtmlAttr::constant("data");
+pub const datetime: HtmlAttr = HtmlAttr::constant("datetime");
+pub const decoding: HtmlAttr = HtmlAttr::constant("decoding");
+pub const default: HtmlAttr = HtmlAttr::constant("default");
+pub const defer: HtmlAttr = HtmlAttr::constant("defer");
+pub const dir: HtmlAttr = HtmlAttr::constant("dir");
+pub const dirname: HtmlAttr = HtmlAttr::constant("dirname");
+pub const disabled: HtmlAttr = HtmlAttr::constant("disabled");
+pub const download: HtmlAttr = HtmlAttr::constant("download");
+pub const draggable: HtmlAttr = HtmlAttr::constant("draggable");
+pub const enctype: HtmlAttr = HtmlAttr::constant("enctype");
+pub const enterkeyhint: HtmlAttr = HtmlAttr::constant("enterkeyhint");
+pub const fetchpriority: HtmlAttr = HtmlAttr::constant("fetchpriority");
+pub const r#for: HtmlAttr = HtmlAttr::constant("for");
+pub const form: HtmlAttr = HtmlAttr::constant("form");
+pub const formaction: HtmlAttr = HtmlAttr::constant("formaction");
+pub const formenctype: HtmlAttr = HtmlAttr::constant("formenctype");
+pub const formmethod: HtmlAttr = HtmlAttr::constant("formmethod");
+pub const formnovalidate: HtmlAttr = HtmlAttr::constant("formnovalidate");
+pub const formtarget: HtmlAttr = HtmlAttr::constant("formtarget");
+pub const headers: HtmlAttr = HtmlAttr::constant("headers");
+pub const height: HtmlAttr = HtmlAttr::constant("height");
+pub const hidden: HtmlAttr = HtmlAttr::constant("hidden");
+pub const high: HtmlAttr = HtmlAttr::constant("high");
+pub const href: HtmlAttr = HtmlAttr::constant("href");
+pub const hreflang: HtmlAttr = HtmlAttr::constant("hreflang");
+pub const http_equiv: HtmlAttr = HtmlAttr::constant("http-equiv");
+pub const id: HtmlAttr = HtmlAttr::constant("id");
+pub const imagesizes: HtmlAttr = HtmlAttr::constant("imagesizes");
+pub const imagesrcset: HtmlAttr = HtmlAttr::constant("imagesrcset");
+pub const inert: HtmlAttr = HtmlAttr::constant("inert");
+pub const inputmode: HtmlAttr = HtmlAttr::constant("inputmode");
+pub const integrity: HtmlAttr = HtmlAttr::constant("integrity");
+pub const is: HtmlAttr = HtmlAttr::constant("is");
+pub const ismap: HtmlAttr = HtmlAttr::constant("ismap");
+pub const itemid: HtmlAttr = HtmlAttr::constant("itemid");
+pub const itemprop: HtmlAttr = HtmlAttr::constant("itemprop");
+pub const itemref: HtmlAttr = HtmlAttr::constant("itemref");
+pub const itemscope: HtmlAttr = HtmlAttr::constant("itemscope");
+pub const itemtype: HtmlAttr = HtmlAttr::constant("itemtype");
+pub const kind: HtmlAttr = HtmlAttr::constant("kind");
+pub const label: HtmlAttr = HtmlAttr::constant("label");
+pub const lang: HtmlAttr = HtmlAttr::constant("lang");
+pub const list: HtmlAttr = HtmlAttr::constant("list");
+pub const loading: HtmlAttr = HtmlAttr::constant("loading");
+pub const r#loop: HtmlAttr = HtmlAttr::constant("loop");
+pub const low: HtmlAttr = HtmlAttr::constant("low");
+pub const max: HtmlAttr = HtmlAttr::constant("max");
+pub const maxlength: HtmlAttr = HtmlAttr::constant("maxlength");
+pub const media: HtmlAttr = HtmlAttr::constant("media");
+pub const method: HtmlAttr = HtmlAttr::constant("method");
+pub const min: HtmlAttr = HtmlAttr::constant("min");
+pub const minlength: HtmlAttr = HtmlAttr::constant("minlength");
+pub const multiple: HtmlAttr = HtmlAttr::constant("multiple");
+pub const muted: HtmlAttr = HtmlAttr::constant("muted");
+pub const name: HtmlAttr = HtmlAttr::constant("name");
+pub const nomodule: HtmlAttr = HtmlAttr::constant("nomodule");
+pub const nonce: HtmlAttr = HtmlAttr::constant("nonce");
+pub const novalidate: HtmlAttr = HtmlAttr::constant("novalidate");
+pub const open: HtmlAttr = HtmlAttr::constant("open");
+pub const optimum: HtmlAttr = HtmlAttr::constant("optimum");
+pub const pattern: HtmlAttr = HtmlAttr::constant("pattern");
+pub const ping: HtmlAttr = HtmlAttr::constant("ping");
+pub const placeholder: HtmlAttr = HtmlAttr::constant("placeholder");
+pub const playsinline: HtmlAttr = HtmlAttr::constant("playsinline");
+pub const popover: HtmlAttr = HtmlAttr::constant("popover");
+pub const popovertarget: HtmlAttr = HtmlAttr::constant("popovertarget");
+pub const popovertargetaction: HtmlAttr = HtmlAttr::constant("popovertargetaction");
+pub const poster: HtmlAttr = HtmlAttr::constant("poster");
+pub const preload: HtmlAttr = HtmlAttr::constant("preload");
+pub const readonly: HtmlAttr = HtmlAttr::constant("readonly");
+pub const referrerpolicy: HtmlAttr = HtmlAttr::constant("referrerpolicy");
+pub const rel: HtmlAttr = HtmlAttr::constant("rel");
+pub const required: HtmlAttr = HtmlAttr::constant("required");
+pub const reversed: HtmlAttr = HtmlAttr::constant("reversed");
+pub const role: HtmlAttr = HtmlAttr::constant("role");
+pub const rows: HtmlAttr = HtmlAttr::constant("rows");
+pub const rowspan: HtmlAttr = HtmlAttr::constant("rowspan");
+pub const sandbox: HtmlAttr = HtmlAttr::constant("sandbox");
+pub const scope: HtmlAttr = HtmlAttr::constant("scope");
+pub const selected: HtmlAttr = HtmlAttr::constant("selected");
+pub const shadowrootclonable: HtmlAttr = HtmlAttr::constant("shadowrootclonable");
+pub const shadowrootcustomelementregistry: HtmlAttr = HtmlAttr::constant("shadowrootcustomelementregistry");
+pub const shadowrootdelegatesfocus: HtmlAttr = HtmlAttr::constant("shadowrootdelegatesfocus");
+pub const shadowrootmode: HtmlAttr = HtmlAttr::constant("shadowrootmode");
+pub const shadowrootserializable: HtmlAttr = HtmlAttr::constant("shadowrootserializable");
+pub const shape: HtmlAttr = HtmlAttr::constant("shape");
+pub const size: HtmlAttr = HtmlAttr::constant("size");
+pub const sizes: HtmlAttr = HtmlAttr::constant("sizes");
+pub const slot: HtmlAttr = HtmlAttr::constant("slot");
+pub const span: HtmlAttr = HtmlAttr::constant("span");
+pub const spellcheck: HtmlAttr = HtmlAttr::constant("spellcheck");
+pub const src: HtmlAttr = HtmlAttr::constant("src");
+pub const srcdoc: HtmlAttr = HtmlAttr::constant("srcdoc");
+pub const srclang: HtmlAttr = HtmlAttr::constant("srclang");
+pub const srcset: HtmlAttr = HtmlAttr::constant("srcset");
+pub const start: HtmlAttr = HtmlAttr::constant("start");
+pub const step: HtmlAttr = HtmlAttr::constant("step");
+pub const style: HtmlAttr = HtmlAttr::constant("style");
+pub const tabindex: HtmlAttr = HtmlAttr::constant("tabindex");
+pub const target: HtmlAttr = HtmlAttr::constant("target");
+pub const title: HtmlAttr = HtmlAttr::constant("title");
+pub const translate: HtmlAttr = HtmlAttr::constant("translate");
+pub const r#type: HtmlAttr = HtmlAttr::constant("type");
+pub const usemap: HtmlAttr = HtmlAttr::constant("usemap");
+pub const value: HtmlAttr = HtmlAttr::constant("value");
+pub const width: HtmlAttr = HtmlAttr::constant("width");
+pub const wrap: HtmlAttr = HtmlAttr::constant("wrap");
+pub const writingsuggestions: HtmlAttr = HtmlAttr::constant("writingsuggestions");

crates/typst-html/src/charsets.rs

@@ -0,0 +1,81 @@
+//! Defines syntactical properties of HTML tags, attributes, and text.
+
+/// Check whether a character is in a tag name.
+pub const fn is_valid_in_tag_name(c: char) -> bool {
+    c.is_ascii_alphanumeric()
+}
+
+/// Check whether a character is valid in an attribute name.
+pub const fn is_valid_in_attribute_name(c: char) -> bool {
+    match c {
+        // These are forbidden.
+        '\0' | ' ' | '"' | '\'' | '>' | '/' | '=' => false,
+        c if is_whatwg_control_char(c) => false,
+        c if is_whatwg_non_char(c) => false,
+        // _Everything_ else is allowed, including U+2029 paragraph
+        // separator. Go wild.
+        _ => true,
+    }
+}
+
+/// Check whether a character can be an used in an attribute value without
+/// escaping.
+///
+/// See <https://html.spec.whatwg.org/multipage/syntax.html#attributes-2>
+pub const fn is_valid_in_attribute_value(c: char) -> bool {
+    match c {
+        // Ampersands are sometimes legal (i.e. when they are not _ambiguous
+        // ampersands_) but it is not worth the trouble to check for that.
+        '&' => false,
+        // Quotation marks are not allowed in double-quote-delimited attribute
+        // values.
+        '"' => false,
+        // All other text characters are allowed.
+        c => is_w3c_text_char(c),
+    }
+}
+
+/// Check whether a character can be an used in normal text without
+/// escaping.
+pub const fn is_valid_in_normal_element_text(c: char) -> bool {
+    match c {
+        // Ampersands are sometimes legal (i.e. when they are not _ambiguous
+        // ampersands_) but it is not worth the trouble to check for that.
+        '&' => false,
+        // Less-than signs are not allowed in text.
+        '<' => false,
+        // All other text characters are allowed.
+        c => is_w3c_text_char(c),
+    }
+}
+
+/// Check if something is valid text in HTML.
+pub const fn is_w3c_text_char(c: char) -> bool {
+    match c {
+        // Non-characters are obviously not text characters.
+        c if is_whatwg_non_char(c) => false,
+        // Control characters are disallowed, except for whitespace.
+        c if is_whatwg_control_char(c) => c.is_ascii_whitespace(),
+        // Everything else is allowed.
+        _ => true,
+    }
+}
+
+const fn is_whatwg_non_char(c: char) -> bool {
+    match c {
+        '\u{fdd0}'..='\u{fdef}' => true,
+        // Non-characters matching xxFFFE or xxFFFF up to x10FFFF (inclusive).
+        c if c as u32 & 0xfffe == 0xfffe && c as u32 <= 0x10ffff => true,
+        _ => false,
+    }
+}
+
+const fn is_whatwg_control_char(c: char) -> bool {
+    match c {
+        // C0 control characters.
+        '\u{00}'..='\u{1f}' => true,
+        // Other control characters.
+        '\u{7f}'..='\u{9f}' => true,
+        _ => false,
+    }
+}

crates/typst-html/src/convert.rs

@@ -0,0 +1,130 @@
+use typst_library::diag::{warning, SourceResult};
+use typst_library::engine::Engine;
+use typst_library::foundations::{Content, StyleChain, Target, TargetElem};
+use typst_library::introspection::{SplitLocator, TagElem};
+use typst_library::layout::{Abs, Axes, BlockBody, BlockElem, BoxElem, Region, Size};
+use typst_library::model::ParElem;
+use typst_library::routines::Pair;
+use typst_library::text::{LinebreakElem, SmartQuoteElem, SpaceElem, TextElem};
+
+use crate::fragment::html_fragment;
+use crate::{attr, tag, FrameElem, HtmlElem, HtmlElement, HtmlFrame, HtmlNode};
+
+/// Converts realized content into HTML nodes.
+pub fn convert_to_nodes<'a>(
+    engine: &mut Engine,
+    locator: &mut SplitLocator,
+    children: impl IntoIterator<Item = Pair<'a>>,
+) -> SourceResult<Vec<HtmlNode>> {
+    let mut output = Vec::new();
+    for (child, styles) in children {
+        handle(engine, child, locator, styles, &mut output)?;
+    }
+    Ok(output)
+}
+
+/// Convert one element into HTML node(s).
+fn handle(
+    engine: &mut Engine,
+    child: &Content,
+    locator: &mut SplitLocator,
+    styles: StyleChain,
+    output: &mut Vec<HtmlNode>,
+) -> SourceResult<()> {
+    if let Some(elem) = child.to_packed::<TagElem>() {
+        output.push(HtmlNode::Tag(elem.tag.clone()));
+    } else if let Some(elem) = child.to_packed::<HtmlElem>() {
+        let mut children = vec![];
+        if let Some(body) = elem.body.get_ref(styles) {
+            children = html_fragment(engine, body, locator.next(&elem.span()), styles)?;
+        }
+        let element = HtmlElement {
+            tag: elem.tag,
+            attrs: elem.attrs.get_cloned(styles),
+            children,
+            span: elem.span(),
+        };
+        output.push(element.into());
+    } else if let Some(elem) = child.to_packed::<ParElem>() {
+        let children =
+            html_fragment(engine, &elem.body, locator.next(&elem.span()), styles)?;
+        output.push(
+            HtmlElement::new(tag::p)
+                .with_children(children)
+                .spanned(elem.span())
+                .into(),
+        );
+    } else if let Some(elem) = child.to_packed::<BoxElem>() {
+        // TODO: This is rather incomplete.
+        if let Some(body) = elem.body.get_ref(styles) {
+            let children =
+                html_fragment(engine, body, locator.next(&elem.span()), styles)?;
+            output.push(
+                HtmlElement::new(tag::span)
+                    .with_attr(attr::style, "display: inline-block;")
+                    .with_children(children)
+                    .spanned(elem.span())
+                    .into(),
+            )
+        }
+    } else if let Some((elem, body)) =
+        child
+            .to_packed::<BlockElem>()
+            .and_then(|elem| match elem.body.get_ref(styles) {
+                Some(BlockBody::Content(body)) => Some((elem, body)),
+                _ => None,
+            })
+    {
+        // TODO: This is rather incomplete.
+        let children = html_fragment(engine, body, locator.next(&elem.span()), styles)?;
+        output.push(
+            HtmlElement::new(tag::div)
+                .with_children(children)
+                .spanned(elem.span())
+                .into(),
+        );
+    } else if child.is::<SpaceElem>() {
+        output.push(HtmlNode::text(' ', child.span()));
+    } else if let Some(elem) = child.to_packed::<TextElem>() {
+        let text = if let Some(case) = styles.get(TextElem::case) {
+            case.apply(&elem.text).into()
+        } else {
+            elem.text.clone()
+        };
+        output.push(HtmlNode::text(text, elem.span()));
+    } else if let Some(elem) = child.to_packed::<LinebreakElem>() {
+        output.push(HtmlElement::new(tag::br).spanned(elem.span()).into());
+    } else if let Some(elem) = child.to_packed::<SmartQuoteElem>() {
+        output.push(HtmlNode::text(
+            if elem.double.get(styles) { '"' } else { '\'' },
+            child.span(),
+        ));
+    } else if let Some(elem) = child.to_packed::<FrameElem>() {
+        let locator = locator.next(&elem.span());
+        let style = TargetElem::target.set(Target::Paged).wrap();
+        let frame = (engine.routines.layout_frame)(
+            engine,
+            &elem.body,
+            locator,
+            styles.chain(&style),
+            Region::new(Size::splat(Abs::inf()), Axes::splat(false)),
+        )?;
+        output.push(HtmlNode::Frame(HtmlFrame {
+            inner: frame,
+            text_size: styles.resolve(TextElem::size),
+        }));
+    } else {
+        engine.sink.warn(warning!(
+            child.span(),
+            "{} was ignored during HTML export",
+            child.elem().name()
+        ));
+    }
+    Ok(())
+}
+
+/// Checks whether the given element is an inline-level HTML element.
+pub fn is_inline(elem: &Content) -> bool {
+    elem.to_packed::<HtmlElem>()
+        .is_some_and(|elem| tag::is_inline_by_default(elem.tag))
+}

crates/typst-html/src/css.rs

@@ -1,11 +1,54 @@
 //! Conversion from Typst data types into CSS data types.
 
-use std::fmt::{self, Display};
+use std::fmt::{self, Display, Write};
 
-use typst_library::layout::Length;
+use ecow::EcoString;
+use typst_library::layout::{Length, Rel};
 use typst_library::visualize::{Color, Hsl, LinearRgb, Oklab, Oklch, Rgb};
 use typst_utils::Numeric;
 
+/// A list of CSS properties with values.
+#[derive(Debug, Default)]
+pub struct Properties(EcoString);
+
+impl Properties {
+    /// Creates an empty list.
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Adds a new property to the list.
+    pub fn push(&mut self, property: &str, value: impl Display) {
+        if !self.0.is_empty() {
+            self.0.push_str("; ");
+        }
+        write!(&mut self.0, "{property}: {value}").unwrap();
+    }
+
+    /// Adds a new property in builder-style.
+    #[expect(unused)]
+    pub fn with(mut self, property: &str, value: impl Display) -> Self {
+        self.push(property, value);
+        self
+    }
+
+    /// Turns this into a string suitable for use as an inline `style`
+    /// attribute.
+    pub fn into_inline_styles(self) -> Option<EcoString> {
+        (!self.0.is_empty()).then_some(self.0)
+    }
+}
+
+pub fn rel(rel: Rel) -> impl Display {
+    typst_utils::display(move |f| match (rel.abs.is_zero(), rel.rel.is_zero()) {
+        (false, false) => {
+            write!(f, "calc({}% + {})", rel.rel.get(), length(rel.abs))
+        }
+        (true, false) => write!(f, "{}%", rel.rel.get()),
+        (_, true) => write!(f, "{}", length(rel.abs)),
+    })
+}
+
 pub fn length(length: Length) -> impl Display {
     typst_utils::display(move |f| match (length.abs.is_zero(), length.em.is_zero()) {
         (false, false) => {

crates/typst-html/src/document.rs

@@ -0,0 +1,219 @@
+use std::num::NonZeroUsize;
+
+use comemo::{Tracked, TrackedMut};
+use typst_library::diag::{bail, SourceResult};
+use typst_library::engine::{Engine, Route, Sink, Traced};
+use typst_library::foundations::{Content, StyleChain};
+use typst_library::introspection::{Introspector, IntrospectorBuilder, Locator};
+use typst_library::layout::{Point, Position, Transform};
+use typst_library::model::DocumentInfo;
+use typst_library::routines::{Arenas, RealizationKind, Routines};
+use typst_library::World;
+use typst_syntax::Span;
+use typst_utils::NonZeroExt;
+
+use crate::{attr, tag, HtmlDocument, HtmlElement, HtmlNode};
+
+/// Produce an HTML document from content.
+///
+/// This first performs root-level realization and then turns the resulting
+/// elements into HTML.
+#[typst_macros::time(name = "html document")]
+pub fn html_document(
+    engine: &mut Engine,
+    content: &Content,
+    styles: StyleChain,
+) -> SourceResult<HtmlDocument> {
+    html_document_impl(
+        engine.routines,
+        engine.world,
+        engine.introspector,
+        engine.traced,
+        TrackedMut::reborrow_mut(&mut engine.sink),
+        engine.route.track(),
+        content,
+        styles,
+    )
+}
+
+/// The internal implementation of `html_document`.
+#[comemo::memoize]
+#[allow(clippy::too_many_arguments)]
+fn html_document_impl(
+    routines: &Routines,
+    world: Tracked<dyn World + '_>,
+    introspector: Tracked<Introspector>,
+    traced: Tracked<Traced>,
+    sink: TrackedMut<Sink>,
+    route: Tracked<Route>,
+    content: &Content,
+    styles: StyleChain,
+) -> SourceResult<HtmlDocument> {
+    let mut locator = Locator::root().split();
+    let mut engine = Engine {
+        routines,
+        world,
+        introspector,
+        traced,
+        sink,
+        route: Route::extend(route).unnested(),
+    };
+
+    // Mark the external styles as "outside" so that they are valid at the page
+    // level.
+    let styles = styles.to_map().outside();
+    let styles = StyleChain::new(&styles);
+
+    let arenas = Arenas::default();
+    let mut info = DocumentInfo::default();
+    let children = (engine.routines.realize)(
+        RealizationKind::HtmlDocument {
+            info: &mut info,
+            is_inline: crate::convert::is_inline,
+        },
+        &mut engine,
+        &mut locator,
+        &arenas,
+        content,
+        styles,
+    )?;
+
+    let output = crate::convert::convert_to_nodes(
+        &mut engine,
+        &mut locator,
+        children.iter().copied(),
+    )?;
+    let introspector = introspect_html(&output);
+    let root = root_element(output, &info)?;
+
+    Ok(HtmlDocument { info, root, introspector })
+}
+
+/// Introspects HTML nodes.
+#[typst_macros::time(name = "introspect html")]
+fn introspect_html(output: &[HtmlNode]) -> Introspector {
+    fn discover(
+        builder: &mut IntrospectorBuilder,
+        sink: &mut Vec<(Content, Position)>,
+        nodes: &[HtmlNode],
+    ) {
+        for node in nodes {
+            match node {
+                HtmlNode::Tag(tag) => builder.discover_in_tag(
+                    sink,
+                    tag,
+                    Position { page: NonZeroUsize::ONE, point: Point::zero() },
+                ),
+                HtmlNode::Text(_, _) => {}
+                HtmlNode::Element(elem) => discover(builder, sink, &elem.children),
+                HtmlNode::Frame(frame) => builder.discover_in_frame(
+                    sink,
+                    &frame.inner,
+                    NonZeroUsize::ONE,
+                    Transform::identity(),
+                ),
+            }
+        }
+    }
+
+    let mut elems = Vec::new();
+    let mut builder = IntrospectorBuilder::new();
+    discover(&mut builder, &mut elems, output);
+    builder.finalize(elems)
+}
+
+/// Wrap the nodes in `<html>` and `<body>` if they are not yet rooted,
+/// supplying a suitable `<head>`.
+fn root_element(output: Vec<HtmlNode>, info: &DocumentInfo) -> SourceResult<HtmlElement> {
+    let head = head_element(info);
+    let body = match classify_output(output)? {
+        OutputKind::Html(element) => return Ok(element),
+        OutputKind::Body(body) => body,
+        OutputKind::Leafs(leafs) => HtmlElement::new(tag::body).with_children(leafs),
+    };
+    Ok(HtmlElement::new(tag::html).with_children(vec![head.into(), body.into()]))
+}
+
+/// Generate a `<head>` element.
+fn head_element(info: &DocumentInfo) -> HtmlElement {
+    let mut children = vec![];
+
+    children.push(HtmlElement::new(tag::meta).with_attr(attr::charset, "utf-8").into());
+
+    children.push(
+        HtmlElement::new(tag::meta)
+            .with_attr(attr::name, "viewport")
+            .with_attr(attr::content, "width=device-width, initial-scale=1")
+            .into(),
+    );
+
+    if let Some(title) = &info.title {
+        children.push(
+            HtmlElement::new(tag::title)
+                .with_children(vec![HtmlNode::Text(title.clone(), Span::detached())])
+                .into(),
+        );
+    }
+
+    if let Some(description) = &info.description {
+        children.push(
+            HtmlElement::new(tag::meta)
+                .with_attr(attr::name, "description")
+                .with_attr(attr::content, description.clone())
+                .into(),
+        );
+    }
+
+    if !info.author.is_empty() {
+        children.push(
+            HtmlElement::new(tag::meta)
+                .with_attr(attr::name, "authors")
+                .with_attr(attr::content, info.author.join(", "))
+                .into(),
+        )
+    }
+
+    if !info.keywords.is_empty() {
+        children.push(
+            HtmlElement::new(tag::meta)
+                .with_attr(attr::name, "keywords")
+                .with_attr(attr::content, info.keywords.join(", "))
+                .into(),
+        )
+    }
+
+    HtmlElement::new(tag::head).with_children(children)
+}
+
+/// Determine which kind of output the user generated.
+fn classify_output(mut output: Vec<HtmlNode>) -> SourceResult<OutputKind> {
+    let count = output.iter().filter(|node| !matches!(node, HtmlNode::Tag(_))).count();
+    for node in &mut output {
+        let HtmlNode::Element(elem) = node else { continue };
+        let tag = elem.tag;
+        let mut take = || std::mem::replace(elem, HtmlElement::new(tag::html));
+        match (tag, count) {
+            (tag::html, 1) => return Ok(OutputKind::Html(take())),
+            (tag::body, 1) => return Ok(OutputKind::Body(take())),
+            (tag::html | tag::body, _) => bail!(
+                elem.span,
+                "`{}` element must be the only element in the document",
+                elem.tag,
+            ),
+            _ => {}
+        }
+    }
+    Ok(OutputKind::Leafs(output))
+}
+
+/// What kinds of output the user generated.
+enum OutputKind {
+    /// The user generated their own `<html>` element. We do not need to supply
+    /// one.
+    Html(HtmlElement),
+    /// The user generate their own `<body>` element. We do not need to supply
+    /// one, but need supply the `<html>` element.
+    Body(HtmlElement),
+    /// The user generated leafs which we wrap in a `<body>` and `<html>`.
+    Leafs(Vec<HtmlNode>),
+}

crates/typst-html/src/dom.rs

@@ -0,0 +1,281 @@
+use std::fmt::{self, Debug, Display, Formatter};
+
+use ecow::{EcoString, EcoVec};
+use typst_library::diag::{bail, HintedStrResult, StrResult};
+use typst_library::foundations::{cast, Dict, Repr, Str};
+use typst_library::introspection::{Introspector, Tag};
+use typst_library::layout::{Abs, Frame};
+use typst_library::model::DocumentInfo;
+use typst_syntax::Span;
+use typst_utils::{PicoStr, ResolvedPicoStr};
+
+use crate::charsets;
+
+/// An HTML document.
+#[derive(Debug, Clone)]
+pub struct HtmlDocument {
+    /// The document's root HTML element.
+    pub root: HtmlElement,
+    /// Details about the document.
+    pub info: DocumentInfo,
+    /// Provides the ability to execute queries on the document.
+    pub introspector: Introspector,
+}
+
+/// A child of an HTML element.
+#[derive(Debug, Clone, Hash)]
+pub enum HtmlNode {
+    /// An introspectable element that produced something within this node.
+    Tag(Tag),
+    /// Plain text.
+    Text(EcoString, Span),
+    /// Another element.
+    Element(HtmlElement),
+    /// Layouted content that will be embedded into HTML as an SVG.
+    Frame(HtmlFrame),
+}
+
+impl HtmlNode {
+    /// Create a plain text node.
+    pub fn text(text: impl Into<EcoString>, span: Span) -> Self {
+        Self::Text(text.into(), span)
+    }
+}
+
+impl From<HtmlElement> for HtmlNode {
+    fn from(element: HtmlElement) -> Self {
+        Self::Element(element)
+    }
+}
+
+/// An HTML element.
+#[derive(Debug, Clone, Hash)]
+pub struct HtmlElement {
+    /// The HTML tag.
+    pub tag: HtmlTag,
+    /// The element's attributes.
+    pub attrs: HtmlAttrs,
+    /// The element's children.
+    pub children: Vec<HtmlNode>,
+    /// The span from which the element originated, if any.
+    pub span: Span,
+}
+
+impl HtmlElement {
+    /// Create a new, blank element without attributes or children.
+    pub fn new(tag: HtmlTag) -> Self {
+        Self {
+            tag,
+            attrs: HtmlAttrs::default(),
+            children: vec![],
+            span: Span::detached(),
+        }
+    }
+
+    /// Attach children to the element.
+    ///
+    /// Note: This overwrites potential previous children.
+    pub fn with_children(mut self, children: Vec<HtmlNode>) -> Self {
+        self.children = children;
+        self
+    }
+
+    /// Add an atribute to the element.
+    pub fn with_attr(mut self, key: HtmlAttr, value: impl Into<EcoString>) -> Self {
+        self.attrs.push(key, value);
+        self
+    }
+
+    /// Attach a span to the element.
+    pub fn spanned(mut self, span: Span) -> Self {
+        self.span = span;
+        self
+    }
+}
+
+/// The tag of an HTML element.
+#[derive(Copy, Clone, Eq, PartialEq, Hash)]
+pub struct HtmlTag(PicoStr);
+
+impl HtmlTag {
+    /// Intern an HTML tag string at runtime.
+    pub fn intern(string: &str) -> StrResult<Self> {
+        if string.is_empty() {
+            bail!("tag name must not be empty");
+        }
+
+        if let Some(c) = string.chars().find(|&c| !charsets::is_valid_in_tag_name(c)) {
+            bail!("the character {} is not valid in a tag name", c.repr());
+        }
+
+        Ok(Self(PicoStr::intern(string)))
+    }
+
+    /// Creates a compile-time constant `HtmlTag`.
+    ///
+    /// Should only be used in const contexts because it can panic.
+    #[track_caller]
+    pub const fn constant(string: &'static str) -> Self {
+        if string.is_empty() {
+            panic!("tag name must not be empty");
+        }
+
+        let bytes = string.as_bytes();
+        let mut i = 0;
+        while i < bytes.len() {
+            if !bytes[i].is_ascii() || !charsets::is_valid_in_tag_name(bytes[i] as char) {
+                panic!("not all characters are valid in a tag name");
+            }
+            i += 1;
+        }
+
+        Self(PicoStr::constant(string))
+    }
+
+    /// Resolves the tag to a string.
+    pub fn resolve(self) -> ResolvedPicoStr {
+        self.0.resolve()
+    }
+
+    /// Turns the tag into its inner interned string.
+    pub const fn into_inner(self) -> PicoStr {
+        self.0
+    }
+}
+
+impl Debug for HtmlTag {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        Display::fmt(self, f)
+    }
+}
+
+impl Display for HtmlTag {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        write!(f, "<{}>", self.resolve())
+    }
+}
+
+cast! {
+    HtmlTag,
+    self => self.0.resolve().as_str().into_value(),
+    v: Str => Self::intern(&v)?,
+}
+
+/// Attributes of an HTML element.
+#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
+pub struct HtmlAttrs(pub EcoVec<(HtmlAttr, EcoString)>);
+
+impl HtmlAttrs {
+    /// Creates an empty attribute list.
+    pub fn new() -> Self {
+        Self::default()
+    }
+
+    /// Add an attribute.
+    pub fn push(&mut self, attr: HtmlAttr, value: impl Into<EcoString>) {
+        self.0.push((attr, value.into()));
+    }
+}
+
+cast! {
+    HtmlAttrs,
+    self => self.0
+        .into_iter()
+        .map(|(key, value)| (key.resolve().as_str().into(), value.into_value()))
+        .collect::<Dict>()
+        .into_value(),
+    values: Dict => Self(values
+        .into_iter()
+        .map(|(k, v)| {
+            let attr = HtmlAttr::intern(&k)?;
+            let value = v.cast::<EcoString>()?;
+            Ok((attr, value))
+        })
+        .collect::<HintedStrResult<_>>()?),
+}
+
+/// An attribute of an HTML element.
+#[derive(Copy, Clone, Eq, PartialEq, Hash)]
+pub struct HtmlAttr(PicoStr);
+
+impl HtmlAttr {
+    /// Intern an HTML attribute string at runtime.
+    pub fn intern(string: &str) -> StrResult<Self> {
+        if string.is_empty() {
+            bail!("attribute name must not be empty");
+        }
+
+        if let Some(c) =
+            string.chars().find(|&c| !charsets::is_valid_in_attribute_name(c))
+        {
+            bail!("the character {} is not valid in an attribute name", c.repr());
+        }
+
+        Ok(Self(PicoStr::intern(string)))
+    }
+
+    /// Creates a compile-time constant `HtmlAttr`.
+    ///
+    /// Must only be used in const contexts (in a constant definition or
+    /// explicit `const { .. }` block) because otherwise a panic for a malformed
+    /// attribute or not auto-internible constant will only be caught at
+    /// runtime.
+    #[track_caller]
+    pub const fn constant(string: &'static str) -> Self {
+        if string.is_empty() {
+            panic!("attribute name must not be empty");
+        }
+
+        let bytes = string.as_bytes();
+        let mut i = 0;
+        while i < bytes.len() {
+            if !bytes[i].is_ascii()
+                || !charsets::is_valid_in_attribute_name(bytes[i] as char)
+            {
+                panic!("not all characters are valid in an attribute name");
+            }
+            i += 1;
+        }
+
+        Self(PicoStr::constant(string))
+    }
+
+    /// Resolves the attribute to a string.
+    pub fn resolve(self) -> ResolvedPicoStr {
+        self.0.resolve()
+    }
+
+    /// Turns the attribute into its inner interned string.
+    pub const fn into_inner(self) -> PicoStr {
+        self.0
+    }
+}
+
+impl Debug for HtmlAttr {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        Display::fmt(self, f)
+    }
+}
+
+impl Display for HtmlAttr {
+    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
+        write!(f, "{}", self.resolve())
+    }
+}
+
+cast! {
+    HtmlAttr,
+    self => self.0.resolve().as_str().into_value(),
+    v: Str => Self::intern(&v)?,
+}
+
+/// Layouted content that will be embedded into HTML as an SVG.
+#[derive(Debug, Clone, Hash)]
+pub struct HtmlFrame {
+    /// The frame that will be displayed as an SVG.
+    pub inner: Frame,
+    /// The text size where the frame was defined. This is used to size the
+    /// frame with em units to make text in and outside of the frame sized
+    /// consistently.
+    pub text_size: Abs,
+}

crates/typst-html/src/encode.rs

@@ -2,10 +2,11 @@ use std::fmt::Write;
 
 use typst_library::diag::{bail, At, SourceResult, StrResult};
 use typst_library::foundations::Repr;
-use typst_library::html::{
+use typst_syntax::Span;
+
+use crate::{
     attr, charsets, tag, HtmlDocument, HtmlElement, HtmlFrame, HtmlNode, HtmlTag,
 };
-use typst_syntax::Span;
 
 /// Encodes an HTML document into a string.
 pub fn html(document: &HtmlDocument) -> SourceResult<String> {

crates/typst-html/src/fragment.rs

@@ -0,0 +1,76 @@
+use comemo::{Track, Tracked, TrackedMut};
+use typst_library::diag::{At, SourceResult};
+use typst_library::engine::{Engine, Route, Sink, Traced};
+use typst_library::foundations::{Content, StyleChain};
+use typst_library::introspection::{Introspector, Locator, LocatorLink};
+
+use typst_library::routines::{Arenas, FragmentKind, RealizationKind, Routines};
+use typst_library::World;
+
+use crate::HtmlNode;
+
+/// Produce HTML nodes from content.
+#[typst_macros::time(name = "html fragment")]
+pub fn html_fragment(
+    engine: &mut Engine,
+    content: &Content,
+    locator: Locator,
+    styles: StyleChain,
+) -> SourceResult<Vec<HtmlNode>> {
+    html_fragment_impl(
+        engine.routines,
+        engine.world,
+        engine.introspector,
+        engine.traced,
+        TrackedMut::reborrow_mut(&mut engine.sink),
+        engine.route.track(),
+        content,
+        locator.track(),
+        styles,
+    )
+}
+
+/// The cached, internal implementation of [`html_fragment`].
+#[comemo::memoize]
+#[allow(clippy::too_many_arguments)]
+fn html_fragment_impl(
+    routines: &Routines,
+    world: Tracked<dyn World + '_>,
+    introspector: Tracked<Introspector>,
+    traced: Tracked<Traced>,
+    sink: TrackedMut<Sink>,
+    route: Tracked<Route>,
+    content: &Content,
+    locator: Tracked<Locator>,
+    styles: StyleChain,
+) -> SourceResult<Vec<HtmlNode>> {
+    let link = LocatorLink::new(locator);
+    let mut locator = Locator::link(&link).split();
+    let mut engine = Engine {
+        routines,
+        world,
+        introspector,
+        traced,
+        sink,
+        route: Route::extend(route),
+    };
+
+    engine.route.check_html_depth().at(content.span())?;
+
+    let arenas = Arenas::default();
+    let children = (engine.routines.realize)(
+        // No need to know about the `FragmentKind` because we handle both
+        // uniformly.
+        RealizationKind::HtmlFragment {
+            kind: &mut FragmentKind::Block,
+            is_inline: crate::convert::is_inline,
+        },
+        &mut engine,
+        &mut locator,
+        &arenas,
+        content,
+        styles,
+    )?;
+
+    crate::convert::convert_to_nodes(&mut engine, &mut locator, children.iter().copied())
+}

crates/typst-html/src/lib.rs

@@ -1,33 +1,28 @@
 //! Typst's HTML exporter.
 
+mod attr;
+mod charsets;
+mod convert;
 mod css;
+mod document;
+mod dom;
 mod encode;
+mod fragment;
 mod rules;
+mod tag;
 mod typed;
 
+pub use self::document::html_document;
+pub use self::dom::*;
 pub use self::encode::html;
 pub use self::rules::register;
 
-use comemo::{Track, Tracked, TrackedMut};
-use typst_library::diag::{bail, warning, At, SourceResult};
-use typst_library::engine::{Engine, Route, Sink, Traced};
-use typst_library::foundations::{
-    Content, Module, Scope, StyleChain, Target, TargetElem,
-};
-use typst_library::html::{
-    attr, tag, FrameElem, HtmlDocument, HtmlElem, HtmlElement, HtmlFrame, HtmlNode,
-};
-use typst_library::introspection::{
-    Introspector, Locator, LocatorLink, SplitLocator, TagElem,
-};
-use typst_library::layout::{Abs, Axes, BlockBody, BlockElem, BoxElem, Region, Size};
-use typst_library::model::{DocumentInfo, ParElem};
-use typst_library::routines::{Arenas, FragmentKind, Pair, RealizationKind, Routines};
-use typst_library::text::{LinebreakElem, SmartQuoteElem, SpaceElem, TextElem};
-use typst_library::{Category, World};
-use typst_syntax::Span;
+use ecow::EcoString;
+use typst_library::foundations::{Content, Module, Scope};
+use typst_library::Category;
+use typst_macros::elem;
 
-/// Create a module with all HTML definitions.
+/// Creates the module with all HTML definitions.
 pub fn module() -> Module {
     let mut html = Scope::deduplicating();
     html.start_category(Category::Html);
@@ -37,337 +32,77 @@ pub fn module() -> Module {
     Module::new("html", html)
 }
 
-/// Produce an HTML document from content.
+/// An HTML element that can contain Typst content.
 ///
-/// This first performs root-level realization and then turns the resulting
-/// elements into HTML.
-#[typst_macros::time(name = "html document")]
-pub fn html_document(
-    engine: &mut Engine,
-    content: &Content,
-    styles: StyleChain,
-) -> SourceResult<HtmlDocument> {
-    html_document_impl(
-        engine.routines,
-        engine.world,
-        engine.introspector,
-        engine.traced,
-        TrackedMut::reborrow_mut(&mut engine.sink),
-        engine.route.track(),
-        content,
-        styles,
-    )
+/// Typst's HTML export automatically generates the appropriate tags for most
+/// elements. However, sometimes, it is desirable to retain more control. For
+/// example, when using Typst to generate your blog, you could use this function
+/// to wrap each article in an `<article>` tag.
+///
+/// Typst is aware of what is valid HTML. A tag and its attributes must form
+/// syntactically valid HTML. Some tags, like `meta` do not accept content.
+/// Hence, you must not provide a body for them. We may add more checks in the
+/// future, so be sure that you are generating valid HTML when using this
+/// function.
+///
+/// Normally, Typst will generate `html`, `head`, and `body` tags for you. If
+/// you instead create them with this function, Typst will omit its own tags.
+///
+/// ```typ
+/// #html.elem("div", attrs: (style: "background: aqua"))[
+///   A div with _Typst content_ inside!
+/// ]
+/// ```
+#[elem(name = "elem")]
+pub struct HtmlElem {
+    /// The element's tag.
+    #[required]
+    pub tag: HtmlTag,
+
+    /// The element's HTML attributes.
+    pub attrs: HtmlAttrs,
+
+    /// The contents of the HTML element.
+    ///
+    /// The body can be arbitrary Typst content.
+    #[positional]
+    pub body: Option<Content>,
 }
 
-/// The internal implementation of `html_document`.
-#[comemo::memoize]
-#[allow(clippy::too_many_arguments)]
-fn html_document_impl(
-    routines: &Routines,
-    world: Tracked<dyn World + '_>,
-    introspector: Tracked<Introspector>,
-    traced: Tracked<Traced>,
-    sink: TrackedMut<Sink>,
-    route: Tracked<Route>,
-    content: &Content,
-    styles: StyleChain,
-) -> SourceResult<HtmlDocument> {
-    let mut locator = Locator::root().split();
-    let mut engine = Engine {
-        routines,
-        world,
-        introspector,
-        traced,
-        sink,
-        route: Route::extend(route).unnested(),
-    };
-
-    // Mark the external styles as "outside" so that they are valid at the page
-    // level.
-    let styles = styles.to_map().outside();
-    let styles = StyleChain::new(&styles);
-
-    let arenas = Arenas::default();
-    let mut info = DocumentInfo::default();
-    let children = (engine.routines.realize)(
-        RealizationKind::HtmlDocument(&mut info),
-        &mut engine,
-        &mut locator,
-        &arenas,
-        content,
-        styles,
-    )?;
-
-    let output = handle_list(&mut engine, &mut locator, children.iter().copied())?;
-    let introspector = Introspector::html(&output);
-    let root = root_element(output, &info)?;
-
-    Ok(HtmlDocument { info, root, introspector })
-}
-
-/// Produce HTML nodes from content.
-#[typst_macros::time(name = "html fragment")]
-pub fn html_fragment(
-    engine: &mut Engine,
-    content: &Content,
-    locator: Locator,
-    styles: StyleChain,
-) -> SourceResult<Vec<HtmlNode>> {
-    html_fragment_impl(
-        engine.routines,
-        engine.world,
-        engine.introspector,
-        engine.traced,
-        TrackedMut::reborrow_mut(&mut engine.sink),
-        engine.route.track(),
-        content,
-        locator.track(),
-        styles,
-    )
-}
-
-/// The cached, internal implementation of [`html_fragment`].
-#[comemo::memoize]
-#[allow(clippy::too_many_arguments)]
-fn html_fragment_impl(
-    routines: &Routines,
-    world: Tracked<dyn World + '_>,
-    introspector: Tracked<Introspector>,
-    traced: Tracked<Traced>,
-    sink: TrackedMut<Sink>,
-    route: Tracked<Route>,
-    content: &Content,
-    locator: Tracked<Locator>,
-    styles: StyleChain,
-) -> SourceResult<Vec<HtmlNode>> {
-    let link = LocatorLink::new(locator);
-    let mut locator = Locator::link(&link).split();
-    let mut engine = Engine {
-        routines,
-        world,
-        introspector,
-        traced,
-        sink,
-        route: Route::extend(route),
-    };
-
-    engine.route.check_html_depth().at(content.span())?;
-
-    let arenas = Arenas::default();
-    let children = (engine.routines.realize)(
-        // No need to know about the `FragmentKind` because we handle both
-        // uniformly.
-        RealizationKind::HtmlFragment(&mut FragmentKind::Block),
-        &mut engine,
-        &mut locator,
-        &arenas,
-        content,
-        styles,
-    )?;
-
-    handle_list(&mut engine, &mut locator, children.iter().copied())
-}
-
-/// Convert children into HTML nodes.
-fn handle_list<'a>(
-    engine: &mut Engine,
-    locator: &mut SplitLocator,
-    children: impl IntoIterator<Item = Pair<'a>>,
-) -> SourceResult<Vec<HtmlNode>> {
-    let mut output = Vec::new();
-    for (child, styles) in children {
-        handle(engine, child, locator, styles, &mut output)?;
+impl HtmlElem {
+    /// Add an attribute to the element.
+    pub fn with_attr(mut self, attr: HtmlAttr, value: impl Into<EcoString>) -> Self {
+        self.attrs
+            .as_option_mut()
+            .get_or_insert_with(Default::default)
+            .push(attr, value);
+        self
     }
-    Ok(output)
-}
 
-/// Convert a child into HTML node(s).
-fn handle(
-    engine: &mut Engine,
-    child: &Content,
-    locator: &mut SplitLocator,
-    styles: StyleChain,
-    output: &mut Vec<HtmlNode>,
-) -> SourceResult<()> {
-    if let Some(elem) = child.to_packed::<TagElem>() {
-        output.push(HtmlNode::Tag(elem.tag.clone()));
-    } else if let Some(elem) = child.to_packed::<HtmlElem>() {
-        let mut children = vec![];
-        if let Some(body) = elem.body.get_ref(styles) {
-            children = html_fragment(engine, body, locator.next(&elem.span()), styles)?;
-        }
-        let element = HtmlElement {
-            tag: elem.tag,
-            attrs: elem.attrs.get_cloned(styles),
-            children,
-            span: elem.span(),
-        };
-        output.push(element.into());
-    } else if let Some(elem) = child.to_packed::<ParElem>() {
-        let children =
-            html_fragment(engine, &elem.body, locator.next(&elem.span()), styles)?;
-        output.push(
-            HtmlElement::new(tag::p)
-                .with_children(children)
-                .spanned(elem.span())
-                .into(),
-        );
-    } else if let Some(elem) = child.to_packed::<BoxElem>() {
-        // TODO: This is rather incomplete.
-        if let Some(body) = elem.body.get_ref(styles) {
-            let children =
-                html_fragment(engine, body, locator.next(&elem.span()), styles)?;
-            output.push(
-                HtmlElement::new(tag::span)
-                    .with_attr(attr::style, "display: inline-block;")
-                    .with_children(children)
-                    .spanned(elem.span())
-                    .into(),
-            )
-        }
-    } else if let Some((elem, body)) =
-        child
-            .to_packed::<BlockElem>()
-            .and_then(|elem| match elem.body.get_ref(styles) {
-                Some(BlockBody::Content(body)) => Some((elem, body)),
-                _ => None,
-            })
-    {
-        // TODO: This is rather incomplete.
-        let children = html_fragment(engine, body, locator.next(&elem.span()), styles)?;
-        output.push(
-            HtmlElement::new(tag::div)
-                .with_children(children)
-                .spanned(elem.span())
-                .into(),
-        );
-    } else if child.is::<SpaceElem>() {
-        output.push(HtmlNode::text(' ', child.span()));
-    } else if let Some(elem) = child.to_packed::<TextElem>() {
-        output.push(HtmlNode::text(elem.text.clone(), elem.span()));
-    } else if let Some(elem) = child.to_packed::<LinebreakElem>() {
-        output.push(HtmlElement::new(tag::br).spanned(elem.span()).into());
-    } else if let Some(elem) = child.to_packed::<SmartQuoteElem>() {
-        output.push(HtmlNode::text(
-            if elem.double.get(styles) { '"' } else { '\'' },
-            child.span(),
-        ));
-    } else if let Some(elem) = child.to_packed::<FrameElem>() {
-        let locator = locator.next(&elem.span());
-        let style = TargetElem::target.set(Target::Paged).wrap();
-        let frame = (engine.routines.layout_frame)(
-            engine,
-            &elem.body,
-            locator,
-            styles.chain(&style),
-            Region::new(Size::splat(Abs::inf()), Axes::splat(false)),
-        )?;
-        output.push(HtmlNode::Frame(HtmlFrame {
-            inner: frame,
-            text_size: styles.resolve(TextElem::size),
-        }));
+    /// Adds CSS styles to an element.
+    fn with_styles(self, properties: css::Properties) -> Self {
+        if let Some(value) = properties.into_inline_styles() {
+            self.with_attr(attr::style, value)
         } else {
-        engine.sink.warn(warning!(
-            child.span(),
-            "{} was ignored during HTML export",
-            child.elem().name()
-        ));
+            self
+        }
     }
-    Ok(())
 }
 
-/// Wrap the nodes in `<html>` and `<body>` if they are not yet rooted,
-/// supplying a suitable `<head>`.
-fn root_element(output: Vec<HtmlNode>, info: &DocumentInfo) -> SourceResult<HtmlElement> {
-    let head = head_element(info);
-    let body = match classify_output(output)? {
-        OutputKind::Html(element) => return Ok(element),
-        OutputKind::Body(body) => body,
-        OutputKind::Leafs(leafs) => HtmlElement::new(tag::body).with_children(leafs),
-    };
-    Ok(HtmlElement::new(tag::html).with_children(vec![head.into(), body.into()]))
-}
-
-/// Generate a `<head>` element.
-fn head_element(info: &DocumentInfo) -> HtmlElement {
-    let mut children = vec![];
-
-    children.push(HtmlElement::new(tag::meta).with_attr(attr::charset, "utf-8").into());
-
-    children.push(
-        HtmlElement::new(tag::meta)
-            .with_attr(attr::name, "viewport")
-            .with_attr(attr::content, "width=device-width, initial-scale=1")
-            .into(),
-    );
-
-    if let Some(title) = &info.title {
-        children.push(
-            HtmlElement::new(tag::title)
-                .with_children(vec![HtmlNode::Text(title.clone(), Span::detached())])
-                .into(),
-        );
-    }
-
-    if let Some(description) = &info.description {
-        children.push(
-            HtmlElement::new(tag::meta)
-                .with_attr(attr::name, "description")
-                .with_attr(attr::content, description.clone())
-                .into(),
-        );
-    }
-
-    if !info.author.is_empty() {
-        children.push(
-            HtmlElement::new(tag::meta)
-                .with_attr(attr::name, "authors")
-                .with_attr(attr::content, info.author.join(", "))
-                .into(),
-        )
-    }
-
-    if !info.keywords.is_empty() {
-        children.push(
-            HtmlElement::new(tag::meta)
-                .with_attr(attr::name, "keywords")
-                .with_attr(attr::content, info.keywords.join(", "))
-                .into(),
-        )
-    }
-
-    HtmlElement::new(tag::head).with_children(children)
-}
-
-/// Determine which kind of output the user generated.
-fn classify_output(mut output: Vec<HtmlNode>) -> SourceResult<OutputKind> {
-    let count = output.iter().filter(|node| !matches!(node, HtmlNode::Tag(_))).count();
-    for node in &mut output {
-        let HtmlNode::Element(elem) = node else { continue };
-        let tag = elem.tag;
-        let mut take = || std::mem::replace(elem, HtmlElement::new(tag::html));
-        match (tag, count) {
-            (tag::html, 1) => return Ok(OutputKind::Html(take())),
-            (tag::body, 1) => return Ok(OutputKind::Body(take())),
-            (tag::html | tag::body, _) => bail!(
-                elem.span,
-                "`{}` element must be the only element in the document",
-                elem.tag,
-            ),
-            _ => {}
-        }
-    }
-    Ok(OutputKind::Leafs(output))
-}
-
-/// What kinds of output the user generated.
-enum OutputKind {
-    /// The user generated their own `<html>` element. We do not need to supply
-    /// one.
-    Html(HtmlElement),
-    /// The user generate their own `<body>` element. We do not need to supply
-    /// one, but need supply the `<html>` element.
-    Body(HtmlElement),
-    /// The user generated leafs which we wrap in a `<body>` and `<html>`.
-    Leafs(Vec<HtmlNode>),
+/// An element that lays out its content as an inline SVG.
+///
+/// Sometimes, converting Typst content to HTML is not desirable. This can be
+/// the case for plots and other content that relies on positioning and styling
+/// to convey its message.
+///
+/// This function allows you to use the Typst layout engine that would also be
+/// used for PDF, SVG, and PNG export to render a part of your document exactly
+/// how it would appear when exported in one of these formats. It embeds the
+/// content as an inline SVG.
+#[elem]
+pub struct FrameElem {
+    /// The content that shall be laid out.
+    #[positional]
+    #[required]
+    pub body: Content,
 }

crates/typst-html/src/rules.rs

@@ -3,12 +3,11 @@ use std::num::NonZeroUsize;
 use ecow::{eco_format, EcoVec};
 use typst_library::diag::warning;
 use typst_library::foundations::{
-    Content, NativeElement, NativeRuleMap, ShowFn, StyleChain, Target,
+    Content, NativeElement, NativeRuleMap, ShowFn, Smart, StyleChain, Target,
 };
-use typst_library::html::{attr, tag, HtmlAttrs, HtmlElem, HtmlTag};
 use typst_library::introspection::{Counter, Locator};
 use typst_library::layout::resolve::{table_to_cellgrid, Cell, CellGrid, Entry};
-use typst_library::layout::OuterVAlignment;
+use typst_library::layout::{OuterVAlignment, Sizing};
 use typst_library::model::{
     Attribution, CiteElem, CiteGroup, Destination, EmphElem, EnumElem, FigureCaption,
     FigureElem, HeadingElem, LinkElem, LinkTarget, ListElem, ParbreakElem, QuoteElem,
@@ -18,10 +17,13 @@ use typst_library::text::{
     HighlightElem, LinebreakElem, OverlineElem, RawElem, RawLine, SpaceElem, StrikeElem,
     SubElem, SuperElem, UnderlineElem,
 };
+use typst_library::visualize::ImageElem;
 
-/// Register show rules for the [HTML target](Target::Html).
+use crate::{attr, css, tag, FrameElem, HtmlAttrs, HtmlElem, HtmlTag};
+
+/// Registers show rules for the [HTML target](Target::Html).
 pub fn register(rules: &mut NativeRuleMap) {
-    use Target::Html;
+    use Target::{Html, Paged};
 
     // Model.
     rules.register(Html, STRONG_RULE);
@@ -47,6 +49,14 @@ pub fn register(rules: &mut NativeRuleMap) {
     rules.register(Html, HIGHLIGHT_RULE);
     rules.register(Html, RAW_RULE);
     rules.register(Html, RAW_LINE_RULE);
+
+    // Visualize.
+    rules.register(Html, IMAGE_RULE);
+
+    // For the HTML target, `html.frame` is a primitive. In the laid-out target,
+    // it should be a no-op so that nested frames don't break (things like `show
+    // math.equation: html.frame` can result in nested ones).
+    rules.register::<FrameElem>(Paged, |elem, _, _| Ok(elem.body.clone()));
 }
 
 const STRONG_RULE: ShowFn<StrongElem> = |elem, _, _| {
@@ -338,7 +348,7 @@ fn show_cellgrid(grid: CellGrid, styles: StyleChain) -> Content {
 fn show_cell(tag: HtmlTag, cell: &Cell, styles: StyleChain) -> Content {
     let cell = cell.body.clone();
     let Some(cell) = cell.to_packed::<TableCell>() else { return cell };
-    let mut attrs = HtmlAttrs::default();
+    let mut attrs = HtmlAttrs::new();
     let span = |n: NonZeroUsize| (n != NonZeroUsize::MIN).then(|| n.to_string());
     if let Some(colspan) = span(cell.colspan.get(styles)) {
         attrs.push(attr::colspan, colspan);
@@ -409,3 +419,36 @@ const RAW_RULE: ShowFn<RawElem> = |elem, _, styles| {
 };
 
 const RAW_LINE_RULE: ShowFn<RawLine> = |elem, _, _| Ok(elem.body.clone());
+
+const IMAGE_RULE: ShowFn<ImageElem> = |elem, engine, styles| {
+    let image = elem.decode(engine, styles)?;
+
+    let mut attrs = HtmlAttrs::new();
+    attrs.push(attr::src, typst_svg::convert_image_to_base64_url(&image));
+
+    if let Some(alt) = elem.alt.get_cloned(styles) {
+        attrs.push(attr::alt, alt);
+    }
+
+    let mut inline = css::Properties::new();
+
+    // TODO: Exclude in semantic profile.
+    if let Some(value) = typst_svg::convert_image_scaling(image.scaling()) {
+        inline.push("image-rendering", value);
+    }
+
+    // TODO: Exclude in semantic profile?
+    match elem.width.get(styles) {
+        Smart::Auto => {}
+        Smart::Custom(rel) => inline.push("width", css::rel(rel)),
+    }
+
+    // TODO: Exclude in semantic profile?
+    match elem.height.get(styles) {
+        Sizing::Auto => {}
+        Sizing::Rel(rel) => inline.push("height", css::rel(rel)),
+        Sizing::Fr(_) => {}
+    }
+
+    Ok(HtmlElem::new(tag::img).with_attrs(attrs).with_styles(inline).pack())
+};

crates/typst-html/src/tag.rs

@@ -0,0 +1,271 @@
+//! Predefined constants for HTML tags.
+
+#![allow(non_upper_case_globals)]
+#![allow(dead_code)]
+
+use crate::HtmlTag;
+
+pub const a: HtmlTag = HtmlTag::constant("a");
+pub const abbr: HtmlTag = HtmlTag::constant("abbr");
+pub const address: HtmlTag = HtmlTag::constant("address");
+pub const area: HtmlTag = HtmlTag::constant("area");
+pub const article: HtmlTag = HtmlTag::constant("article");
+pub const aside: HtmlTag = HtmlTag::constant("aside");
+pub const audio: HtmlTag = HtmlTag::constant("audio");
+pub const b: HtmlTag = HtmlTag::constant("b");
+pub const base: HtmlTag = HtmlTag::constant("base");
+pub const bdi: HtmlTag = HtmlTag::constant("bdi");
+pub const bdo: HtmlTag = HtmlTag::constant("bdo");
+pub const blockquote: HtmlTag = HtmlTag::constant("blockquote");
+pub const body: HtmlTag = HtmlTag::constant("body");
+pub const br: HtmlTag = HtmlTag::constant("br");
+pub const button: HtmlTag = HtmlTag::constant("button");
+pub const canvas: HtmlTag = HtmlTag::constant("canvas");
+pub const caption: HtmlTag = HtmlTag::constant("caption");
+pub const cite: HtmlTag = HtmlTag::constant("cite");
+pub const code: HtmlTag = HtmlTag::constant("code");
+pub const col: HtmlTag = HtmlTag::constant("col");
+pub const colgroup: HtmlTag = HtmlTag::constant("colgroup");
+pub const data: HtmlTag = HtmlTag::constant("data");
+pub const datalist: HtmlTag = HtmlTag::constant("datalist");
+pub const dd: HtmlTag = HtmlTag::constant("dd");
+pub const del: HtmlTag = HtmlTag::constant("del");
+pub const details: HtmlTag = HtmlTag::constant("details");
+pub const dfn: HtmlTag = HtmlTag::constant("dfn");
+pub const dialog: HtmlTag = HtmlTag::constant("dialog");
+pub const div: HtmlTag = HtmlTag::constant("div");
+pub const dl: HtmlTag = HtmlTag::constant("dl");
+pub const dt: HtmlTag = HtmlTag::constant("dt");
+pub const em: HtmlTag = HtmlTag::constant("em");
+pub const embed: HtmlTag = HtmlTag::constant("embed");
+pub const fieldset: HtmlTag = HtmlTag::constant("fieldset");
+pub const figcaption: HtmlTag = HtmlTag::constant("figcaption");
+pub const figure: HtmlTag = HtmlTag::constant("figure");
+pub const footer: HtmlTag = HtmlTag::constant("footer");
+pub const form: HtmlTag = HtmlTag::constant("form");
+pub const h1: HtmlTag = HtmlTag::constant("h1");
+pub const h2: HtmlTag = HtmlTag::constant("h2");
+pub const h3: HtmlTag = HtmlTag::constant("h3");
+pub const h4: HtmlTag = HtmlTag::constant("h4");
+pub const h5: HtmlTag = HtmlTag::constant("h5");
+pub const h6: HtmlTag = HtmlTag::constant("h6");
+pub const head: HtmlTag = HtmlTag::constant("head");
+pub const header: HtmlTag = HtmlTag::constant("header");
+pub const hgroup: HtmlTag = HtmlTag::constant("hgroup");
+pub const hr: HtmlTag = HtmlTag::constant("hr");
+pub const html: HtmlTag = HtmlTag::constant("html");
+pub const i: HtmlTag = HtmlTag::constant("i");
+pub const iframe: HtmlTag = HtmlTag::constant("iframe");
+pub const img: HtmlTag = HtmlTag::constant("img");
+pub const input: HtmlTag = HtmlTag::constant("input");
+pub const ins: HtmlTag = HtmlTag::constant("ins");
+pub const kbd: HtmlTag = HtmlTag::constant("kbd");
+pub const label: HtmlTag = HtmlTag::constant("label");
+pub const legend: HtmlTag = HtmlTag::constant("legend");
+pub const li: HtmlTag = HtmlTag::constant("li");
+pub const link: HtmlTag = HtmlTag::constant("link");
+pub const main: HtmlTag = HtmlTag::constant("main");
+pub const map: HtmlTag = HtmlTag::constant("map");
+pub const mark: HtmlTag = HtmlTag::constant("mark");
+pub const menu: HtmlTag = HtmlTag::constant("menu");
+pub const meta: HtmlTag = HtmlTag::constant("meta");
+pub const meter: HtmlTag = HtmlTag::constant("meter");
+pub const nav: HtmlTag = HtmlTag::constant("nav");
+pub const noscript: HtmlTag = HtmlTag::constant("noscript");
+pub const object: HtmlTag = HtmlTag::constant("object");
+pub const ol: HtmlTag = HtmlTag::constant("ol");
+pub const optgroup: HtmlTag = HtmlTag::constant("optgroup");
+pub const option: HtmlTag = HtmlTag::constant("option");
+pub const output: HtmlTag = HtmlTag::constant("output");
+pub const p: HtmlTag = HtmlTag::constant("p");
+pub const picture: HtmlTag = HtmlTag::constant("picture");
+pub const pre: HtmlTag = HtmlTag::constant("pre");
+pub const progress: HtmlTag = HtmlTag::constant("progress");
+pub const q: HtmlTag = HtmlTag::constant("q");
+pub const rp: HtmlTag = HtmlTag::constant("rp");
+pub const rt: HtmlTag = HtmlTag::constant("rt");
+pub const ruby: HtmlTag = HtmlTag::constant("ruby");
+pub const s: HtmlTag = HtmlTag::constant("s");
+pub const samp: HtmlTag = HtmlTag::constant("samp");
+pub const script: HtmlTag = HtmlTag::constant("script");
+pub const search: HtmlTag = HtmlTag::constant("search");
+pub const section: HtmlTag = HtmlTag::constant("section");
+pub const select: HtmlTag = HtmlTag::constant("select");
+pub const slot: HtmlTag = HtmlTag::constant("slot");
+pub const small: HtmlTag = HtmlTag::constant("small");
+pub const source: HtmlTag = HtmlTag::constant("source");
+pub const span: HtmlTag = HtmlTag::constant("span");
+pub const strong: HtmlTag = HtmlTag::constant("strong");
+pub const style: HtmlTag = HtmlTag::constant("style");
+pub const sub: HtmlTag = HtmlTag::constant("sub");
+pub const summary: HtmlTag = HtmlTag::constant("summary");
+pub const sup: HtmlTag = HtmlTag::constant("sup");
+pub const table: HtmlTag = HtmlTag::constant("table");
+pub const tbody: HtmlTag = HtmlTag::constant("tbody");
+pub const td: HtmlTag = HtmlTag::constant("td");
+pub const template: HtmlTag = HtmlTag::constant("template");
+pub const textarea: HtmlTag = HtmlTag::constant("textarea");
+pub const tfoot: HtmlTag = HtmlTag::constant("tfoot");
+pub const th: HtmlTag = HtmlTag::constant("th");
+pub const thead: HtmlTag = HtmlTag::constant("thead");
+pub const time: HtmlTag = HtmlTag::constant("time");
+pub const title: HtmlTag = HtmlTag::constant("title");
+pub const tr: HtmlTag = HtmlTag::constant("tr");
+pub const track: HtmlTag = HtmlTag::constant("track");
+pub const u: HtmlTag = HtmlTag::constant("u");
+pub const ul: HtmlTag = HtmlTag::constant("ul");
+pub const var: HtmlTag = HtmlTag::constant("var");
+pub const video: HtmlTag = HtmlTag::constant("video");
+pub const wbr: HtmlTag = HtmlTag::constant("wbr");
+
+/// Whether this is a void tag whose associated element may not have
+/// children.
+pub fn is_void(tag: HtmlTag) -> bool {
+    matches!(
+        tag,
+        self::area
+            | self::base
+            | self::br
+            | self::col
+            | self::embed
+            | self::hr
+            | self::img
+            | self::input
+            | self::link
+            | self::meta
+            | self::source
+            | self::track
+            | self::wbr
+    )
+}
+
+/// Whether this is a tag containing raw text.
+pub fn is_raw(tag: HtmlTag) -> bool {
+    matches!(tag, self::script | self::style)
+}
+
+/// Whether this is a tag containing escapable raw text.
+pub fn is_escapable_raw(tag: HtmlTag) -> bool {
+    matches!(tag, self::textarea | self::title)
+}
+
+/// Whether an element is considered metadata.
+pub fn is_metadata(tag: HtmlTag) -> bool {
+    matches!(
+        tag,
+        self::base
+            | self::link
+            | self::meta
+            | self::noscript
+            | self::script
+            | self::style
+            | self::template
+            | self::title
+    )
+}
+
+/// Whether nodes with the tag have the CSS property `display: block` by
+/// default.
+pub fn is_block_by_default(tag: HtmlTag) -> bool {
+    matches!(
+        tag,
+        self::html
+            | self::head
+            | self::body
+            | self::article
+            | self::aside
+            | self::h1
+            | self::h2
+            | self::h3
+            | self::h4
+            | self::h5
+            | self::h6
+            | self::hgroup
+            | self::nav
+            | self::section
+            | self::dd
+            | self::dl
+            | self::dt
+            | self::menu
+            | self::ol
+            | self::ul
+            | self::address
+            | self::blockquote
+            | self::dialog
+            | self::div
+            | self::fieldset
+            | self::figure
+            | self::figcaption
+            | self::footer
+            | self::form
+            | self::header
+            | self::hr
+            | self::legend
+            | self::main
+            | self::p
+            | self::pre
+            | self::search
+    )
+}
+
+/// Whether the element is inline-level as opposed to being block-level.
+///
+/// Not sure whether this distinction really makes sense. But we somehow
+/// need to decide what to put into automatic paragraphs. A `<strong>`
+/// should merged into a paragraph created by realization, but a `<div>`
+/// shouldn't.
+///
+/// <https://www.w3.org/TR/html401/struct/global.html#block-inline>
+/// <https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content>
+/// <https://github.com/orgs/mdn/discussions/353>
+pub fn is_inline_by_default(tag: HtmlTag) -> bool {
+    matches!(
+        tag,
+        self::abbr
+            | self::a
+            | self::bdi
+            | self::b
+            | self::br
+            | self::bdo
+            | self::code
+            | self::cite
+            | self::dfn
+            | self::data
+            | self::i
+            | self::em
+            | self::mark
+            | self::kbd
+            | self::rp
+            | self::q
+            | self::ruby
+            | self::rt
+            | self::samp
+            | self::s
+            | self::span
+            | self::small
+            | self::sub
+            | self::strong
+            | self::time
+            | self::sup
+            | self::var
+            | self::u
+    )
+}
+
+/// Whether nodes with the tag have the CSS property `display: table(-.*)?`
+/// by default.
+pub fn is_tabular_by_default(tag: HtmlTag) -> bool {
+    matches!(
+        tag,
+        self::table
+            | self::thead
+            | self::tbody
+            | self::tfoot
+            | self::tr
+            | self::th
+            | self::td
+            | self::caption
+            | self::col
+            | self::colgroup
+    )
+}

crates/typst-html/src/typed.rs

@@ -18,13 +18,11 @@ use typst_library::foundations::{
     FromValue, IntoValue, NativeFuncData, NativeFuncPtr, NoneValue, ParamInfo,
     PositiveF64, Reflect, Scope, Str, Type, Value,
 };
-use typst_library::html::tag;
-use typst_library::html::{HtmlAttr, HtmlAttrs, HtmlElem, HtmlTag};
 use typst_library::layout::{Axes, Axis, Dir, Length};
 use typst_library::visualize::Color;
 use typst_macros::cast;
 
-use crate::css;
+use crate::{css, tag, HtmlAttr, HtmlAttrs, HtmlElem, HtmlTag};
 
 /// Hook up all typed HTML definitions.
 pub(super) fn define(html: &mut Scope) {

crates/typst-ide/src/analyze.rs

@@ -1,8 +1,10 @@
+use std::collections::HashSet;
+
 use comemo::Track;
 use ecow::{eco_vec, EcoString, EcoVec};
 use typst::foundations::{Label, Styles, Value};
 use typst::layout::PagedDocument;
-use typst::model::BibliographyElem;
+use typst::model::{BibliographyElem, FigureElem};
 use typst::syntax::{ast, LinkedNode, SyntaxKind};
 
 use crate::IdeWorld;
@@ -66,17 +68,30 @@ pub fn analyze_import(world: &dyn IdeWorld, source: &LinkedNode) -> Option<Value
 /// - All labels and descriptions for them, if available
 /// - A split offset: All labels before this offset belong to nodes, all after
 ///   belong to a bibliography.
+///
+/// Note: When multiple labels in the document have the same identifier,
+/// this only returns the first one.
 pub fn analyze_labels(
     document: &PagedDocument,
 ) -> (Vec<(Label, Option<EcoString>)>, usize) {
     let mut output = vec![];
+    let mut seen_labels = HashSet::new();
 
     // Labels in the document.
     for elem in document.introspector.all() {
         let Some(label) = elem.label() else { continue };
+        if !seen_labels.insert(label) {
+            continue;
+        }
+
         let details = elem
-            .get_by_name("caption")
-            .or_else(|_| elem.get_by_name("body"))
+            .to_packed::<FigureElem>()
+            .and_then(|figure| match figure.caption.as_option() {
+                Some(Some(caption)) => Some(caption.pack_ref()),
+                _ => None,
+            })
+            .unwrap_or(elem)
+            .get_by_name("body")
             .ok()
             .and_then(|field| match field {
                 Value::Content(content) => Some(content),

crates/typst-ide/src/complete.rs

@@ -76,7 +76,7 @@ pub struct Completion {
 }
 
 /// A kind of item that can be completed.
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
 #[serde(rename_all = "kebab-case")]
 pub enum CompletionKind {
     /// A syntactical structure.
@@ -1564,7 +1564,7 @@ mod tests {
 
     use typst::layout::PagedDocument;
 
-    use super::{autocomplete, Completion};
+    use super::{autocomplete, Completion, CompletionKind};
     use crate::tests::{FilePos, TestWorld, WorldLike};
 
     /// Quote a string.
@@ -1709,6 +1709,21 @@ mod tests {
             .must_exclude(["bib"]);
     }
 
+    #[test]
+    fn test_autocomplete_ref_identical_labels_returns_single_completion() {
+        let mut world = TestWorld::new("x<test> y<test>");
+        let doc = typst::compile(&world).output.ok();
+
+        let end = world.main.text().len();
+        world.main.edit(end..end, " @t");
+
+        let result = test_with_doc(&world, -1, doc.as_ref());
+        let completions = result.completions();
+        let label_count =
+            completions.iter().filter(|c| c.kind == CompletionKind::Label).count();
+        assert_eq!(label_count, 1);
+    }
+
     /// Test what kind of brackets we autocomplete for function calls depending
     /// on the function and existing parens.
     #[test]

crates/typst-ide/src/tooltip.rs

@@ -378,4 +378,9 @@ mod tests {
             .with_source("other.typ", "#let f = (x) => 1");
         test(&world, -4, Side::After).must_be_code("(..) => ..");
     }
+
+    #[test]
+    fn test_tooltip_reference() {
+        test("#figure(caption: [Hi])[]<f> @f", -1, Side::Before).must_be_text("Hi");
+    }
 }

crates/typst-layout/Cargo.toml

@@ -21,6 +21,7 @@ typst-timing = { workspace = true }
 typst-utils = { workspace = true }
 az = { workspace = true }
 bumpalo = { workspace = true }
+codex = { workspace = true }
 comemo = { workspace = true }
 ecow = { workspace = true }
 hypher = { workspace = true }

crates/typst-layout/src/flow/mod.rs

@@ -143,7 +143,7 @@ fn layout_fragment_impl(
     let mut kind = FragmentKind::Block;
     let arenas = Arenas::default();
     let children = (engine.routines.realize)(
-        RealizationKind::LayoutFragment(&mut kind),
+        RealizationKind::LayoutFragment { kind: &mut kind },
         &mut engine,
         &mut locator,
         &arenas,

crates/typst-layout/src/image.rs

@@ -1,18 +1,11 @@
-use std::ffi::OsStr;
-
-use typst_library::diag::{warning, At, LoadedWithin, SourceResult, StrResult};
+use typst_library::diag::SourceResult;
 use typst_library::engine::Engine;
-use typst_library::foundations::{Bytes, Derived, Packed, Smart, StyleChain};
+use typst_library::foundations::{Packed, StyleChain};
 use typst_library::introspection::Locator;
 use typst_library::layout::{
     Abs, Axes, FixedAlignment, Frame, FrameItem, Point, Region, Size,
 };
-use typst_library::loading::DataSource;
-use typst_library::text::families;
-use typst_library::visualize::{
-    Curve, ExchangeFormat, Image, ImageElem, ImageFit, ImageFormat, ImageKind,
-    RasterImage, SvgImage, VectorFormat,
-};
+use typst_library::visualize::{Curve, Image, ImageElem, ImageFit};
 
 /// Layout the image.
 #[typst_macros::time(span = elem.span())]
@@ -23,53 +16,7 @@ pub fn layout_image(
     styles: StyleChain,
     region: Region,
 ) -> SourceResult<Frame> {
-    let span = elem.span();
-
-    // Take the format that was explicitly defined, or parse the extension,
-    // or try to detect the format.
-    let Derived { source, derived: loaded } = &elem.source;
-    let format = match elem.format.get(styles) {
-        Smart::Custom(v) => v,
-        Smart::Auto => determine_format(source, &loaded.data).at(span)?,
-    };
-
-    // Warn the user if the image contains a foreign object. Not perfect
-    // because the svg could also be encoded, but that's an edge case.
-    if format == ImageFormat::Vector(VectorFormat::Svg) {
-        let has_foreign_object =
-            memchr::memmem::find(&loaded.data, b"<foreignObject").is_some();
-
-        if has_foreign_object {
-            engine.sink.warn(warning!(
-                span,
-                "image contains foreign object";
-                hint: "SVG images with foreign objects might render incorrectly in typst";
-                hint: "see https://github.com/typst/typst/issues/1421 for more information"
-            ));
-        }
-    }
-
-    // Construct the image itself.
-    let kind = match format {
-        ImageFormat::Raster(format) => ImageKind::Raster(
-            RasterImage::new(
-                loaded.data.clone(),
-                format,
-                elem.icc.get_ref(styles).as_ref().map(|icc| icc.derived.clone()),
-            )
-            .at(span)?,
-        ),
-        ImageFormat::Vector(VectorFormat::Svg) => ImageKind::Svg(
-            SvgImage::with_fonts(
-                loaded.data.clone(),
-                engine.world,
-                &families(styles).map(|f| f.as_str()).collect::<Vec<_>>(),
-            )
-            .within(loaded)?,
-        ),
-    };
-
-    let image = Image::new(kind, elem.alt.get_cloned(styles), elem.scaling.get(styles));
+    let image = elem.decode(engine, styles)?;
 
     // Determine the image's pixel aspect ratio.
     let pxw = image.width();
@@ -122,7 +69,7 @@ pub fn layout_image(
     // the frame to the target size, center aligning the image in the
     // process.
     let mut frame = Frame::soft(fitted);
-    frame.push(Point::zero(), FrameItem::Image(image, fitted, span));
+    frame.push(Point::zero(), FrameItem::Image(image, fitted, elem.span()));
     frame.resize(target, Axes::splat(FixedAlignment::Center));
 
     // Create a clipping group if only part of the image should be visible.
@@ -132,25 +79,3 @@ pub fn layout_image(
 
     Ok(frame)
 }
-
-/// Try to determine the image format based on the data.
-fn determine_format(source: &DataSource, data: &Bytes) -> StrResult<ImageFormat> {
-    if let DataSource::Path(path) = source {
-        let ext = std::path::Path::new(path.as_str())
-            .extension()
-            .and_then(OsStr::to_str)
-            .unwrap_or_default()
-            .to_lowercase();
-
-        match ext.as_str() {
-            "png" => return Ok(ExchangeFormat::Png.into()),
-            "jpg" | "jpeg" => return Ok(ExchangeFormat::Jpg.into()),
-            "gif" => return Ok(ExchangeFormat::Gif.into()),
-            "svg" | "svgz" => return Ok(VectorFormat::Svg.into()),
-            "webp" => return Ok(ExchangeFormat::Webp.into()),
-            _ => {}
-        }
-    }
-
-    Ok(ImageFormat::detect(data).ok_or("unknown image format")?)
-}

crates/typst-layout/src/math/text.rs

@@ -1,10 +1,11 @@
 use std::f64::consts::SQRT_2;
 
+use codex::styling::{to_style, MathStyle};
 use ecow::EcoString;
 use typst_library::diag::SourceResult;
 use typst_library::foundations::{Packed, StyleChain, SymbolElem};
 use typst_library::layout::{Abs, Size};
-use typst_library::math::{EquationElem, MathSize, MathVariant};
+use typst_library::math::{EquationElem, MathSize};
 use typst_library::text::{
     BottomEdge, BottomEdgeMetric, TextElem, TopEdge, TopEdgeMetric,
 };
@@ -64,12 +65,21 @@ fn layout_inline_text(
     ctx: &mut MathContext,
     styles: StyleChain,
 ) -> SourceResult<FrameFragment> {
+    let variant = styles.get(EquationElem::variant);
+    let bold = styles.get(EquationElem::bold);
+    // Disable auto-italic.
+    let italic = styles.get(EquationElem::italic).or(Some(false));
+
     if text.chars().all(|c| c.is_ascii_digit() || c == '.') {
         // Small optimization for numbers. Note that this lays out slightly
         // differently to normal text and is worth re-evaluating in the future.
         let mut fragments = vec![];
         for unstyled_c in text.chars() {
-            let c = styled_char(styles, unstyled_c, false);
+            // This is fine as ascii digits and '.' can never end up as more
+            // than a single char after styling.
+            let style = MathStyle::select(unstyled_c, variant, bold, italic);
+            let c = to_style(unstyled_c, style).next().unwrap();
+
             let glyph = GlyphFragment::new_char(ctx.font, styles, c, span)?;
             fragments.push(glyph.into());
         }
@@ -83,8 +93,10 @@ fn layout_inline_text(
         .map(|p| p.wrap());
 
         let styles = styles.chain(&local);
-        let styled_text: EcoString =
-            text.chars().map(|c| styled_char(styles, c, false)).collect();
+        let styled_text: EcoString = text
+            .chars()
+            .flat_map(|c| to_style(c, MathStyle::select(c, variant, bold, italic)))
+            .collect();
 
         let spaced = styled_text.graphemes(true).nth(1).is_some();
         let elem = TextElem::packed(styled_text).spanned(span);
@@ -124,9 +136,16 @@ pub fn layout_symbol(
         Some(c) if has_dtls_feat(ctx.font) => (c, styles.chain(&dtls)),
         _ => (elem.text, styles),
     };
-    let c = styled_char(styles, unstyled_c, true);
+
+    let variant = styles.get(EquationElem::variant);
+    let bold = styles.get(EquationElem::bold);
+    let italic = styles.get(EquationElem::italic);
+
+    let style = MathStyle::select(unstyled_c, variant, bold, italic);
+    let text: EcoString = to_style(unstyled_c, style).collect();
+
     let fragment: MathFragment =
-        match GlyphFragment::new_char(ctx.font, symbol_styles, c, elem.span()) {
+        match GlyphFragment::new(ctx.font, symbol_styles, &text, elem.span()) {
             Ok(mut glyph) => {
                 adjust_glyph_layout(&mut glyph, ctx, styles);
                 glyph.into()
@@ -134,8 +153,7 @@ pub fn layout_symbol(
             Err(_) => {
                 // Not in the math font, fallback to normal inline text layout.
                 // TODO: Should replace this with proper fallback in [`GlyphFragment::new`].
-                layout_inline_text(c.encode_utf8(&mut [0; 4]), elem.span(), ctx, styles)?
-                    .into()
+                layout_inline_text(&text, elem.span(), ctx, styles)?.into()
             }
         };
     ctx.push(fragment);
@@ -161,226 +179,6 @@ fn adjust_glyph_layout(
     }
 }
 
-/// Style the character by selecting the unicode codepoint for italic, bold,
-/// caligraphic, etc.
-///
-/// <https://www.w3.org/TR/mathml-core/#new-text-transform-mappings>
-/// <https://en.wikipedia.org/wiki/Mathematical_Alphanumeric_Symbols>
-fn styled_char(styles: StyleChain, c: char, auto_italic: bool) -> char {
-    use MathVariant::*;
-
-    let variant = styles.get(EquationElem::variant);
-    let bold = styles.get(EquationElem::bold);
-    let italic = styles.get(EquationElem::italic).unwrap_or(
-        auto_italic
-            && matches!(
-                c,
-                'a'..='z' | 'ħ' | 'ı' | 'ȷ' | 'A'..='Z' |
-                'α'..='ω' | '∂' | 'ϵ' | 'ϑ' | 'ϰ' | 'ϕ' | 'ϱ' | 'ϖ'
-            )
-            && matches!(variant, Sans | Serif),
-    );
-
-    if let Some(c) = basic_exception(c) {
-        return c;
-    }
-
-    if let Some(c) = latin_exception(c, variant, bold, italic) {
-        return c;
-    }
-
-    if let Some(c) = greek_exception(c, variant, bold, italic) {
-        return c;
-    }
-
-    let base = match c {
-        'A'..='Z' => 'A',
-        'a'..='z' => 'a',
-        'Α'..='Ω' => 'Α',
-        'α'..='ω' => 'α',
-        '0'..='9' => '0',
-        // Hebrew Alef -> Dalet.
-        '\u{05D0}'..='\u{05D3}' => '\u{05D0}',
-        _ => return c,
-    };
-
-    let tuple = (variant, bold, italic);
-    let start = match c {
-        // Latin upper.
-        'A'..='Z' => match tuple {
-            (Serif, false, false) => 0x0041,
-            (Serif, true, false) => 0x1D400,
-            (Serif, false, true) => 0x1D434,
-            (Serif, true, true) => 0x1D468,
-            (Sans, false, false) => 0x1D5A0,
-            (Sans, true, false) => 0x1D5D4,
-            (Sans, false, true) => 0x1D608,
-            (Sans, true, true) => 0x1D63C,
-            (Cal, false, _) => 0x1D49C,
-            (Cal, true, _) => 0x1D4D0,
-            (Frak, false, _) => 0x1D504,
-            (Frak, true, _) => 0x1D56C,
-            (Mono, _, _) => 0x1D670,
-            (Bb, _, _) => 0x1D538,
-        },
-
-        // Latin lower.
-        'a'..='z' => match tuple {
-            (Serif, false, false) => 0x0061,
-            (Serif, true, false) => 0x1D41A,
-            (Serif, false, true) => 0x1D44E,
-            (Serif, true, true) => 0x1D482,
-            (Sans, false, false) => 0x1D5BA,
-            (Sans, true, false) => 0x1D5EE,
-            (Sans, false, true) => 0x1D622,
-            (Sans, true, true) => 0x1D656,
-            (Cal, false, _) => 0x1D4B6,
-            (Cal, true, _) => 0x1D4EA,
-            (Frak, false, _) => 0x1D51E,
-            (Frak, true, _) => 0x1D586,
-            (Mono, _, _) => 0x1D68A,
-            (Bb, _, _) => 0x1D552,
-        },
-
-        // Greek upper.
-        'Α'..='Ω' => match tuple {
-            (Serif, false, false) => 0x0391,
-            (Serif, true, false) => 0x1D6A8,
-            (Serif, false, true) => 0x1D6E2,
-            (Serif, true, true) => 0x1D71C,
-            (Sans, _, false) => 0x1D756,
-            (Sans, _, true) => 0x1D790,
-            (Cal | Frak | Mono | Bb, _, _) => return c,
-        },
-
-        // Greek lower.
-        'α'..='ω' => match tuple {
-            (Serif, false, false) => 0x03B1,
-            (Serif, true, false) => 0x1D6C2,
-            (Serif, false, true) => 0x1D6FC,
-            (Serif, true, true) => 0x1D736,
-            (Sans, _, false) => 0x1D770,
-            (Sans, _, true) => 0x1D7AA,
-            (Cal | Frak | Mono | Bb, _, _) => return c,
-        },
-
-        // Hebrew Alef -> Dalet.
-        '\u{05D0}'..='\u{05D3}' => 0x2135,
-
-        // Numbers.
-        '0'..='9' => match tuple {
-            (Serif, false, _) => 0x0030,
-            (Serif, true, _) => 0x1D7CE,
-            (Bb, _, _) => 0x1D7D8,
-            (Sans, false, _) => 0x1D7E2,
-            (Sans, true, _) => 0x1D7EC,
-            (Mono, _, _) => 0x1D7F6,
-            (Cal | Frak, _, _) => return c,
-        },
-
-        _ => unreachable!(),
-    };
-
-    std::char::from_u32(start + (c as u32 - base as u32)).unwrap()
-}
-
-fn basic_exception(c: char) -> Option<char> {
-    Some(match c {
-        '〈' => '⟨',
-        '〉' => '⟩',
-        '《' => '⟪',
-        '》' => '⟫',
-        _ => return None,
-    })
-}
-
-fn latin_exception(
-    c: char,
-    variant: MathVariant,
-    bold: bool,
-    italic: bool,
-) -> Option<char> {
-    use MathVariant::*;
-    Some(match (c, variant, bold, italic) {
-        ('B', Cal, false, _) => 'ℬ',
-        ('E', Cal, false, _) => 'ℰ',
-        ('F', Cal, false, _) => 'ℱ',
-        ('H', Cal, false, _) => 'ℋ',
-        ('I', Cal, false, _) => 'ℐ',
-        ('L', Cal, false, _) => 'ℒ',
-        ('M', Cal, false, _) => 'ℳ',
-        ('R', Cal, false, _) => 'ℛ',
-        ('C', Frak, false, _) => 'ℭ',
-        ('H', Frak, false, _) => 'ℌ',
-        ('I', Frak, false, _) => 'ℑ',
-        ('R', Frak, false, _) => 'ℜ',
-        ('Z', Frak, false, _) => 'ℨ',
-        ('C', Bb, ..) => 'ℂ',
-        ('H', Bb, ..) => 'ℍ',
-        ('N', Bb, ..) => 'ℕ',
-        ('P', Bb, ..) => 'ℙ',
-        ('Q', Bb, ..) => 'ℚ',
-        ('R', Bb, ..) => 'ℝ',
-        ('Z', Bb, ..) => 'ℤ',
-        ('D', Bb, _, true) => 'ⅅ',
-        ('d', Bb, _, true) => 'ⅆ',
-        ('e', Bb, _, true) => 'ⅇ',
-        ('i', Bb, _, true) => 'ⅈ',
-        ('j', Bb, _, true) => 'ⅉ',
-        ('h', Serif, false, true) => 'ℎ',
-        ('e', Cal, false, _) => 'ℯ',
-        ('g', Cal, false, _) => 'ℊ',
-        ('o', Cal, false, _) => 'ℴ',
-        ('ħ', Serif, .., true) => 'ℏ',
-        ('ı', Serif, .., true) => '𝚤',
-        ('ȷ', Serif, .., true) => '𝚥',
-        _ => return None,
-    })
-}
-
-fn greek_exception(
-    c: char,
-    variant: MathVariant,
-    bold: bool,
-    italic: bool,
-) -> Option<char> {
-    use MathVariant::*;
-    if c == 'Ϝ' && variant == Serif && bold {
-        return Some('𝟊');
-    }
-    if c == 'ϝ' && variant == Serif && bold {
-        return Some('𝟋');
-    }
-
-    let list = match c {
-        'ϴ' => ['𝚹', '𝛳', '𝜭', '𝝧', '𝞡', 'ϴ'],
-        '∇' => ['𝛁', '𝛻', '𝜵', '𝝯', '𝞩', '∇'],
-        '∂' => ['𝛛', '𝜕', '𝝏', '𝞉', '𝟃', '∂'],
-        'ϵ' => ['𝛜', '𝜖', '𝝐', '𝞊', '𝟄', 'ϵ'],
-        'ϑ' => ['𝛝', '𝜗', '𝝑', '𝞋', '𝟅', 'ϑ'],
-        'ϰ' => ['𝛞', '𝜘', '𝝒', '𝞌', '𝟆', 'ϰ'],
-        'ϕ' => ['𝛟', '𝜙', '𝝓', '𝞍', '𝟇', 'ϕ'],
-        'ϱ' => ['𝛠', '𝜚', '𝝔', '𝞎', '𝟈', 'ϱ'],
-        'ϖ' => ['𝛡', '𝜛', '𝝕', '𝞏', '𝟉', 'ϖ'],
-        'Γ' => ['𝚪', '𝛤', '𝜞', '𝝘', '𝞒', 'ℾ'],
-        'γ' => ['𝛄', '𝛾', '𝜸', '𝝲', '𝞬', 'ℽ'],
-        'Π' => ['𝚷', '𝛱', '𝜫', '𝝥', '𝞟', 'ℿ'],
-        'π' => ['𝛑', '𝜋', '𝝅', '𝝿', '𝞹', 'ℼ'],
-        '∑' => ['∑', '∑', '∑', '∑', '∑', '⅀'],
-        _ => return None,
-    };
-
-    Some(match (variant, bold, italic) {
-        (Serif, true, false) => list[0],
-        (Serif, false, true) => list[1],
-        (Serif, true, true) => list[2],
-        (Sans, _, false) => list[3],
-        (Sans, _, true) => list[4],
-        (Bb, ..) => list[5],
-        _ => return None,
-    })
-}
-
 /// The non-dotless version of a dotless character that can be used with the
 /// `dtls` OpenType feature.
 pub fn try_dotless(c: char) -> Option<char> {

crates/typst-layout/src/pages/mod.rs

@@ -4,14 +4,16 @@ mod collect;
 mod finalize;
 mod run;
 
+use std::num::NonZeroUsize;
+
 use comemo::{Tracked, TrackedMut};
 use typst_library::diag::SourceResult;
 use typst_library::engine::{Engine, Route, Sink, Traced};
 use typst_library::foundations::{Content, StyleChain};
 use typst_library::introspection::{
-    Introspector, Locator, ManualPageCounter, SplitLocator, TagElem,
+    Introspector, IntrospectorBuilder, Locator, ManualPageCounter, SplitLocator, TagElem,
 };
-use typst_library::layout::{FrameItem, Page, PagedDocument, Point};
+use typst_library::layout::{FrameItem, Page, PagedDocument, Point, Transform};
 use typst_library::model::DocumentInfo;
 use typst_library::routines::{Arenas, Pair, RealizationKind, Routines};
 use typst_library::World;
@@ -75,7 +77,7 @@ fn layout_document_impl(
     let arenas = Arenas::default();
     let mut info = DocumentInfo::default();
     let mut children = (engine.routines.realize)(
-        RealizationKind::LayoutDocument(&mut info),
+        RealizationKind::LayoutDocument { info: &mut info },
         &mut engine,
         &mut locator,
         &arenas,
@@ -84,7 +86,7 @@ fn layout_document_impl(
     )?;
 
     let pages = layout_pages(&mut engine, &mut children, &mut locator, styles)?;
-    let introspector = Introspector::paged(&pages);
+    let introspector = introspect_pages(&pages);
 
     Ok(PagedDocument { pages, info, introspector })
 }
@@ -157,3 +159,27 @@ fn layout_pages<'a>(
 
     Ok(pages)
 }
+
+/// Introspects pages.
+#[typst_macros::time(name = "introspect pages")]
+fn introspect_pages(pages: &[Page]) -> Introspector {
+    let mut builder = IntrospectorBuilder::new();
+    builder.pages = pages.len();
+    builder.page_numberings.reserve(pages.len());
+    builder.page_supplements.reserve(pages.len());
+
+    // Discover all elements.
+    let mut elems = Vec::new();
+    for (i, page) in pages.iter().enumerate() {
+        builder.page_numberings.push(page.numbering.clone());
+        builder.page_supplements.push(page.supplement.clone());
+        builder.discover_in_frame(
+            &mut elems,
+            &page.frame,
+            NonZeroUsize::new(1 + i).unwrap(),
+            Transform::identity(),
+        );
+    }
+
+    builder.finalize(elems)
+}

crates/typst-library/src/foundations/content/packed.rs

@@ -64,6 +64,16 @@ impl<T: NativeElement> Packed<T> {
         self.0
     }
 
+    /// Pack back into a reference to content.
+    pub fn pack_ref(&self) -> &Content {
+        &self.0
+    }
+
+    /// Pack back into a mutable reference to content.
+    pub fn pack_mut(&mut self) -> &mut Content {
+        &mut self.0
+    }
+
     /// Extract the raw underlying element.
     pub fn unpack(self) -> T {
         // This function doesn't yet need owned self, but might in the future.
@@ -94,10 +104,6 @@ impl<T: NativeElement> Packed<T> {
     pub fn set_location(&mut self, location: Location) {
         self.0.set_location(location);
     }
-
-    pub fn as_content(&self) -> &Content {
-        &self.0
-    }
 }
 
 impl<T: NativeElement> AsRef<T> for Packed<T> {

crates/typst-library/src/foundations/content/raw.rs

@@ -141,7 +141,7 @@ impl RawContent {
 
     /// Clones a packed element into new raw content.
     pub(super) fn clone_impl<E: NativeElement>(elem: &Packed<E>) -> Self {
-        let raw = &elem.as_content().0;
+        let raw = &elem.pack_ref().0;
         let header = raw.header();
         RawContent::create(
             elem.as_ref().clone(),

crates/typst-library/src/html/dom.rs

@@ -1,823 +0,0 @@
-use std::fmt::{self, Debug, Display, Formatter};
-
-use ecow::{EcoString, EcoVec};
-use typst_syntax::Span;
-use typst_utils::{PicoStr, ResolvedPicoStr};
-
-use crate::diag::{bail, HintedStrResult, StrResult};
-use crate::foundations::{cast, Dict, Repr, Str};
-use crate::introspection::{Introspector, Tag};
-use crate::layout::{Abs, Frame};
-use crate::model::DocumentInfo;
-
-/// An HTML document.
-#[derive(Debug, Clone)]
-pub struct HtmlDocument {
-    /// The document's root HTML element.
-    pub root: HtmlElement,
-    /// Details about the document.
-    pub info: DocumentInfo,
-    /// Provides the ability to execute queries on the document.
-    pub introspector: Introspector,
-}
-
-/// A child of an HTML element.
-#[derive(Debug, Clone, Hash)]
-pub enum HtmlNode {
-    /// An introspectable element that produced something within this node.
-    Tag(Tag),
-    /// Plain text.
-    Text(EcoString, Span),
-    /// Another element.
-    Element(HtmlElement),
-    /// Layouted content that will be embedded into HTML as an SVG.
-    Frame(HtmlFrame),
-}
-
-impl HtmlNode {
-    /// Create a plain text node.
-    pub fn text(text: impl Into<EcoString>, span: Span) -> Self {
-        Self::Text(text.into(), span)
-    }
-}
-
-impl From<HtmlElement> for HtmlNode {
-    fn from(element: HtmlElement) -> Self {
-        Self::Element(element)
-    }
-}
-
-/// An HTML element.
-#[derive(Debug, Clone, Hash)]
-pub struct HtmlElement {
-    /// The HTML tag.
-    pub tag: HtmlTag,
-    /// The element's attributes.
-    pub attrs: HtmlAttrs,
-    /// The element's children.
-    pub children: Vec<HtmlNode>,
-    /// The span from which the element originated, if any.
-    pub span: Span,
-}
-
-impl HtmlElement {
-    /// Create a new, blank element without attributes or children.
-    pub fn new(tag: HtmlTag) -> Self {
-        Self {
-            tag,
-            attrs: HtmlAttrs::default(),
-            children: vec![],
-            span: Span::detached(),
-        }
-    }
-
-    /// Attach children to the element.
-    ///
-    /// Note: This overwrites potential previous children.
-    pub fn with_children(mut self, children: Vec<HtmlNode>) -> Self {
-        self.children = children;
-        self
-    }
-
-    /// Add an atribute to the element.
-    pub fn with_attr(mut self, key: HtmlAttr, value: impl Into<EcoString>) -> Self {
-        self.attrs.push(key, value);
-        self
-    }
-
-    /// Attach a span to the element.
-    pub fn spanned(mut self, span: Span) -> Self {
-        self.span = span;
-        self
-    }
-}
-
-/// The tag of an HTML element.
-#[derive(Copy, Clone, Eq, PartialEq, Hash)]
-pub struct HtmlTag(PicoStr);
-
-impl HtmlTag {
-    /// Intern an HTML tag string at runtime.
-    pub fn intern(string: &str) -> StrResult<Self> {
-        if string.is_empty() {
-            bail!("tag name must not be empty");
-        }
-
-        if let Some(c) = string.chars().find(|&c| !charsets::is_valid_in_tag_name(c)) {
-            bail!("the character {} is not valid in a tag name", c.repr());
-        }
-
-        Ok(Self(PicoStr::intern(string)))
-    }
-
-    /// Creates a compile-time constant `HtmlTag`.
-    ///
-    /// Should only be used in const contexts because it can panic.
-    #[track_caller]
-    pub const fn constant(string: &'static str) -> Self {
-        if string.is_empty() {
-            panic!("tag name must not be empty");
-        }
-
-        let bytes = string.as_bytes();
-        let mut i = 0;
-        while i < bytes.len() {
-            if !bytes[i].is_ascii() || !charsets::is_valid_in_tag_name(bytes[i] as char) {
-                panic!("not all characters are valid in a tag name");
-            }
-            i += 1;
-        }
-
-        Self(PicoStr::constant(string))
-    }
-
-    /// Resolves the tag to a string.
-    pub fn resolve(self) -> ResolvedPicoStr {
-        self.0.resolve()
-    }
-
-    /// Turns the tag into its inner interned string.
-    pub const fn into_inner(self) -> PicoStr {
-        self.0
-    }
-}
-
-impl Debug for HtmlTag {
-    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
-        Display::fmt(self, f)
-    }
-}
-
-impl Display for HtmlTag {
-    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
-        write!(f, "<{}>", self.resolve())
-    }
-}
-
-cast! {
-    HtmlTag,
-    self => self.0.resolve().as_str().into_value(),
-    v: Str => Self::intern(&v)?,
-}
-
-/// Attributes of an HTML element.
-#[derive(Debug, Default, Clone, Eq, PartialEq, Hash)]
-pub struct HtmlAttrs(pub EcoVec<(HtmlAttr, EcoString)>);
-
-impl HtmlAttrs {
-    /// Add an attribute.
-    pub fn push(&mut self, attr: HtmlAttr, value: impl Into<EcoString>) {
-        self.0.push((attr, value.into()));
-    }
-}
-
-cast! {
-    HtmlAttrs,
-    self => self.0
-        .into_iter()
-        .map(|(key, value)| (key.resolve().as_str().into(), value.into_value()))
-        .collect::<Dict>()
-        .into_value(),
-    values: Dict => Self(values
-        .into_iter()
-        .map(|(k, v)| {
-            let attr = HtmlAttr::intern(&k)?;
-            let value = v.cast::<EcoString>()?;
-            Ok((attr, value))
-        })
-        .collect::<HintedStrResult<_>>()?),
-}
-
-/// An attribute of an HTML element.
-#[derive(Copy, Clone, Eq, PartialEq, Hash)]
-pub struct HtmlAttr(PicoStr);
-
-impl HtmlAttr {
-    /// Intern an HTML attribute string at runtime.
-    pub fn intern(string: &str) -> StrResult<Self> {
-        if string.is_empty() {
-            bail!("attribute name must not be empty");
-        }
-
-        if let Some(c) =
-            string.chars().find(|&c| !charsets::is_valid_in_attribute_name(c))
-        {
-            bail!("the character {} is not valid in an attribute name", c.repr());
-        }
-
-        Ok(Self(PicoStr::intern(string)))
-    }
-
-    /// Creates a compile-time constant `HtmlAttr`.
-    ///
-    /// Must only be used in const contexts (in a constant definition or
-    /// explicit `const { .. }` block) because otherwise a panic for a malformed
-    /// attribute or not auto-internible constant will only be caught at
-    /// runtime.
-    #[track_caller]
-    pub const fn constant(string: &'static str) -> Self {
-        if string.is_empty() {
-            panic!("attribute name must not be empty");
-        }
-
-        let bytes = string.as_bytes();
-        let mut i = 0;
-        while i < bytes.len() {
-            if !bytes[i].is_ascii()
-                || !charsets::is_valid_in_attribute_name(bytes[i] as char)
-            {
-                panic!("not all characters are valid in an attribute name");
-            }
-            i += 1;
-        }
-
-        Self(PicoStr::constant(string))
-    }
-
-    /// Resolves the attribute to a string.
-    pub fn resolve(self) -> ResolvedPicoStr {
-        self.0.resolve()
-    }
-
-    /// Turns the attribute into its inner interned string.
-    pub const fn into_inner(self) -> PicoStr {
-        self.0
-    }
-}
-
-impl Debug for HtmlAttr {
-    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
-        Display::fmt(self, f)
-    }
-}
-
-impl Display for HtmlAttr {
-    fn fmt(&self, f: &mut Formatter<'_>) -> fmt::Result {
-        write!(f, "{}", self.resolve())
-    }
-}
-
-cast! {
-    HtmlAttr,
-    self => self.0.resolve().as_str().into_value(),
-    v: Str => Self::intern(&v)?,
-}
-
-/// Layouted content that will be embedded into HTML as an SVG.
-#[derive(Debug, Clone, Hash)]
-pub struct HtmlFrame {
-    /// The frame that will be displayed as an SVG.
-    pub inner: Frame,
-    /// The text size where the frame was defined. This is used to size the
-    /// frame with em units to make text in and outside of the frame sized
-    /// consistently.
-    pub text_size: Abs,
-}
-
-/// Defines syntactical properties of HTML tags, attributes, and text.
-pub mod charsets {
-    /// Check whether a character is in a tag name.
-    pub const fn is_valid_in_tag_name(c: char) -> bool {
-        c.is_ascii_alphanumeric()
-    }
-
-    /// Check whether a character is valid in an attribute name.
-    pub const fn is_valid_in_attribute_name(c: char) -> bool {
-        match c {
-            // These are forbidden.
-            '\0' | ' ' | '"' | '\'' | '>' | '/' | '=' => false,
-            c if is_whatwg_control_char(c) => false,
-            c if is_whatwg_non_char(c) => false,
-            // _Everything_ else is allowed, including U+2029 paragraph
-            // separator. Go wild.
-            _ => true,
-        }
-    }
-
-    /// Check whether a character can be an used in an attribute value without
-    /// escaping.
-    ///
-    /// See <https://html.spec.whatwg.org/multipage/syntax.html#attributes-2>
-    pub const fn is_valid_in_attribute_value(c: char) -> bool {
-        match c {
-            // Ampersands are sometimes legal (i.e. when they are not _ambiguous
-            // ampersands_) but it is not worth the trouble to check for that.
-            '&' => false,
-            // Quotation marks are not allowed in double-quote-delimited attribute
-            // values.
-            '"' => false,
-            // All other text characters are allowed.
-            c => is_w3c_text_char(c),
-        }
-    }
-
-    /// Check whether a character can be an used in normal text without
-    /// escaping.
-    pub const fn is_valid_in_normal_element_text(c: char) -> bool {
-        match c {
-            // Ampersands are sometimes legal (i.e. when they are not _ambiguous
-            // ampersands_) but it is not worth the trouble to check for that.
-            '&' => false,
-            // Less-than signs are not allowed in text.
-            '<' => false,
-            // All other text characters are allowed.
-            c => is_w3c_text_char(c),
-        }
-    }
-
-    /// Check if something is valid text in HTML.
-    pub const fn is_w3c_text_char(c: char) -> bool {
-        match c {
-            // Non-characters are obviously not text characters.
-            c if is_whatwg_non_char(c) => false,
-            // Control characters are disallowed, except for whitespace.
-            c if is_whatwg_control_char(c) => c.is_ascii_whitespace(),
-            // Everything else is allowed.
-            _ => true,
-        }
-    }
-
-    const fn is_whatwg_non_char(c: char) -> bool {
-        match c {
-            '\u{fdd0}'..='\u{fdef}' => true,
-            // Non-characters matching xxFFFE or xxFFFF up to x10FFFF (inclusive).
-            c if c as u32 & 0xfffe == 0xfffe && c as u32 <= 0x10ffff => true,
-            _ => false,
-        }
-    }
-
-    const fn is_whatwg_control_char(c: char) -> bool {
-        match c {
-            // C0 control characters.
-            '\u{00}'..='\u{1f}' => true,
-            // Other control characters.
-            '\u{7f}'..='\u{9f}' => true,
-            _ => false,
-        }
-    }
-}
-
-/// Predefined constants for HTML tags.
-#[allow(non_upper_case_globals)]
-pub mod tag {
-    use super::HtmlTag;
-
-    pub const a: HtmlTag = HtmlTag::constant("a");
-    pub const abbr: HtmlTag = HtmlTag::constant("abbr");
-    pub const address: HtmlTag = HtmlTag::constant("address");
-    pub const area: HtmlTag = HtmlTag::constant("area");
-    pub const article: HtmlTag = HtmlTag::constant("article");
-    pub const aside: HtmlTag = HtmlTag::constant("aside");
-    pub const audio: HtmlTag = HtmlTag::constant("audio");
-    pub const b: HtmlTag = HtmlTag::constant("b");
-    pub const base: HtmlTag = HtmlTag::constant("base");
-    pub const bdi: HtmlTag = HtmlTag::constant("bdi");
-    pub const bdo: HtmlTag = HtmlTag::constant("bdo");
-    pub const blockquote: HtmlTag = HtmlTag::constant("blockquote");
-    pub const body: HtmlTag = HtmlTag::constant("body");
-    pub const br: HtmlTag = HtmlTag::constant("br");
-    pub const button: HtmlTag = HtmlTag::constant("button");
-    pub const canvas: HtmlTag = HtmlTag::constant("canvas");
-    pub const caption: HtmlTag = HtmlTag::constant("caption");
-    pub const cite: HtmlTag = HtmlTag::constant("cite");
-    pub const code: HtmlTag = HtmlTag::constant("code");
-    pub const col: HtmlTag = HtmlTag::constant("col");
-    pub const colgroup: HtmlTag = HtmlTag::constant("colgroup");
-    pub const data: HtmlTag = HtmlTag::constant("data");
-    pub const datalist: HtmlTag = HtmlTag::constant("datalist");
-    pub const dd: HtmlTag = HtmlTag::constant("dd");
-    pub const del: HtmlTag = HtmlTag::constant("del");
-    pub const details: HtmlTag = HtmlTag::constant("details");
-    pub const dfn: HtmlTag = HtmlTag::constant("dfn");
-    pub const dialog: HtmlTag = HtmlTag::constant("dialog");
-    pub const div: HtmlTag = HtmlTag::constant("div");
-    pub const dl: HtmlTag = HtmlTag::constant("dl");
-    pub const dt: HtmlTag = HtmlTag::constant("dt");
-    pub const em: HtmlTag = HtmlTag::constant("em");
-    pub const embed: HtmlTag = HtmlTag::constant("embed");
-    pub const fieldset: HtmlTag = HtmlTag::constant("fieldset");
-    pub const figcaption: HtmlTag = HtmlTag::constant("figcaption");
-    pub const figure: HtmlTag = HtmlTag::constant("figure");
-    pub const footer: HtmlTag = HtmlTag::constant("footer");
-    pub const form: HtmlTag = HtmlTag::constant("form");
-    pub const h1: HtmlTag = HtmlTag::constant("h1");
-    pub const h2: HtmlTag = HtmlTag::constant("h2");
-    pub const h3: HtmlTag = HtmlTag::constant("h3");
-    pub const h4: HtmlTag = HtmlTag::constant("h4");
-    pub const h5: HtmlTag = HtmlTag::constant("h5");
-    pub const h6: HtmlTag = HtmlTag::constant("h6");
-    pub const head: HtmlTag = HtmlTag::constant("head");
-    pub const header: HtmlTag = HtmlTag::constant("header");
-    pub const hgroup: HtmlTag = HtmlTag::constant("hgroup");
-    pub const hr: HtmlTag = HtmlTag::constant("hr");
-    pub const html: HtmlTag = HtmlTag::constant("html");
-    pub const i: HtmlTag = HtmlTag::constant("i");
-    pub const iframe: HtmlTag = HtmlTag::constant("iframe");
-    pub const img: HtmlTag = HtmlTag::constant("img");
-    pub const input: HtmlTag = HtmlTag::constant("input");
-    pub const ins: HtmlTag = HtmlTag::constant("ins");
-    pub const kbd: HtmlTag = HtmlTag::constant("kbd");
-    pub const label: HtmlTag = HtmlTag::constant("label");
-    pub const legend: HtmlTag = HtmlTag::constant("legend");
-    pub const li: HtmlTag = HtmlTag::constant("li");
-    pub const link: HtmlTag = HtmlTag::constant("link");
-    pub const main: HtmlTag = HtmlTag::constant("main");
-    pub const map: HtmlTag = HtmlTag::constant("map");
-    pub const mark: HtmlTag = HtmlTag::constant("mark");
-    pub const menu: HtmlTag = HtmlTag::constant("menu");
-    pub const meta: HtmlTag = HtmlTag::constant("meta");
-    pub const meter: HtmlTag = HtmlTag::constant("meter");
-    pub const nav: HtmlTag = HtmlTag::constant("nav");
-    pub const noscript: HtmlTag = HtmlTag::constant("noscript");
-    pub const object: HtmlTag = HtmlTag::constant("object");
-    pub const ol: HtmlTag = HtmlTag::constant("ol");
-    pub const optgroup: HtmlTag = HtmlTag::constant("optgroup");
-    pub const option: HtmlTag = HtmlTag::constant("option");
-    pub const output: HtmlTag = HtmlTag::constant("output");
-    pub const p: HtmlTag = HtmlTag::constant("p");
-    pub const picture: HtmlTag = HtmlTag::constant("picture");
-    pub const pre: HtmlTag = HtmlTag::constant("pre");
-    pub const progress: HtmlTag = HtmlTag::constant("progress");
-    pub const q: HtmlTag = HtmlTag::constant("q");
-    pub const rp: HtmlTag = HtmlTag::constant("rp");
-    pub const rt: HtmlTag = HtmlTag::constant("rt");
-    pub const ruby: HtmlTag = HtmlTag::constant("ruby");
-    pub const s: HtmlTag = HtmlTag::constant("s");
-    pub const samp: HtmlTag = HtmlTag::constant("samp");
-    pub const script: HtmlTag = HtmlTag::constant("script");
-    pub const search: HtmlTag = HtmlTag::constant("search");
-    pub const section: HtmlTag = HtmlTag::constant("section");
-    pub const select: HtmlTag = HtmlTag::constant("select");
-    pub const slot: HtmlTag = HtmlTag::constant("slot");
-    pub const small: HtmlTag = HtmlTag::constant("small");
-    pub const source: HtmlTag = HtmlTag::constant("source");
-    pub const span: HtmlTag = HtmlTag::constant("span");
-    pub const strong: HtmlTag = HtmlTag::constant("strong");
-    pub const style: HtmlTag = HtmlTag::constant("style");
-    pub const sub: HtmlTag = HtmlTag::constant("sub");
-    pub const summary: HtmlTag = HtmlTag::constant("summary");
-    pub const sup: HtmlTag = HtmlTag::constant("sup");
-    pub const table: HtmlTag = HtmlTag::constant("table");
-    pub const tbody: HtmlTag = HtmlTag::constant("tbody");
-    pub const td: HtmlTag = HtmlTag::constant("td");
-    pub const template: HtmlTag = HtmlTag::constant("template");
-    pub const textarea: HtmlTag = HtmlTag::constant("textarea");
-    pub const tfoot: HtmlTag = HtmlTag::constant("tfoot");
-    pub const th: HtmlTag = HtmlTag::constant("th");
-    pub const thead: HtmlTag = HtmlTag::constant("thead");
-    pub const time: HtmlTag = HtmlTag::constant("time");
-    pub const title: HtmlTag = HtmlTag::constant("title");
-    pub const tr: HtmlTag = HtmlTag::constant("tr");
-    pub const track: HtmlTag = HtmlTag::constant("track");
-    pub const u: HtmlTag = HtmlTag::constant("u");
-    pub const ul: HtmlTag = HtmlTag::constant("ul");
-    pub const var: HtmlTag = HtmlTag::constant("var");
-    pub const video: HtmlTag = HtmlTag::constant("video");
-    pub const wbr: HtmlTag = HtmlTag::constant("wbr");
-
-    /// Whether this is a void tag whose associated element may not have
-    /// children.
-    pub fn is_void(tag: HtmlTag) -> bool {
-        matches!(
-            tag,
-            self::area
-                | self::base
-                | self::br
-                | self::col
-                | self::embed
-                | self::hr
-                | self::img
-                | self::input
-                | self::link
-                | self::meta
-                | self::source
-                | self::track
-                | self::wbr
-        )
-    }
-
-    /// Whether this is a tag containing raw text.
-    pub fn is_raw(tag: HtmlTag) -> bool {
-        matches!(tag, self::script | self::style)
-    }
-
-    /// Whether this is a tag containing escapable raw text.
-    pub fn is_escapable_raw(tag: HtmlTag) -> bool {
-        matches!(tag, self::textarea | self::title)
-    }
-
-    /// Whether an element is considered metadata.
-    pub fn is_metadata(tag: HtmlTag) -> bool {
-        matches!(
-            tag,
-            self::base
-                | self::link
-                | self::meta
-                | self::noscript
-                | self::script
-                | self::style
-                | self::template
-                | self::title
-        )
-    }
-
-    /// Whether nodes with the tag have the CSS property `display: block` by
-    /// default.
-    pub fn is_block_by_default(tag: HtmlTag) -> bool {
-        matches!(
-            tag,
-            self::html
-                | self::head
-                | self::body
-                | self::article
-                | self::aside
-                | self::h1
-                | self::h2
-                | self::h3
-                | self::h4
-                | self::h5
-                | self::h6
-                | self::hgroup
-                | self::nav
-                | self::section
-                | self::dd
-                | self::dl
-                | self::dt
-                | self::menu
-                | self::ol
-                | self::ul
-                | self::address
-                | self::blockquote
-                | self::dialog
-                | self::div
-                | self::fieldset
-                | self::figure
-                | self::figcaption
-                | self::footer
-                | self::form
-                | self::header
-                | self::hr
-                | self::legend
-                | self::main
-                | self::p
-                | self::pre
-                | self::search
-        )
-    }
-
-    /// Whether the element is inline-level as opposed to being block-level.
-    ///
-    /// Not sure whether this distinction really makes sense. But we somehow
-    /// need to decide what to put into automatic paragraphs. A `<strong>`
-    /// should merged into a paragraph created by realization, but a `<div>`
-    /// shouldn't.
-    ///
-    /// <https://www.w3.org/TR/html401/struct/global.html#block-inline>
-    /// <https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content>
-    /// <https://github.com/orgs/mdn/discussions/353>
-    pub fn is_inline_by_default(tag: HtmlTag) -> bool {
-        matches!(
-            tag,
-            self::abbr
-                | self::a
-                | self::bdi
-                | self::b
-                | self::br
-                | self::bdo
-                | self::code
-                | self::cite
-                | self::dfn
-                | self::data
-                | self::i
-                | self::em
-                | self::mark
-                | self::kbd
-                | self::rp
-                | self::q
-                | self::ruby
-                | self::rt
-                | self::samp
-                | self::s
-                | self::span
-                | self::small
-                | self::sub
-                | self::strong
-                | self::time
-                | self::sup
-                | self::var
-                | self::u
-        )
-    }
-
-    /// Whether nodes with the tag have the CSS property `display: table(-.*)?`
-    /// by default.
-    pub fn is_tabular_by_default(tag: HtmlTag) -> bool {
-        matches!(
-            tag,
-            self::table
-                | self::thead
-                | self::tbody
-                | self::tfoot
-                | self::tr
-                | self::th
-                | self::td
-                | self::caption
-                | self::col
-                | self::colgroup
-        )
-    }
-}
-
-#[allow(non_upper_case_globals)]
-#[rustfmt::skip]
-pub mod attr {
-    use crate::html::HtmlAttr;
-    pub const abbr: HtmlAttr = HtmlAttr::constant("abbr");
-    pub const accept: HtmlAttr = HtmlAttr::constant("accept");
-    pub const accept_charset: HtmlAttr = HtmlAttr::constant("accept-charset");
-    pub const accesskey: HtmlAttr = HtmlAttr::constant("accesskey");
-    pub const action: HtmlAttr = HtmlAttr::constant("action");
-    pub const allow: HtmlAttr = HtmlAttr::constant("allow");
-    pub const allowfullscreen: HtmlAttr = HtmlAttr::constant("allowfullscreen");
-    pub const alpha: HtmlAttr = HtmlAttr::constant("alpha");
-    pub const alt: HtmlAttr = HtmlAttr::constant("alt");
-    pub const aria_activedescendant: HtmlAttr = HtmlAttr::constant("aria-activedescendant");
-    pub const aria_atomic: HtmlAttr = HtmlAttr::constant("aria-atomic");
-    pub const aria_autocomplete: HtmlAttr = HtmlAttr::constant("aria-autocomplete");
-    pub const aria_busy: HtmlAttr = HtmlAttr::constant("aria-busy");
-    pub const aria_checked: HtmlAttr = HtmlAttr::constant("aria-checked");
-    pub const aria_colcount: HtmlAttr = HtmlAttr::constant("aria-colcount");
-    pub const aria_colindex: HtmlAttr = HtmlAttr::constant("aria-colindex");
-    pub const aria_colspan: HtmlAttr = HtmlAttr::constant("aria-colspan");
-    pub const aria_controls: HtmlAttr = HtmlAttr::constant("aria-controls");
-    pub const aria_current: HtmlAttr = HtmlAttr::constant("aria-current");
-    pub const aria_describedby: HtmlAttr = HtmlAttr::constant("aria-describedby");
-    pub const aria_details: HtmlAttr = HtmlAttr::constant("aria-details");
-    pub const aria_disabled: HtmlAttr = HtmlAttr::constant("aria-disabled");
-    pub const aria_errormessage: HtmlAttr = HtmlAttr::constant("aria-errormessage");
-    pub const aria_expanded: HtmlAttr = HtmlAttr::constant("aria-expanded");
-    pub const aria_flowto: HtmlAttr = HtmlAttr::constant("aria-flowto");
-    pub const aria_haspopup: HtmlAttr = HtmlAttr::constant("aria-haspopup");
-    pub const aria_hidden: HtmlAttr = HtmlAttr::constant("aria-hidden");
-    pub const aria_invalid: HtmlAttr = HtmlAttr::constant("aria-invalid");
-    pub const aria_keyshortcuts: HtmlAttr = HtmlAttr::constant("aria-keyshortcuts");
-    pub const aria_label: HtmlAttr = HtmlAttr::constant("aria-label");
-    pub const aria_labelledby: HtmlAttr = HtmlAttr::constant("aria-labelledby");
-    pub const aria_level: HtmlAttr = HtmlAttr::constant("aria-level");
-    pub const aria_live: HtmlAttr = HtmlAttr::constant("aria-live");
-    pub const aria_modal: HtmlAttr = HtmlAttr::constant("aria-modal");
-    pub const aria_multiline: HtmlAttr = HtmlAttr::constant("aria-multiline");
-    pub const aria_multiselectable: HtmlAttr = HtmlAttr::constant("aria-multiselectable");
-    pub const aria_orientation: HtmlAttr = HtmlAttr::constant("aria-orientation");
-    pub const aria_owns: HtmlAttr = HtmlAttr::constant("aria-owns");
-    pub const aria_placeholder: HtmlAttr = HtmlAttr::constant("aria-placeholder");
-    pub const aria_posinset: HtmlAttr = HtmlAttr::constant("aria-posinset");
-    pub const aria_pressed: HtmlAttr = HtmlAttr::constant("aria-pressed");
-    pub const aria_readonly: HtmlAttr = HtmlAttr::constant("aria-readonly");
-    pub const aria_relevant: HtmlAttr = HtmlAttr::constant("aria-relevant");
-    pub const aria_required: HtmlAttr = HtmlAttr::constant("aria-required");
-    pub const aria_roledescription: HtmlAttr = HtmlAttr::constant("aria-roledescription");
-    pub const aria_rowcount: HtmlAttr = HtmlAttr::constant("aria-rowcount");
-    pub const aria_rowindex: HtmlAttr = HtmlAttr::constant("aria-rowindex");
-    pub const aria_rowspan: HtmlAttr = HtmlAttr::constant("aria-rowspan");
-    pub const aria_selected: HtmlAttr = HtmlAttr::constant("aria-selected");
-    pub const aria_setsize: HtmlAttr = HtmlAttr::constant("aria-setsize");
-    pub const aria_sort: HtmlAttr = HtmlAttr::constant("aria-sort");
-    pub const aria_valuemax: HtmlAttr = HtmlAttr::constant("aria-valuemax");
-    pub const aria_valuemin: HtmlAttr = HtmlAttr::constant("aria-valuemin");
-    pub const aria_valuenow: HtmlAttr = HtmlAttr::constant("aria-valuenow");
-    pub const aria_valuetext: HtmlAttr = HtmlAttr::constant("aria-valuetext");
-    pub const r#as: HtmlAttr = HtmlAttr::constant("as");
-    pub const r#async: HtmlAttr = HtmlAttr::constant("async");
-    pub const autocapitalize: HtmlAttr = HtmlAttr::constant("autocapitalize");
-    pub const autocomplete: HtmlAttr = HtmlAttr::constant("autocomplete");
-    pub const autocorrect: HtmlAttr = HtmlAttr::constant("autocorrect");
-    pub const autofocus: HtmlAttr = HtmlAttr::constant("autofocus");
-    pub const autoplay: HtmlAttr = HtmlAttr::constant("autoplay");
-    pub const blocking: HtmlAttr = HtmlAttr::constant("blocking");
-    pub const charset: HtmlAttr = HtmlAttr::constant("charset");
-    pub const checked: HtmlAttr = HtmlAttr::constant("checked");
-    pub const cite: HtmlAttr = HtmlAttr::constant("cite");
-    pub const class: HtmlAttr = HtmlAttr::constant("class");
-    pub const closedby: HtmlAttr = HtmlAttr::constant("closedby");
-    pub const color: HtmlAttr = HtmlAttr::constant("color");
-    pub const colorspace: HtmlAttr = HtmlAttr::constant("colorspace");
-    pub const cols: HtmlAttr = HtmlAttr::constant("cols");
-    pub const colspan: HtmlAttr = HtmlAttr::constant("colspan");
-    pub const command: HtmlAttr = HtmlAttr::constant("command");
-    pub const commandfor: HtmlAttr = HtmlAttr::constant("commandfor");
-    pub const content: HtmlAttr = HtmlAttr::constant("content");
-    pub const contenteditable: HtmlAttr = HtmlAttr::constant("contenteditable");
-    pub const controls: HtmlAttr = HtmlAttr::constant("controls");
-    pub const coords: HtmlAttr = HtmlAttr::constant("coords");
-    pub const crossorigin: HtmlAttr = HtmlAttr::constant("crossorigin");
-    pub const data: HtmlAttr = HtmlAttr::constant("data");
-    pub const datetime: HtmlAttr = HtmlAttr::constant("datetime");
-    pub const decoding: HtmlAttr = HtmlAttr::constant("decoding");
-    pub const default: HtmlAttr = HtmlAttr::constant("default");
-    pub const defer: HtmlAttr = HtmlAttr::constant("defer");
-    pub const dir: HtmlAttr = HtmlAttr::constant("dir");
-    pub const dirname: HtmlAttr = HtmlAttr::constant("dirname");
-    pub const disabled: HtmlAttr = HtmlAttr::constant("disabled");
-    pub const download: HtmlAttr = HtmlAttr::constant("download");
-    pub const draggable: HtmlAttr = HtmlAttr::constant("draggable");
-    pub const enctype: HtmlAttr = HtmlAttr::constant("enctype");
-    pub const enterkeyhint: HtmlAttr = HtmlAttr::constant("enterkeyhint");
-    pub const fetchpriority: HtmlAttr = HtmlAttr::constant("fetchpriority");
-    pub const r#for: HtmlAttr = HtmlAttr::constant("for");
-    pub const form: HtmlAttr = HtmlAttr::constant("form");
-    pub const formaction: HtmlAttr = HtmlAttr::constant("formaction");
-    pub const formenctype: HtmlAttr = HtmlAttr::constant("formenctype");
-    pub const formmethod: HtmlAttr = HtmlAttr::constant("formmethod");
-    pub const formnovalidate: HtmlAttr = HtmlAttr::constant("formnovalidate");
-    pub const formtarget: HtmlAttr = HtmlAttr::constant("formtarget");
-    pub const headers: HtmlAttr = HtmlAttr::constant("headers");
-    pub const height: HtmlAttr = HtmlAttr::constant("height");
-    pub const hidden: HtmlAttr = HtmlAttr::constant("hidden");
-    pub const high: HtmlAttr = HtmlAttr::constant("high");
-    pub const href: HtmlAttr = HtmlAttr::constant("href");
-    pub const hreflang: HtmlAttr = HtmlAttr::constant("hreflang");
-    pub const http_equiv: HtmlAttr = HtmlAttr::constant("http-equiv");
-    pub const id: HtmlAttr = HtmlAttr::constant("id");
-    pub const imagesizes: HtmlAttr = HtmlAttr::constant("imagesizes");
-    pub const imagesrcset: HtmlAttr = HtmlAttr::constant("imagesrcset");
-    pub const inert: HtmlAttr = HtmlAttr::constant("inert");
-    pub const inputmode: HtmlAttr = HtmlAttr::constant("inputmode");
-    pub const integrity: HtmlAttr = HtmlAttr::constant("integrity");
-    pub const is: HtmlAttr = HtmlAttr::constant("is");
-    pub const ismap: HtmlAttr = HtmlAttr::constant("ismap");
-    pub const itemid: HtmlAttr = HtmlAttr::constant("itemid");
-    pub const itemprop: HtmlAttr = HtmlAttr::constant("itemprop");
-    pub const itemref: HtmlAttr = HtmlAttr::constant("itemref");
-    pub const itemscope: HtmlAttr = HtmlAttr::constant("itemscope");
-    pub const itemtype: HtmlAttr = HtmlAttr::constant("itemtype");
-    pub const kind: HtmlAttr = HtmlAttr::constant("kind");
-    pub const label: HtmlAttr = HtmlAttr::constant("label");
-    pub const lang: HtmlAttr = HtmlAttr::constant("lang");
-    pub const list: HtmlAttr = HtmlAttr::constant("list");
-    pub const loading: HtmlAttr = HtmlAttr::constant("loading");
-    pub const r#loop: HtmlAttr = HtmlAttr::constant("loop");
-    pub const low: HtmlAttr = HtmlAttr::constant("low");
-    pub const max: HtmlAttr = HtmlAttr::constant("max");
-    pub const maxlength: HtmlAttr = HtmlAttr::constant("maxlength");
-    pub const media: HtmlAttr = HtmlAttr::constant("media");
-    pub const method: HtmlAttr = HtmlAttr::constant("method");
-    pub const min: HtmlAttr = HtmlAttr::constant("min");
-    pub const minlength: HtmlAttr = HtmlAttr::constant("minlength");
-    pub const multiple: HtmlAttr = HtmlAttr::constant("multiple");
-    pub const muted: HtmlAttr = HtmlAttr::constant("muted");
-    pub const name: HtmlAttr = HtmlAttr::constant("name");
-    pub const nomodule: HtmlAttr = HtmlAttr::constant("nomodule");
-    pub const nonce: HtmlAttr = HtmlAttr::constant("nonce");
-    pub const novalidate: HtmlAttr = HtmlAttr::constant("novalidate");
-    pub const open: HtmlAttr = HtmlAttr::constant("open");
-    pub const optimum: HtmlAttr = HtmlAttr::constant("optimum");
-    pub const pattern: HtmlAttr = HtmlAttr::constant("pattern");
-    pub const ping: HtmlAttr = HtmlAttr::constant("ping");
-    pub const placeholder: HtmlAttr = HtmlAttr::constant("placeholder");
-    pub const playsinline: HtmlAttr = HtmlAttr::constant("playsinline");
-    pub const popover: HtmlAttr = HtmlAttr::constant("popover");
-    pub const popovertarget: HtmlAttr = HtmlAttr::constant("popovertarget");
-    pub const popovertargetaction: HtmlAttr = HtmlAttr::constant("popovertargetaction");
-    pub const poster: HtmlAttr = HtmlAttr::constant("poster");
-    pub const preload: HtmlAttr = HtmlAttr::constant("preload");
-    pub const readonly: HtmlAttr = HtmlAttr::constant("readonly");
-    pub const referrerpolicy: HtmlAttr = HtmlAttr::constant("referrerpolicy");
-    pub const rel: HtmlAttr = HtmlAttr::constant("rel");
-    pub const required: HtmlAttr = HtmlAttr::constant("required");
-    pub const reversed: HtmlAttr = HtmlAttr::constant("reversed");
-    pub const role: HtmlAttr = HtmlAttr::constant("role");
-    pub const rows: HtmlAttr = HtmlAttr::constant("rows");
-    pub const rowspan: HtmlAttr = HtmlAttr::constant("rowspan");
-    pub const sandbox: HtmlAttr = HtmlAttr::constant("sandbox");
-    pub const scope: HtmlAttr = HtmlAttr::constant("scope");
-    pub const selected: HtmlAttr = HtmlAttr::constant("selected");
-    pub const shadowrootclonable: HtmlAttr = HtmlAttr::constant("shadowrootclonable");
-    pub const shadowrootcustomelementregistry: HtmlAttr = HtmlAttr::constant("shadowrootcustomelementregistry");
-    pub const shadowrootdelegatesfocus: HtmlAttr = HtmlAttr::constant("shadowrootdelegatesfocus");
-    pub const shadowrootmode: HtmlAttr = HtmlAttr::constant("shadowrootmode");
-    pub const shadowrootserializable: HtmlAttr = HtmlAttr::constant("shadowrootserializable");
-    pub const shape: HtmlAttr = HtmlAttr::constant("shape");
-    pub const size: HtmlAttr = HtmlAttr::constant("size");
-    pub const sizes: HtmlAttr = HtmlAttr::constant("sizes");
-    pub const slot: HtmlAttr = HtmlAttr::constant("slot");
-    pub const span: HtmlAttr = HtmlAttr::constant("span");
-    pub const spellcheck: HtmlAttr = HtmlAttr::constant("spellcheck");
-    pub const src: HtmlAttr = HtmlAttr::constant("src");
-    pub const srcdoc: HtmlAttr = HtmlAttr::constant("srcdoc");
-    pub const srclang: HtmlAttr = HtmlAttr::constant("srclang");
-    pub const srcset: HtmlAttr = HtmlAttr::constant("srcset");
-    pub const start: HtmlAttr = HtmlAttr::constant("start");
-    pub const step: HtmlAttr = HtmlAttr::constant("step");
-    pub const style: HtmlAttr = HtmlAttr::constant("style");
-    pub const tabindex: HtmlAttr = HtmlAttr::constant("tabindex");
-    pub const target: HtmlAttr = HtmlAttr::constant("target");
-    pub const title: HtmlAttr = HtmlAttr::constant("title");
-    pub const translate: HtmlAttr = HtmlAttr::constant("translate");
-    pub const r#type: HtmlAttr = HtmlAttr::constant("type");
-    pub const usemap: HtmlAttr = HtmlAttr::constant("usemap");
-    pub const value: HtmlAttr = HtmlAttr::constant("value");
-    pub const width: HtmlAttr = HtmlAttr::constant("width");
-    pub const wrap: HtmlAttr = HtmlAttr::constant("wrap");
-    pub const writingsuggestions: HtmlAttr = HtmlAttr::constant("writingsuggestions");
-}

crates/typst-library/src/html/mod.rs

@@ -1,75 +0,0 @@
-//! HTML output.
-
-mod dom;
-
-pub use self::dom::*;
-
-use ecow::EcoString;
-
-use crate::foundations::{elem, Content};
-
-/// An HTML element that can contain Typst content.
-///
-/// Typst's HTML export automatically generates the appropriate tags for most
-/// elements. However, sometimes, it is desirable to retain more control. For
-/// example, when using Typst to generate your blog, you could use this function
-/// to wrap each article in an `<article>` tag.
-///
-/// Typst is aware of what is valid HTML. A tag and its attributes must form
-/// syntactically valid HTML. Some tags, like `meta` do not accept content.
-/// Hence, you must not provide a body for them. We may add more checks in the
-/// future, so be sure that you are generating valid HTML when using this
-/// function.
-///
-/// Normally, Typst will generate `html`, `head`, and `body` tags for you. If
-/// you instead create them with this function, Typst will omit its own tags.
-///
-/// ```typ
-/// #html.elem("div", attrs: (style: "background: aqua"))[
-///   A div with _Typst content_ inside!
-/// ]
-/// ```
-#[elem(name = "elem")]
-pub struct HtmlElem {
-    /// The element's tag.
-    #[required]
-    pub tag: HtmlTag,
-
-    /// The element's HTML attributes.
-    pub attrs: HtmlAttrs,
-
-    /// The contents of the HTML element.
-    ///
-    /// The body can be arbitrary Typst content.
-    #[positional]
-    pub body: Option<Content>,
-}
-
-impl HtmlElem {
-    /// Add an attribute to the element.
-    pub fn with_attr(mut self, attr: HtmlAttr, value: impl Into<EcoString>) -> Self {
-        self.attrs
-            .as_option_mut()
-            .get_or_insert_with(Default::default)
-            .push(attr, value);
-        self
-    }
-}
-
-/// An element that lays out its content as an inline SVG.
-///
-/// Sometimes, converting Typst content to HTML is not desirable. This can be
-/// the case for plots and other content that relies on positioning and styling
-/// to convey its message.
-///
-/// This function allows you to use the Typst layout engine that would also be
-/// used for PDF, SVG, and PNG export to render a part of your document exactly
-/// how it would appear when exported in one of these formats. It embeds the
-/// content as an inline SVG.
-#[elem]
-pub struct FrameElem {
-    /// The content that shall be laid out.
-    #[positional]
-    #[required]
-    pub body: Content,
-}

crates/typst-library/src/introspection/introspector.rs

@@ -10,9 +10,8 @@ use typst_utils::NonZeroExt;
 
 use crate::diag::{bail, StrResult};
 use crate::foundations::{Content, Label, Repr, Selector};
-use crate::html::HtmlNode;
 use crate::introspection::{Location, Tag};
-use crate::layout::{Frame, FrameItem, Page, Point, Position, Transform};
+use crate::layout::{Frame, FrameItem, Point, Position, Transform};
 use crate::model::Numbering;
 
 /// Can be queried for elements and their positions.
@@ -47,18 +46,6 @@ pub struct Introspector {
 type Pair = (Content, Position);
 
 impl Introspector {
-    /// Creates an introspector for a page list.
-    #[typst_macros::time(name = "introspect pages")]
-    pub fn paged(pages: &[Page]) -> Self {
-        IntrospectorBuilder::new().build_paged(pages)
-    }
-
-    /// Creates an introspector for HTML.
-    #[typst_macros::time(name = "introspect html")]
-    pub fn html(output: &[HtmlNode]) -> Self {
-        IntrospectorBuilder::new().build_html(output)
-    }
-
     /// Iterates over all locatable elements.
     pub fn all(&self) -> impl Iterator<Item = &Content> + '_ {
         self.elems.iter().map(|(c, _)| c)
@@ -352,10 +339,10 @@ impl Clone for QueryCache {
 
 /// Builds the introspector.
 #[derive(Default)]
-struct IntrospectorBuilder {
-    pages: usize,
-    page_numberings: Vec<Option<Numbering>>,
-    page_supplements: Vec<Content>,
+pub struct IntrospectorBuilder {
+    pub pages: usize,
+    pub page_numberings: Vec<Option<Numbering>>,
+    pub page_supplements: Vec<Content>,
     seen: HashSet<Location>,
     insertions: MultiMap<Location, Vec<Pair>>,
     keys: MultiMap<u128, Location>,
@@ -365,41 +352,12 @@ struct IntrospectorBuilder {
 
 impl IntrospectorBuilder {
     /// Create an empty builder.
-    fn new() -> Self {
+    pub fn new() -> Self {
         Self::default()
     }
 
-    /// Build an introspector for a page list.
-    fn build_paged(mut self, pages: &[Page]) -> Introspector {
-        self.pages = pages.len();
-        self.page_numberings.reserve(pages.len());
-        self.page_supplements.reserve(pages.len());
-
-        // Discover all elements.
-        let mut elems = Vec::new();
-        for (i, page) in pages.iter().enumerate() {
-            self.page_numberings.push(page.numbering.clone());
-            self.page_supplements.push(page.supplement.clone());
-            self.discover_in_frame(
-                &mut elems,
-                &page.frame,
-                NonZeroUsize::new(1 + i).unwrap(),
-                Transform::identity(),
-            );
-        }
-
-        self.finalize(elems)
-    }
-
-    /// Build an introspector for an HTML document.
-    fn build_html(mut self, output: &[HtmlNode]) -> Introspector {
-        let mut elems = Vec::new();
-        self.discover_in_html(&mut elems, output);
-        self.finalize(elems)
-    }
-
     /// Processes the tags in the frame.
-    fn discover_in_frame(
+    pub fn discover_in_frame(
         &mut self,
         sink: &mut Vec<Pair>,
         frame: &Frame,
@@ -433,29 +391,13 @@ impl IntrospectorBuilder {
         }
     }
 
-    /// Processes the tags in the HTML element.
-    fn discover_in_html(&mut self, sink: &mut Vec<Pair>, nodes: &[HtmlNode]) {
-        for node in nodes {
-            match node {
-                HtmlNode::Tag(tag) => self.discover_in_tag(
-                    sink,
-                    tag,
-                    Position { page: NonZeroUsize::ONE, point: Point::zero() },
-                ),
-                HtmlNode::Text(_, _) => {}
-                HtmlNode::Element(elem) => self.discover_in_html(sink, &elem.children),
-                HtmlNode::Frame(frame) => self.discover_in_frame(
-                    sink,
-                    &frame.inner,
-                    NonZeroUsize::ONE,
-                    Transform::identity(),
-                ),
-            }
-        }
-    }
-
     /// Handle a tag.
-    fn discover_in_tag(&mut self, sink: &mut Vec<Pair>, tag: &Tag, position: Position) {
+    pub fn discover_in_tag(
+        &mut self,
+        sink: &mut Vec<Pair>,
+        tag: &Tag,
+        position: Position,
+    ) {
         match tag {
             Tag::Start(elem) => {
                 let loc = elem.location().unwrap();
@@ -471,7 +413,7 @@ impl IntrospectorBuilder {
 
     /// Build a complete introspector with all acceleration structures from a
     /// list of top-level pairs.
-    fn finalize(mut self, root: Vec<Pair>) -> Introspector {
+    pub fn finalize(mut self, root: Vec<Pair>) -> Introspector {
         self.locations.reserve(self.seen.len());
 
         // Save all pairs and their descendants in the correct order.

crates/typst-library/src/lib.rs

@@ -15,7 +15,6 @@ extern crate self as typst_library;
 pub mod diag;
 pub mod engine;
 pub mod foundations;
-pub mod html;
 pub mod introspection;
 pub mod layout;
 pub mod loading;

crates/typst-library/src/math/equation.rs

@@ -1,5 +1,6 @@
 use std::num::NonZeroUsize;
 
+use codex::styling::MathVariant;
 use typst_utils::NonZeroExt;
 use unicode_math_class::MathClass;
 
@@ -12,7 +13,7 @@ use crate::introspection::{Count, Counter, CounterUpdate, Locatable};
 use crate::layout::{
     AlignElem, Alignment, BlockElem, OuterHAlignment, SpecificAlignment, VAlignment,
 };
-use crate::math::{MathSize, MathVariant};
+use crate::math::MathSize;
 use crate::model::{Numbering, Outlinable, ParLine, Refable, Supplement};
 use crate::text::{FontFamily, FontList, FontWeight, LocalName, TextElem};
 
@@ -111,7 +112,7 @@ pub struct EquationElem {
     /// The style variant to select.
     #[internal]
     #[ghost]
-    pub variant: MathVariant,
+    pub variant: Option<MathVariant>,
 
     /// Affects the height of exponents.
     #[internal]
@@ -128,7 +129,7 @@ pub struct EquationElem {
     /// Whether to use italic glyphs.
     #[internal]
     #[ghost]
-    pub italic: Smart<bool>,
+    pub italic: Option<bool>,
 
     /// A forced class to use for all fragment.
     #[internal]

crates/typst-library/src/math/mod.rs

@@ -80,6 +80,7 @@ pub fn module() -> Module {
     math.define_func::<italic>();
     math.define_func::<serif>();
     math.define_func::<sans>();
+    math.define_func::<scr>();
     math.define_func::<cal>();
     math.define_func::<frak>();
     math.define_func::<mono>();

crates/typst-library/src/math/style.rs

@@ -1,4 +1,6 @@
-use crate::foundations::{func, Cast, Content, Smart};
+use codex::styling::MathVariant;
+
+use crate::foundations::{func, Cast, Content};
 use crate::math::EquationElem;
 
 /// Bold font style in math.
@@ -24,7 +26,7 @@ pub fn upright(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::italic, Smart::Custom(false))
+    body.set(EquationElem::italic, Some(false))
 }
 
 /// Italic font style in math.
@@ -35,7 +37,7 @@ pub fn italic(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::italic, Smart::Custom(true))
+    body.set(EquationElem::italic, Some(true))
 }
 
 /// Serif (roman) font style in math.
@@ -46,7 +48,7 @@ pub fn serif(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::variant, MathVariant::Serif)
+    body.set(EquationElem::variant, Some(MathVariant::Plain))
 }
 
 /// Sans-serif font style in math.
@@ -59,23 +61,39 @@ pub fn sans(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::variant, MathVariant::Sans)
+    body.set(EquationElem::variant, Some(MathVariant::SansSerif))
 }
 
-/// Calligraphic font style in math.
+/// Calligraphic (chancery) font style in math.
 ///
 /// ```example
 /// Let $cal(P)$ be the set of ...
 /// ```
 ///
-/// This corresponds both to LaTeX's `\mathcal` and `\mathscr` as both of these
-/// styles share the same Unicode codepoints. Switching between the styles is
-/// thus only possible if supported by the font via
-/// [font features]($text.features).
+/// This is the default calligraphic/script style for most math fonts. See
+/// [`scr`]($math.scr) for more on how to get the other style (roundhand).
+#[func(title = "Calligraphic", keywords = ["mathcal", "chancery"])]
+pub fn cal(
+    /// The content to style.
+    body: Content,
+) -> Content {
+    body.set(EquationElem::variant, Some(MathVariant::Chancery))
+}
+
+/// Script (roundhand) font style in math.
 ///
-/// For the default math font, the roundhand style is available through the
-/// `ss01` feature. Therefore, you could define your own version of `\mathscr`
-/// like this:
+/// ```example
+/// $ scr(S) $
+/// ```
+///
+/// There are two ways that fonts can support differentiating `cal` and `scr`.
+/// The first is using Unicode variation sequences. This works out of the box
+/// in Typst, however only a few math fonts currently support this.
+///
+/// The other way is using [font features]($text.features). For example, the
+/// roundhand style might be available in a font through the `ss01` feature.
+/// To use it in Typst, you could then define your own version of `scr` like
+/// this:
 ///
 /// ```example
 /// #let scr(it) = text(
@@ -88,12 +106,12 @@ pub fn sans(
 ///
 /// (The box is not conceptually necessary, but unfortunately currently needed
 /// due to limitations in Typst's text style handling in math.)
-#[func(title = "Calligraphic", keywords = ["mathcal", "mathscr"])]
-pub fn cal(
+#[func(title = "Script Style", keywords = ["mathscr", "roundhand"])]
+pub fn scr(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::variant, MathVariant::Cal)
+    body.set(EquationElem::variant, Some(MathVariant::Roundhand))
 }
 
 /// Fraktur font style in math.
@@ -106,7 +124,7 @@ pub fn frak(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::variant, MathVariant::Frak)
+    body.set(EquationElem::variant, Some(MathVariant::Fraktur))
 }
 
 /// Monospace font style in math.
@@ -119,7 +137,7 @@ pub fn mono(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::variant, MathVariant::Mono)
+    body.set(EquationElem::variant, Some(MathVariant::Monospace))
 }
 
 /// Blackboard bold (double-struck) font style in math.
@@ -137,7 +155,7 @@ pub fn bb(
     /// The content to style.
     body: Content,
 ) -> Content {
-    body.set(EquationElem::variant, MathVariant::Bb)
+    body.set(EquationElem::variant, Some(MathVariant::DoubleStruck))
 }
 
 /// Forced display style in math.
@@ -240,15 +258,3 @@ pub enum MathSize {
     /// Math on its own line.
     Display,
 }
-
-/// A mathematical style variant, as defined by Unicode.
-#[derive(Debug, Default, Copy, Clone, Eq, PartialEq, Cast, Hash)]
-pub enum MathVariant {
-    #[default]
-    Serif,
-    Sans,
-    Cal,
-    Frak,
-    Mono,
-    Bb,
-}

crates/typst-library/src/routines.rs

@@ -101,20 +101,25 @@ routines! {
 pub enum RealizationKind<'a> {
     /// This the root realization for layout. Requires a mutable reference
     /// to document metadata that will be filled from `set document` rules.
-    LayoutDocument(&'a mut DocumentInfo),
+    LayoutDocument { info: &'a mut DocumentInfo },
     /// A nested realization in a container (e.g. a `block`). Requires a mutable
     /// reference to an enum that will be set to `FragmentKind::Inline` if the
     /// fragment's content was fully inline.
-    LayoutFragment(&'a mut FragmentKind),
+    LayoutFragment { kind: &'a mut FragmentKind },
     /// A nested realization in a paragraph (i.e. a `par`)
     LayoutPar,
-    /// This the root realization for HTML. Requires a mutable reference
-    /// to document metadata that will be filled from `set document` rules.
-    HtmlDocument(&'a mut DocumentInfo),
+    /// This the root realization for HTML. Requires a mutable reference to
+    /// document metadata that will be filled from `set document` rules.
+    ///
+    /// The `is_inline` function checks whether content consists of an inline
+    /// HTML element. It's used by the `PAR` grouping rules. This is slightly
+    /// hacky and might be replaced by a mechanism to supply the grouping rules
+    /// as a realization user.
+    HtmlDocument { info: &'a mut DocumentInfo, is_inline: fn(&Content) -> bool },
     /// A nested realization in a container (e.g. a `block`). Requires a mutable
     /// reference to an enum that will be set to `FragmentKind::Inline` if the
     /// fragment's content was fully inline.
-    HtmlFragment(&'a mut FragmentKind),
+    HtmlFragment { kind: &'a mut FragmentKind, is_inline: fn(&Content) -> bool },
     /// A realization within math.
     Math,
 }
@@ -122,18 +127,20 @@ pub enum RealizationKind<'a> {
 impl RealizationKind<'_> {
     /// It this a realization for HTML export?
     pub fn is_html(&self) -> bool {
-        matches!(self, Self::HtmlDocument(_) | Self::HtmlFragment(_))
+        matches!(self, Self::HtmlDocument { .. } | Self::HtmlFragment { .. })
     }
 
     /// It this a realization for a container?
     pub fn is_fragment(&self) -> bool {
-        matches!(self, Self::LayoutFragment(_) | Self::HtmlFragment(_))
+        matches!(self, Self::LayoutFragment { .. } | Self::HtmlFragment { .. })
     }
 
     /// If this is a document-level realization, accesses the document info.
     pub fn as_document_mut(&mut self) -> Option<&mut DocumentInfo> {
         match self {
-            Self::LayoutDocument(info) | Self::HtmlDocument(info) => Some(*info),
+            Self::LayoutDocument { info } | Self::HtmlDocument { info, .. } => {
+                Some(*info)
+            }
             _ => None,
         }
     }
@@ -141,7 +148,9 @@ impl RealizationKind<'_> {
     /// If this is a container-level realization, accesses the fragment kind.
     pub fn as_fragment_mut(&mut self) -> Option<&mut FragmentKind> {
         match self {
-            Self::LayoutFragment(kind) | Self::HtmlFragment(kind) => Some(*kind),
+            Self::LayoutFragment { kind } | Self::HtmlFragment { kind, .. } => {
+                Some(*kind)
+            }
             _ => None,
         }
     }

crates/typst-library/src/visualize/image/mod.rs

@@ -8,6 +8,7 @@ pub use self::raster::{
 };
 pub use self::svg::SvgImage;
 
+use std::ffi::OsStr;
 use std::fmt::{self, Debug, Formatter};
 use std::sync::Arc;
 
@@ -15,14 +16,16 @@ use ecow::EcoString;
 use typst_syntax::{Span, Spanned};
 use typst_utils::LazyHash;
 
-use crate::diag::StrResult;
+use crate::diag::{warning, At, LoadedWithin, SourceResult, StrResult};
+use crate::engine::Engine;
 use crate::foundations::{
     cast, elem, func, scope, Bytes, Cast, Content, Derived, NativeElement, Packed, Smart,
+    StyleChain,
 };
 use crate::layout::{Length, Rel, Sizing};
 use crate::loading::{DataSource, Load, LoadSource, Loaded, Readable};
 use crate::model::Figurable;
-use crate::text::LocalName;
+use crate::text::{families, LocalName};
 
 /// A raster or vector graphic.
 ///
@@ -217,6 +220,81 @@ impl ImageElem {
     }
 }
 
+impl Packed<ImageElem> {
+    /// Decodes the image.
+    pub fn decode(&self, engine: &mut Engine, styles: StyleChain) -> SourceResult<Image> {
+        let span = self.span();
+        let loaded = &self.source.derived;
+        let format = self.determine_format(styles).at(span)?;
+
+        // Warn the user if the image contains a foreign object. Not perfect
+        // because the svg could also be encoded, but that's an edge case.
+        if format == ImageFormat::Vector(VectorFormat::Svg) {
+            let has_foreign_object =
+                memchr::memmem::find(&loaded.data, b"<foreignObject").is_some();
+
+            if has_foreign_object {
+                engine.sink.warn(warning!(
+                span,
+                "image contains foreign object";
+                hint: "SVG images with foreign objects might render incorrectly in typst";
+                hint: "see https://github.com/typst/typst/issues/1421 for more information"
+            ));
+            }
+        }
+
+        // Construct the image itself.
+        let kind = match format {
+            ImageFormat::Raster(format) => ImageKind::Raster(
+                RasterImage::new(
+                    loaded.data.clone(),
+                    format,
+                    self.icc.get_ref(styles).as_ref().map(|icc| icc.derived.clone()),
+                )
+                .at(span)?,
+            ),
+            ImageFormat::Vector(VectorFormat::Svg) => ImageKind::Svg(
+                SvgImage::with_fonts(
+                    loaded.data.clone(),
+                    engine.world,
+                    &families(styles).map(|f| f.as_str()).collect::<Vec<_>>(),
+                )
+                .within(loaded)?,
+            ),
+        };
+
+        Ok(Image::new(kind, self.alt.get_cloned(styles), self.scaling.get(styles)))
+    }
+
+    /// Tries to determine the image format based on the format that was
+    /// explicitly defined, or else the extension, or else the data.
+    fn determine_format(&self, styles: StyleChain) -> StrResult<ImageFormat> {
+        if let Smart::Custom(v) = self.format.get(styles) {
+            return Ok(v);
+        };
+
+        let Derived { source, derived: loaded } = &self.source;
+        if let DataSource::Path(path) = source {
+            let ext = std::path::Path::new(path.as_str())
+                .extension()
+                .and_then(OsStr::to_str)
+                .unwrap_or_default()
+                .to_lowercase();
+
+            match ext.as_str() {
+                "png" => return Ok(ExchangeFormat::Png.into()),
+                "jpg" | "jpeg" => return Ok(ExchangeFormat::Jpg.into()),
+                "gif" => return Ok(ExchangeFormat::Gif.into()),
+                "svg" | "svgz" => return Ok(VectorFormat::Svg.into()),
+                "webp" => return Ok(ExchangeFormat::Webp.into()),
+                _ => {}
+            }
+        }
+
+        Ok(ImageFormat::detect(&loaded.data).ok_or("unknown image format")?)
+    }
+}
+
 impl LocalName for Packed<ImageElem> {
     const KEY: &'static str = "figure";
 }

crates/typst-library/translations/sv.txt

@@ -1,8 +1,8 @@
 figure = Figur
 table = Tabell
 equation = Ekvation
-bibliography = Bibliografi
-heading = Kapitel
+bibliography = Referenser
+heading = Avsnitt
 outline = Innehåll
-raw = Listing
+raw = Kodlistning
 page = sida

crates/typst-realize/src/lib.rs

@@ -18,7 +18,6 @@ use typst_library::foundations::{
     RecipeIndex, Selector, SequenceElem, ShowSet, Style, StyleChain, StyledElem, Styles,
     SymbolElem, Synthesize, TargetElem, Transformation,
 };
-use typst_library::html::{tag, FrameElem, HtmlElem};
 use typst_library::introspection::{Locatable, SplitLocator, Tag, TagElem};
 use typst_library::layout::{
     AlignElem, BoxElem, HElem, InlineElem, PageElem, PagebreakElem, VElem,
@@ -48,16 +47,16 @@ pub fn realize<'a>(
         locator,
         arenas,
         rules: match kind {
-            RealizationKind::LayoutDocument(_) => LAYOUT_RULES,
-            RealizationKind::LayoutFragment(_) => LAYOUT_RULES,
+            RealizationKind::LayoutDocument { .. } => LAYOUT_RULES,
+            RealizationKind::LayoutFragment { .. } => LAYOUT_RULES,
             RealizationKind::LayoutPar => LAYOUT_PAR_RULES,
-            RealizationKind::HtmlDocument(_) => HTML_DOCUMENT_RULES,
-            RealizationKind::HtmlFragment(_) => HTML_FRAGMENT_RULES,
+            RealizationKind::HtmlDocument { .. } => HTML_DOCUMENT_RULES,
+            RealizationKind::HtmlFragment { .. } => HTML_FRAGMENT_RULES,
             RealizationKind::Math => MATH_RULES,
         },
         sink: vec![],
         groupings: ArrayVec::new(),
-        outside: matches!(kind, RealizationKind::LayoutDocument(_)),
+        outside: matches!(kind, RealizationKind::LayoutDocument { .. }),
         may_attach: false,
         saw_parbreak: false,
         kind,
@@ -113,7 +112,7 @@ struct GroupingRule {
     /// be visible to `finish`.
     tags: bool,
     /// Defines which kinds of elements start and make up this kind of grouping.
-    trigger: fn(&Content, &RealizationKind) -> bool,
+    trigger: fn(&Content, &State) -> bool,
     /// Defines elements that may appear in the interior of the grouping, but
     /// not at the edges.
     inner: fn(&Content) -> bool,
@@ -334,13 +333,6 @@ fn visit_kind_rules<'a>(
         }
     }
 
-    if !s.kind.is_html() {
-        if let Some(elem) = content.to_packed::<FrameElem>() {
-            visit(s, &elem.body, styles)?;
-            return Ok(true);
-        }
-    }
-
     Ok(false)
 }
 
@@ -601,7 +593,7 @@ fn visit_styled<'a>(
                 );
             }
         } else if elem == PageElem::ELEM {
-            if !matches!(s.kind, RealizationKind::LayoutDocument(_)) {
+            if !matches!(s.kind, RealizationKind::LayoutDocument { .. }) {
                 bail!(
                     style.span(),
                     "page configuration is not allowed inside of containers"
@@ -659,7 +651,7 @@ fn visit_grouping_rules<'a>(
     content: &'a Content,
     styles: StyleChain<'a>,
 ) -> SourceResult<bool> {
-    let matching = s.rules.iter().find(|&rule| (rule.trigger)(content, &s.kind));
+    let matching = s.rules.iter().find(|&rule| (rule.trigger)(content, s));
 
     // Try to continue or finish an existing grouping.
     let mut i = 0;
@@ -671,7 +663,7 @@ fn visit_grouping_rules<'a>(
 
         // If the element can be added to the active grouping, do it.
         if !active.interrupted
-            && ((active.rule.trigger)(content, &s.kind) || (active.rule.inner)(content))
+            && ((active.rule.trigger)(content, s) || (active.rule.inner)(content))
         {
             s.sink.push((content, styles));
             return Ok(true);
@@ -806,7 +798,7 @@ fn finish_innermost_grouping(s: &mut State) -> SourceResult<()> {
     let Grouping { start, rule, .. } = s.groupings.pop().unwrap();
 
     // Trim trailing non-trigger elements.
-    let trimmed = s.sink[start..].trim_end_matches(|(c, _)| !(rule.trigger)(c, &s.kind));
+    let trimmed = s.sink[start..].trim_end_matches(|(c, _)| !(rule.trigger)(c, s));
     let end = start + trimmed.len();
     let tail = s.store_slice(&s.sink[end..]);
     s.sink.truncate(end);
@@ -885,7 +877,7 @@ static TEXTUAL: GroupingRule = GroupingRule {
 static PAR: GroupingRule = GroupingRule {
     priority: 1,
     tags: true,
-    trigger: |content, kind| {
+    trigger: |content, state| {
         let elem = content.elem();
         elem == TextElem::ELEM
             || elem == HElem::ELEM
@@ -893,10 +885,11 @@ static PAR: GroupingRule = GroupingRule {
             || elem == SmartQuoteElem::ELEM
             || elem == InlineElem::ELEM
             || elem == BoxElem::ELEM
-            || (kind.is_html()
-                && content
-                    .to_packed::<HtmlElem>()
-                    .is_some_and(|elem| tag::is_inline_by_default(elem.tag)))
+            || match state.kind {
+                RealizationKind::HtmlDocument { is_inline, .. }
+                | RealizationKind::HtmlFragment { is_inline, .. } => is_inline(content),
+                _ => false,
+            }
     },
     inner: |content| content.elem() == SpaceElem::ELEM,
     interrupt: |elem| elem == ParElem::ELEM || elem == AlignElem::ELEM,

crates/typst-svg/src/image.rs

@@ -2,7 +2,7 @@ use base64::Engine;
 use ecow::{eco_format, EcoString};
 use image::{codecs::png::PngEncoder, ImageEncoder};
 use typst_library::foundations::Smart;
-use typst_library::layout::{Abs, Axes};
+use typst_library::layout::{Abs, Axes, Transform};
 use typst_library::visualize::{
     ExchangeFormat, Image, ImageKind, ImageScaling, RasterFormat,
 };
@@ -11,25 +11,38 @@ use crate::SVGRenderer;
 
 impl SVGRenderer {
     /// Render an image element.
-    pub(super) fn render_image(&mut self, image: &Image, size: &Axes<Abs>) {
+    pub(super) fn render_image(
+        &mut self,
+        transform: &Transform,
+        image: &Image,
+        size: &Axes<Abs>,
+    ) {
         let url = convert_image_to_base64_url(image);
         self.xml.start_element("image");
         self.xml.write_attribute("xlink:href", &url);
+        self.xml.write_attribute("x", &transform.tx.to_pt());
+        self.xml.write_attribute("y", &transform.ty.to_pt());
         self.xml.write_attribute("width", &size.x.to_pt());
         self.xml.write_attribute("height", &size.y.to_pt());
         self.xml.write_attribute("preserveAspectRatio", "none");
-        match image.scaling() {
-            Smart::Auto => {}
+        if let Some(value) = convert_image_scaling(image.scaling()) {
+            self.xml
+                .write_attribute("style", &format_args!("image-rendering: {value}"))
+        }
+        self.xml.end_element();
+    }
+}
+
+/// Converts an image scaling to a CSS `image-rendering` propery value.
+pub fn convert_image_scaling(scaling: Smart<ImageScaling>) -> Option<&'static str> {
+    match scaling {
+        Smart::Auto => None,
         Smart::Custom(ImageScaling::Smooth) => {
             // This is still experimental and not implemented in all major browsers.
             // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering#browser_compatibility
-                self.xml.write_attribute("style", "image-rendering: smooth")
+            Some("smooth")
         }
-            Smart::Custom(ImageScaling::Pixelated) => {
-                self.xml.write_attribute("style", "image-rendering: pixelated")
-            }
-        }
-        self.xml.end_element();
+        Smart::Custom(ImageScaling::Pixelated) => Some("pixelated"),
     }
 }
 

crates/typst-svg/src/lib.rs

@@ -5,11 +5,12 @@ mod paint;
 mod shape;
 mod text;
 
+pub use image::{convert_image_scaling, convert_image_to_base64_url};
+
 use std::collections::HashMap;
 use std::fmt::{self, Display, Formatter, Write};
 
 use ecow::EcoString;
-use ttf_parser::OutlineBuilder;
 use typst_library::layout::{
     Abs, Frame, FrameItem, FrameKind, GroupItem, Page, PagedDocument, Point, Ratio, Size,
     Transform,
@@ -198,10 +199,16 @@ impl SVGRenderer {
     }
 
     /// Render a frame with the given transform.
-    fn render_frame(&mut self, state: State, ts: Transform, frame: &Frame) {
+    fn render_frame(&mut self, mut state: State, ts: Transform, frame: &Frame) {
         self.xml.start_element("g");
         if !ts.is_identity() {
-            self.xml.write_attribute("transform", &SvgMatrix(ts));
+            // apply accumulated transform
+            self.xml.write_attribute(
+                "transform",
+                &SvgMatrix(ts.post_concat(state.transform)),
+            );
+            // reset transform accumulation
+            state = state.with_transform(Transform::identity());
         }
 
         for (pos, item) in frame.items() {
@@ -211,12 +218,6 @@ impl SVGRenderer {
                 continue;
             }
 
-            let x = pos.x.to_pt();
-            let y = pos.y.to_pt();
-            self.xml.start_element("g");
-            self.xml
-                .write_attribute_fmt("transform", format_args!("translate({x} {y})"));
-
             match item {
                 FrameItem::Group(group) => {
                     self.render_group(state.pre_translate(*pos), group)
@@ -227,12 +228,12 @@ impl SVGRenderer {
                 FrameItem::Shape(shape, _) => {
                     self.render_shape(state.pre_translate(*pos), shape)
                 }
-                FrameItem::Image(image, size, _) => self.render_image(image, size),
+                FrameItem::Image(image, size, _) => {
+                    self.render_image(&state.pre_translate(*pos).transform, image, size)
+                }
                 FrameItem::Link(_, _) => unreachable!(),
                 FrameItem::Tag(_) => unreachable!(),
             };
-
-            self.xml.end_element();
         }
 
         self.xml.end_element();
@@ -242,10 +243,8 @@ impl SVGRenderer {
     /// be created.
     fn render_group(&mut self, state: State, group: &GroupItem) {
         let state = match group.frame.kind() {
-            FrameKind::Soft => state.pre_concat(group.transform),
-            FrameKind::Hard => state
-                .with_transform(Transform::identity())
-                .with_size(group.frame.size()),
+            FrameKind::Soft => state,
+            FrameKind::Hard => state.with_size(group.frame.size()),
         };
 
         self.xml.start_element("g");
@@ -257,8 +256,9 @@ impl SVGRenderer {
 
         if let Some(clip_curve) = &group.clip {
             let hash = hash128(&group);
-            let id =
-                self.clip_paths.insert_with(hash, || shape::convert_curve(clip_curve));
+            let id = self
+                .clip_paths
+                .insert_with(hash, || shape::convert_curve(&state.transform, clip_curve));
             self.xml.write_attribute_fmt("clip-path", format_args!("url(#{id})"));
         }
 
@@ -375,16 +375,37 @@ impl Display for SvgMatrix {
     }
 }
 
-/// A builder for SVG path.
-struct SvgPathBuilder(pub EcoString, pub Ratio);
+/// A builder for SVG path using relative coordinates.
+struct SvgRelativePathBuilder {
+    pub path: EcoString,
+    pub scale: Ratio,
+    pub last_point: Point,
+}
 
-impl SvgPathBuilder {
-    fn with_scale(scale: Ratio) -> Self {
-        Self(EcoString::new(), scale)
+impl SvgRelativePathBuilder {
+    fn with_translate(pos: Point) -> Self {
+        // add initial M node to transform the entire path
+        Self {
+            path: EcoString::from(format!("M {} {}", pos.x.to_pt(), pos.y.to_pt())),
+            scale: Ratio::one(),
+            last_point: Point::zero(),
+        }
     }
 
     fn scale(&self) -> f32 {
-        self.1.get() as f32
+        self.scale.get() as f32
+    }
+
+    fn last_point(&self) -> Point {
+        self.last_point
+    }
+
+    fn map_x(&self, x: f32) -> f32 {
+        x * self.scale() - self.last_point().x.to_pt() as f32
+    }
+
+    fn map_y(&self, y: f32) -> f32 {
+        y * self.scale() - self.last_point().y.to_pt() as f32
     }
 
     /// Create a rectangle path. The rectangle is created with the top-left
@@ -406,27 +427,92 @@ impl SvgPathBuilder {
         sweep_flag: u32,
         pos: (f32, f32),
     ) {
-        let scale = self.scale();
+        let rx = self.map_x(radius.0);
+        let ry = self.map_y(radius.1);
+        let x = self.map_x(pos.0);
+        let y = self.map_y(pos.1);
         write!(
-            &mut self.0,
-            "A {rx} {ry} {x_axis_rot} {large_arc_flag} {sweep_flag} {x} {y} ",
-            rx = radius.0 * scale,
-            ry = radius.1 * scale,
-            x = pos.0 * scale,
-            y = pos.1 * scale,
+            &mut self.path,
+            "a {rx} {ry} {x_axis_rot} {large_arc_flag} {sweep_flag} {x} {y} "
         )
         .unwrap();
     }
+
+    fn move_to(&mut self, x: f32, y: f32) {
+        let scale = self.scale();
+        let _x = self.map_x(x);
+        let _y = self.map_y(y);
+        if _x != 0.0 || _y != 0.0 {
+            write!(&mut self.path, "m {x} {y} ").unwrap();
+        }
+
+        self.last_point =
+            Point::new(Abs::pt(f64::from(x * scale)), Abs::pt(f64::from(y * scale)));
+    }
+
+    fn line_to(&mut self, x: f32, y: f32) {
+        let scale = self.scale();
+        let _x = self.map_x(x);
+        let _y = self.map_y(y);
+
+        if _x != 0.0 && _y != 0.0 {
+            write!(&mut self.path, "l {_x} {_y} ").unwrap();
+        } else if _x != 0.0 {
+            write!(&mut self.path, "h {_x} ").unwrap();
+        } else if _y != 0.0 {
+            write!(&mut self.path, "v {_y} ").unwrap();
+        }
+
+        self.last_point =
+            Point::new(Abs::pt(f64::from(x * scale)), Abs::pt(f64::from(y * scale)));
+    }
+
+    fn curve_to(&mut self, x1: f32, y1: f32, x2: f32, y2: f32, x: f32, y: f32) {
+        let scale = self.scale();
+        let curve = format!(
+            "c {} {} {} {} {} {} ",
+            self.map_x(x1),
+            self.map_y(y1),
+            self.map_x(x2),
+            self.map_y(y2),
+            self.map_x(x),
+            self.map_y(y)
+        );
+        write!(&mut self.path, "{curve}").unwrap();
+        self.last_point =
+            Point::new(Abs::pt(f64::from(x * scale)), Abs::pt(f64::from(y * scale)));
+    }
+
+    fn close(&mut self) {
+        write!(&mut self.path, "Z ").unwrap();
+    }
 }
 
-impl Default for SvgPathBuilder {
+impl Default for SvgRelativePathBuilder {
     fn default() -> Self {
-        Self(Default::default(), Ratio::one())
+        Self {
+            path: Default::default(),
+            scale: Ratio::one(),
+            last_point: Point::zero(),
+        }
     }
 }
 
 /// A builder for SVG path. This is used to build the path for a glyph.
-impl ttf_parser::OutlineBuilder for SvgPathBuilder {
+struct SvgGlyphPathBuilder(pub EcoString, pub Ratio);
+
+impl SvgGlyphPathBuilder {
+    fn with_scale(scale: Ratio) -> Self {
+        Self(EcoString::new(), scale)
+    }
+
+    fn scale(&self) -> f32 {
+        self.1.get() as f32
+    }
+}
+
+/// A builder for SVG path. This is used to build the path for a glyph.
+impl ttf_parser::OutlineBuilder for SvgGlyphPathBuilder {
     fn move_to(&mut self, x: f32, y: f32) {
         let scale = self.scale();
         write!(&mut self.0, "M {} {} ", x * scale, y * scale).unwrap();

crates/typst-svg/src/paint.rs

@@ -1,14 +1,13 @@
 use std::f32::consts::TAU;
 
 use ecow::{eco_format, EcoString};
-use ttf_parser::OutlineBuilder;
 use typst_library::foundations::Repr;
 use typst_library::layout::{Angle, Axes, Frame, Quadrant, Ratio, Size, Transform};
 use typst_library::visualize::{Color, FillRule, Gradient, Paint, RatioOrAngle, Tiling};
 use typst_utils::hash128;
 use xmlwriter::XmlWriter;
 
-use crate::{Id, SVGRenderer, State, SvgMatrix, SvgPathBuilder};
+use crate::{Id, SVGRenderer, State, SvgMatrix, SvgRelativePathBuilder};
 
 /// The number of segments in a conic gradient.
 /// This is a heuristic value that seems to work well.
@@ -185,7 +184,7 @@ impl SVGRenderer {
                         let theta2 = dtheta * (i + 1) as f32;
 
                         // Create the path for the segment.
-                        let mut builder = SvgPathBuilder::default();
+                        let mut builder = SvgRelativePathBuilder::default();
                         builder.move_to(
                             correct_tiling_pos(center.0),
                             correct_tiling_pos(center.1),
@@ -227,7 +226,7 @@ impl SVGRenderer {
 
                         // Add the path to the pattern.
                         self.xml.start_element("path");
-                        self.xml.write_attribute("d", &builder.0);
+                        self.xml.write_attribute("d", &builder.path);
                         self.xml.write_attribute_fmt("fill", format_args!("url(#{id})"));
                         self.xml
                             .write_attribute_fmt("stroke", format_args!("url(#{id})"));

crates/typst-svg/src/shape.rs

@@ -1,12 +1,11 @@
 use ecow::EcoString;
-use ttf_parser::OutlineBuilder;
-use typst_library::layout::{Abs, Ratio, Size, Transform};
+use typst_library::layout::{Abs, Point, Ratio, Size, Transform};
 use typst_library::visualize::{
     Curve, CurveItem, FixedStroke, Geometry, LineCap, LineJoin, Paint, RelativeTo, Shape,
 };
 
 use crate::paint::ColorEncode;
-use crate::{SVGRenderer, State, SvgPathBuilder};
+use crate::{SVGRenderer, State, SvgRelativePathBuilder};
 
 impl SVGRenderer {
     /// Render a shape element.
@@ -33,7 +32,7 @@ impl SVGRenderer {
             );
         }
 
-        let path = convert_geometry_to_path(&shape.geometry);
+        let path = convert_geometry_to_path(&state.transform, &shape.geometry);
         self.xml.write_attribute("d", &path);
         self.xml.end_element();
     }
@@ -154,8 +153,10 @@ impl SVGRenderer {
 
 /// Convert a geometry to an SVG path.
 #[comemo::memoize]
-fn convert_geometry_to_path(geometry: &Geometry) -> EcoString {
-    let mut builder = SvgPathBuilder::default();
+fn convert_geometry_to_path(transform: &Transform, geometry: &Geometry) -> EcoString {
+    let mut builder =
+        SvgRelativePathBuilder::with_translate(Point::new(transform.tx, transform.ty));
+
     match geometry {
         Geometry::Line(t) => {
             builder.move_to(0.0, 0.0);
@@ -166,13 +167,14 @@ fn convert_geometry_to_path(geometry: &Geometry) -> EcoString {
             let y = rect.y.to_pt() as f32;
             builder.rect(x, y);
         }
-        Geometry::Curve(p) => return convert_curve(p),
+        Geometry::Curve(p) => return convert_curve(transform, p),
     };
-    builder.0
+    builder.path
 }
 
-pub fn convert_curve(curve: &Curve) -> EcoString {
-    let mut builder = SvgPathBuilder::default();
+pub fn convert_curve(transform: &Transform, curve: &Curve) -> EcoString {
+    let mut builder =
+        SvgRelativePathBuilder::with_translate(Point::new(transform.tx, transform.ty));
     for item in &curve.0 {
         match item {
             CurveItem::Move(m) => builder.move_to(m.x.to_pt() as f32, m.y.to_pt() as f32),
@@ -188,5 +190,5 @@ pub fn convert_curve(curve: &Curve) -> EcoString {
             CurveItem::Close => builder.close(),
         }
     }
-    builder.0
+    builder.path
 }

crates/typst-svg/src/text.rs

@@ -11,7 +11,7 @@ use typst_library::visualize::{
 };
 use typst_utils::hash128;
 
-use crate::{SVGRenderer, State, SvgMatrix, SvgPathBuilder};
+use crate::{SVGRenderer, State, SvgGlyphPathBuilder, SvgMatrix};
 
 impl SVGRenderer {
     /// Render a text item. The text is rendered as a group of glyphs. We will
@@ -22,7 +22,14 @@ impl SVGRenderer {
 
         self.xml.start_element("g");
         self.xml.write_attribute("class", "typst-text");
-        self.xml.write_attribute("transform", "scale(1, -1)");
+        self.xml.write_attribute(
+            "transform",
+            &format!(
+                "scale(1, -1) translate({} {})",
+                state.transform.tx.to_pt(),
+                -state.transform.ty.to_pt()
+            ),
+        );
 
         let mut x: f64 = 0.0;
         let mut y: f64 = 0.0;
@@ -247,7 +254,7 @@ fn convert_outline_glyph_to_path(
     id: GlyphId,
     scale: Ratio,
 ) -> Option<EcoString> {
-    let mut builder = SvgPathBuilder::with_scale(scale);
+    let mut builder = SvgGlyphPathBuilder::with_scale(scale);
     font.ttf().outline_glyph(id, &mut builder)?;
     Some(builder.0)
 }

crates/typst/src/lib.rs

@@ -43,12 +43,12 @@ use std::sync::LazyLock;
 
 use comemo::{Track, Tracked, Validate};
 use ecow::{eco_format, eco_vec, EcoString, EcoVec};
+use typst_html::HtmlDocument;
 use typst_library::diag::{
     bail, warning, FileError, SourceDiagnostic, SourceResult, Warned,
 };
 use typst_library::engine::{Engine, Route, Sink, Traced};
 use typst_library::foundations::{NativeRuleMap, StyleChain, Styles, Value};
-use typst_library::html::HtmlDocument;
 use typst_library::introspection::Introspector;
 use typst_library::layout::PagedDocument;
 use typst_library::routines::Routines;

docs/reference/groups.yml

@@ -5,7 +5,7 @@
   title: Variants
   category: math
   path: ["math"]
-  filter: ["serif", "sans", "frak", "mono", "bb", "cal"]
+  filter: ["serif", "sans", "frak", "mono", "bb", "cal", "scr"]
   details: |
     Alternate typefaces within formulas.
 

tests/ref/html/cases-content-html.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <p>my <strong>lower</strong> a<br>MY <strong>UPPER</strong> A<br></p>
+  </body>
+</html>

tests/ref/html/image-jpg-html-base64.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAA3ADcAAD/4QBiRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAEAAAITAAMAAAABAAEAAAAAAAAAAADcAAAAAQAAANwAAAAB/8AACwgAUAAwAQERAP/bAEMACAYGBwYFCAcHBwkJCAoMFA0MCwsMGRITDxQdGh8eHRocHCAkLicgIiwjHBwoNyksMDE0NDQfJzk9ODI8LjM0Mv/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/aAAgBAQAAPwD5/ooooooooooooor7+ooor4Bor7+ooor4Booor7+or4Booor7+or4Bor7+ooor4Bor7+ooor4Bor7+ooor4Bor7+ooor/2Q==" alt="The letter F"></body>
+</html>

tests/ref/html/image-scaling-methods.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <div style="display: flex; flex-direction: row; gap: 4pt"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAKUlEQVR4AQEeAOH/AP8AAAD/AAAA/wCAAAAAgAAAAIAAgIAAAICAgACAcFMHfiTGz0oAAAAASUVORK5CYII=" style="width: 28.346456692913385pt"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAKUlEQVR4AQEeAOH/AP8AAAD/AAAA/wCAAAAAgAAAAIAAgIAAAICAgACAcFMHfiTGz0oAAAAASUVORK5CYII=" style="image-rendering: smooth; width: 28.346456692913385pt"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAIAAADZSiLoAAAAKUlEQVR4AQEeAOH/AP8AAAD/AAAA/wCAAAAAgAAAAIAAgIAAAICAgACAcFMHfiTGz0oAAAAASUVORK5CYII=" style="image-rendering: pixelated; width: 28.346456692913385pt"></div>
+  </body>
+</html>

tests/src/run.rs

@@ -5,10 +5,10 @@ use std::path::PathBuf;
 use ecow::eco_vec;
 use tiny_skia as sk;
 use typst::diag::{SourceDiagnostic, SourceResult, Warned};
-use typst::html::HtmlDocument;
 use typst::layout::{Abs, Frame, FrameItem, PagedDocument, Transform};
 use typst::visualize::Color;
 use typst::{Document, WorldExt};
+use typst_html::HtmlDocument;
 use typst_pdf::PdfOptions;
 use typst_syntax::{FileId, Lines};
 

tests/suite/math/style.typ

@@ -12,6 +12,15 @@ $A, italic(A), upright(A), bold(A), bold(upright(A)), \
  bb("hello") + bold(cal("world")), \
  mono("SQRT")(x) wreath mono(123 + 456)$
 
+--- math-style-fallback ---
+// Test how math styles fallback.
+$upright(frak(bold(alpha))) = upright(bold(alpha)) \
+bold(mono(ϝ)) = bold(ϝ) \
+sans(Theta) = bold(sans(Theta)) \
+bold(upright(planck)) != planck \
+bb(e) != italic(bb(e)) \
+serif(sans(A)) != serif(A)$
+
 --- math-style-dotless ---
 // Test styling dotless i and j.
 $ dotless.i dotless.j,
@@ -38,7 +47,15 @@ $bb(Gamma) , bb(gamma), bb(Pi), bb(pi), bb(sum)$
 
 --- math-style-hebrew-exceptions ---
 // Test hebrew exceptions.
-$aleph, beth, gimel, daleth$
+$aleph, beth, gimel, daleth$ \
+$upright(aleph), upright(beth), upright(gimel), upright(daleth)$
+
+--- math-style-script ---
+// Test variation selectors for scr and cal.
+$cal(A) scr(A) bold(cal(O)) scr(bold(O))$
+
+#show math.equation: set text(font: "Noto Sans Math")
+$scr(E) cal(E) bold(scr(Y)) cal(bold(Y))$
 
 --- issue-3650-italic-equation ---
 _abc $sin(x) "abc"$_ \

tests/suite/svg/relative-paths.typ

@@ -0,0 +1,22 @@
+--- svg-relative-paths ---
+#block[
+  #rect(width: 10pt, height: 10pt)
+  #block(inset: 10pt)[
+    #rect(width: 10pt, height: 10pt)
+    #rotate(45deg,
+      block(inset: 10pt)[
+        #block(inset: 10pt)[
+          #rect(width: 10pt, height: 10pt)
+          #text("Hello world")
+          #rect(width: 10pt, height: 10pt, radius: 10pt)
+          #rotate(45deg,
+            block(inset: 10pt)[
+              #rect(width: 10pt, height: 10pt, radius: 10pt)
+              #rect(width: 10pt, height: 10pt, radius: 10pt)
+            ]
+          )
+        ]
+      ]
+    )
+  ]
+]

tests/suite/text/case.typ

@@ -14,6 +14,10 @@
 // Check that cases are applied to symbols nested in content
 #lower($H I !$.body)
 
+--- cases-content-html html ---
+#lower[MY #html.strong[Lower] #symbol("A")] \
+#upper[my #html.strong[Upper] #symbol("a")] \
+
 --- upper-bad-type ---
 // Error: 8-9 expected string or content, found integer
 #upper(1)

tests/suite/visualize/image.typ

@@ -9,6 +9,9 @@
 #set page(height: 60pt)
 #image("/assets/images/tiger.jpg")
 
+--- image-jpg-html-base64 html ---
+#image("/assets/images/f2t.jpg", alt: "The letter F")
+
 --- image-sizing ---
 // Test configuring the size and fitting behaviour of images.
 
@@ -128,7 +131,7 @@ A #box(image("/assets/images/tiger.jpg", height: 1cm, width: 80%)) B
   width: 1cm,
 )
 
---- image-scaling-methods ---
+--- image-scaling-methods render html ---
 #let img(scaling) = image(
   bytes((
     0xFF, 0x00, 0x00, 0x00, 0xFF, 0x00, 0x00, 0x00, 0xFF,
@@ -144,14 +147,26 @@ A #box(image("/assets/images/tiger.jpg", height: 1cm, width: 80%)) B
   scaling: scaling,
 )
 
-#stack(
-  dir: ltr,
-  spacing: 4pt,
+#let images = (
   img(auto),
   img("smooth"),
   img("pixelated"),
 )
 
+#context if target() == "html" {
+  // TODO: Remove this once `stack` is supported in HTML export.
+  html.div(
+    style: "display: flex; flex-direction: row; gap: 4pt",
+    images.join(),
+  )
+} else {
+  stack(
+    dir: ltr,
+    spacing: 4pt,
+    ..images,
+  )
+}
+
 --- image-natural-dpi-sizing ---
 // Test that images aren't upscaled.
 // Image is just 48x80 at 220dpi. It should not be scaled to fit the page