Text: gradient fills draw, starting over on every line

A gradient on text was read but drawn in its first colour. Each line is now
filled with the whole gradient, spanning that line's text from its top to
its bottom and its first to its last character, as PowerPoint does. The
gradient builder moves out of fill_path into paint::gradient so fills and
text share it (and PowerPoint's two-colour ramp). Gradient colours are
resolved when the text style is made.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

ATTRIBUTION.md

@@ -27,6 +27,8 @@ deck and UI icons are original work of the DeckCraft contributors (drawn or gene
 | `crates/media/tests/fixtures/tone*` (`tone.mp3`, `.m4a`, `.aac`, `.ogg`, `.opus`, `.flac`, `.wma`, `tone-alac.m4a`) | DeckCraft contributors | synthesised 0.5 s 440 Hz sine, encoded by `crates/media/tests/fixtures/make.sh` (ffmpeg as the encoder only) | CC0-1.0 | Audio decoding tests |
 | `crates/media/tests/fixtures/clip-*` (`clip-h264.mp4`, `clip-h264.mov`, `clip-hevc.mp4`, `clip-vp9.webm`, `clip-av1.mkv`) | DeckCraft contributors | 6 frames of a colour gradient generated by `make.sh` (python3), encoded by ffmpeg (x264 / x265 / libvpx / SVT-AV1 as encoders only) | CC0-1.0 | Video decoding tests |
 | `crates/media/tests/fixtures/make.sh` | DeckCraft contributors | this repository | MIT OR Apache-2.0 | Regenerates the media fixtures |
+| `crates/render/tests/fixtures/colr-squares.ttf` | DeckCraft contributors | two squares as a COLRv0/CPAL test font, built by `make_colr_font.py` (fontTools as the builder only) | CC0-1.0 | Colour glyph rendering tests |
+| `crates/render/tests/fixtures/make_colr_font.py` | DeckCraft contributors | this repository | MIT OR Apache-2.0 | Regenerates the COLR test font |
 
 ## Bundled through dependencies
 

Cargo.lock

@@ -1108,6 +1108,7 @@ dependencies = [
  "image",
  "kurbo",
  "log",
+ "skrifa 0.47.0",
  "vello_common 0.2.0",
  "vello_cpu 0.2.0",
 ]

crates/fonts/src/fallback.rs

@@ -24,6 +24,22 @@ fn ignorable(c: char) -> bool {
         || matches!(c as u32, 0x200B..=0x200F | 0x202A..=0x202E | 0x2060..=0x2069 | 0xFE00..=0xFE0F | 0xFEFF | 0xE0100..=0xE01EF)
 }
 
+/// Is the cluster an emoji drawn in colour: a pictograph that defaults to emoji presentation, or
+/// any sequence with an emoji presentation selector (U+FE0F), a zero-width joiner between
+/// pictographs, a skin tone modifier, regional indicators (flags) or a keycap?
+pub fn is_emoji_cluster(cluster: &[char]) -> bool {
+    if cluster.contains(&'\u{FE0E}') {
+        return false;
+    }
+    let pictographic = |c: char| matches!(c as u32, 0x1F000..=0x1FAFF | 0x2600..=0x27BF | 0x2B00..=0x2BFF | 0x2190..=0x21FF | 0x2300..=0x23FF);
+    let default_emoji =
+        |c: char| matches!(c as u32, 0x1F300..=0x1F64F | 0x1F680..=0x1F6FF | 0x1F900..=0x1F9FF | 0x1FA70..=0x1FAFF | 0x1F1E6..=0x1F1FF);
+    cluster.iter().any(|&c| default_emoji(c))
+        || (cluster.contains(&'\u{FE0F}') && cluster.iter().any(|&c| pictographic(c) || c.is_ascii_digit() || c == '#' || c == '*'))
+        || (cluster.contains(&'\u{200D}') && cluster.iter().any(|&c| pictographic(c)))
+        || cluster.contains(&'\u{20E3}')
+}
+
 /// Does `face` draw every character of the cluster?
 pub fn covers_cluster(face: &FontFace, cluster: &[char]) -> bool {
     cluster.iter().all(|c| ignorable(*c) || face.covers(*c))
@@ -55,9 +71,28 @@ impl FontDb {
     /// bundled face for its script, else an installed face for the script, else any loaded
     /// face that draws it, else `chain[0]` (or the default face if `chain` is empty).
     pub fn cascade(&self, cluster: &[char], chain: &[Arc<FontFace>], style: &str) -> Arc<FontFace> {
+        // Emoji take a colour face (with its ZWJ sequences, skin tones and flags) before the
+        // document's fonts, as PowerPoint draws them, even when a text font has a plain glyph.
+        if is_emoji_cluster(cluster) {
+            if let Some(f) = chain.iter().find(|f| f.is_color() && covers_cluster(f, cluster)) {
+                return f.clone();
+            }
+            if let Some(key) = cluster.iter().copied().find(|c| !ignorable(*c))
+                && let Some(f) = self.color_face_for(key, cluster)
+            {
+                return f;
+            }
+        }
         if let Some(f) = chain.iter().find(|f| covers_cluster(f, cluster)) {
             return f.clone();
         }
+        // Text presentation (U+FE0E): a plain face, not a colour emoji one.
+        if cluster.contains(&'\u{FE0E}') {
+            let faces = self.read_faces();
+            if let Some(f) = faces.iter().find(|f| !f.is_color() && covers_cluster(f, cluster)) {
+                return f.clone();
+            }
+        }
         let first = || chain.first().cloned().unwrap_or_else(|| self.face(crate::DEFAULT_FAMILY, style));
         let Some(key) = cluster.iter().copied().find(|c| !ignorable(*c)) else { return first() };
         let script = cluster.iter().find_map(|c| script_of(*c));

crates/fonts/src/fontdb.rs

@@ -79,6 +79,10 @@ pub struct FontFace {
     /// values).
     pub cap_height: f64,
     pub x_height: f64,
+    /// Where the baseline sits in a line, as a share of the line's height from its top: the
+    /// Windows ascent over the Windows ascent plus descent (OS/2 `usWinAscent`/`usWinDescent`),
+    /// the split PowerPoint uses (computed by `line_split`).
+    pub line_split: f64,
     pub shaper: harfrust::ShaperData,
     /// Variable fonts: the named instance's axis settings (user units; empty = default instance),
     /// the normalised location and the shaper's view of it.
@@ -87,6 +91,8 @@ pub struct FontFace {
     pub instance: Option<harfrust::ShaperInstance>,
     /// Basic Multilingual Plane coverage bitset, built on first use.
     bmp: std::sync::OnceLock<Box<[u64]>>,
+    /// Colour glyph tables present (`is_color`), looked up on first use.
+    color: std::sync::OnceLock<bool>,
 }
 
 /// A cheap `Copy` handle to a face. Faces are never unloaded, so the handle lives for the rest of
@@ -154,6 +160,11 @@ impl FontFace {
     pub fn skrifa(&self) -> Option<skrifa::FontRef<'_>> {
         skrifa::FontRef::from_index(self.data(), self.index).ok()
     }
+    /// Does the face draw colour glyphs (a `COLR`, `CBDT`, `sbix` or `SVG ` table, as colour emoji
+    /// fonts have)?
+    pub fn is_color(&self) -> bool {
+        *self.color.get_or_init(|| has_color_tables(self.data(), self.index))
+    }
     pub fn hb(&self) -> Option<harfrust::FontRef<'_>> {
         harfrust::FontRef::from_index(self.data(), self.index).ok()
     }
@@ -254,6 +265,13 @@ struct SysFallback {
     misses: std::collections::HashSet<char>,
 }
 
+/// Does face `index` of `data` carry colour glyph tables?
+fn has_color_tables(data: &[u8], index: u32) -> bool {
+    use skrifa::raw::types::Tag;
+    let Ok(f) = skrifa::FontRef::from_index(data, index) else { return false };
+    [b"COLR", b"CBDT", b"sbix", b"SVG "].iter().any(|t| f.table_data(Tag::new(t)).is_some())
+}
+
 /// Families tried (when installed) for characters the loaded fonts lack: CJK, symbols, emoji.
 #[cfg(not(target_arch = "wasm32"))]
 const SYSTEM_FALLBACKS: &[&str] = &[
@@ -436,6 +454,23 @@ pub(crate) fn last_resort_face() -> Arc<FontFace> {
     .clone()
 }
 
+/// The share of a line above the baseline (`FontFace::line_split`): OS/2 `usWinAscent` over
+/// `usWinAscent + usWinDescent`, else the ascent over ascent plus descent. Fonts whose Windows
+/// extent is huge (Gabriola, Cambria Math: over 1.5 em) get 0.81, where PowerPoint puts their
+/// baseline (observed).
+fn line_split(f: &skrifa::FontRef, ascent: f64, descent: f64, upem: f64) -> f64 {
+    use skrifa::raw::TableProvider;
+    let (a, d) = match f.os2() {
+        Ok(os2) if os2.us_win_ascent() > 0 => (os2.us_win_ascent() as f64, os2.us_win_descent() as f64),
+        _ => (ascent, descent),
+    };
+    let total = a + d;
+    if !total.is_finite() || total <= 0.0 || a < 0.0 || d < 0.0 {
+        return 0.8;
+    }
+    if total > upem * 1.5 { 0.81 } else { (a / total).clamp(0.5, 1.0) }
+}
+
 fn make_face(bytes: FontBytes, index: u32, family: String, style: String, coords: Vec<([u8; 4], f32)>) -> Option<FontFace> {
     let data: &[u8] = match &bytes {
         FontBytes::Static(b) => b,
@@ -467,6 +502,7 @@ fn make_face(bytes: FontBytes, index: u32, family: String, style: String, coords
         descent: -(m.descent as f64),
         cap_height: m.cap_height.map(|v| v as f64).filter(|v| *v > 0.0).unwrap_or(m.ascent as f64 * 0.72),
         x_height: m.x_height.map(|v| v as f64).filter(|v| *v > 0.0).unwrap_or(m.ascent as f64 * 0.5),
+        line_split: line_split(&f, m.ascent as f64, -(m.descent as f64), m.units_per_em.max(1) as f64),
         shaper,
         coords,
         location,
@@ -474,6 +510,7 @@ fn make_face(bytes: FontBytes, index: u32, family: String, style: String, coords
         bytes,
         index,
         bmp: std::sync::OnceLock::new(),
+        color: std::sync::OnceLock::new(),
     })
 }
 
@@ -880,6 +917,61 @@ impl FontDb {
         false
     }
 
+    /// A loaded colour face drawing all of `cluster`, loading an installed colour font that covers
+    /// `key` if none is loaded yet. Misses are remembered.
+    pub(crate) fn color_face_for(&self, key: char, cluster: &[char]) -> Option<Arc<FontFace>> {
+        let pick = |db: &FontDb| {
+            let faces = db.read_faces();
+            let mut v: Vec<&Arc<FontFace>> = faces.iter().filter(|f| crate::covers_cluster(f, cluster) && f.is_color()).collect();
+            v.sort_by_key(|f| (f.italic, (f.weight - 400.0).abs() as i32));
+            v.first().map(|f| (*f).clone())
+        };
+        if let Some(f) = pick(self) {
+            return Some(f);
+        }
+        #[cfg(not(target_arch = "wasm32"))]
+        if self.system_color_fallback(key) {
+            return pick(self);
+        }
+        let _ = key;
+        None
+    }
+
+    /// Load an installed colour font covering `c`. True if one was loaded.
+    #[cfg(not(target_arch = "wasm32"))]
+    fn system_color_fallback(&self, c: char) -> bool {
+        static MISSES: Mutex<Option<std::collections::HashSet<char>>> = Mutex::new(None);
+        if c.is_control() || c.is_whitespace() {
+            return false;
+        }
+        {
+            let sys = self.sys.lock().unwrap_or_else(|e| e.into_inner());
+            if !sys.enabled {
+                return false;
+            }
+        }
+        if MISSES.lock().unwrap_or_else(|e| e.into_inner()).get_or_insert_with(Default::default).contains(&c) {
+            return false;
+        }
+        let mut paths: Vec<std::path::PathBuf> = self.read_catalog().iter().map(|e| e.path.clone()).collect();
+        paths.sort();
+        paths.dedup();
+        for p in paths {
+            if std::fs::metadata(&p).map(|m| m.len() > 64 << 20).unwrap_or(true) {
+                continue;
+            }
+            let Ok(data) = std::fs::read(&p) else { continue };
+            let hit = enumerate_faces(&data).iter().any(|(i, _, _, _)| {
+                has_color_tables(&data, *i) && skrifa::FontRef::from_index(&data, *i).is_ok_and(|f| f.charmap().map(c).is_some())
+            });
+            if hit && self.add_font(data) > 0 {
+                return true;
+            }
+        }
+        MISSES.lock().unwrap_or_else(|e| e.into_inner()).get_or_insert_with(Default::default).insert(c);
+        false
+    }
+
     /// Glyph outline in font units, y-down (flipped), cached per (face, glyph).
     pub fn outline(&self, face: &FontFace, gid: u32) -> Arc<BezPath> {
         let key = (face.id, gid);

crates/fonts/src/lib.rs

@@ -13,7 +13,7 @@ mod fontdb;
 pub mod script;
 mod shape;
 
-pub use fallback::{bundled_families, covers_cluster, ligature_carets};
+pub use fallback::{bundled_families, covers_cluster, is_emoji_cluster, ligature_carets};
 pub use fontdb::{FALLBACK_FAMILY, FaceRef, FontDb, FontFace, LAST_RESORT_FAMILY, base_style, bundled, substitutes, system_font_dirs};
 pub use harfrust::Feature;
 use harfrust::Tag;
@@ -136,6 +136,25 @@ mod tests {
         FontDb::global().face(DEFAULT_FAMILY, "Regular")
     }
 
+    #[test]
+    fn emoji_clusters_are_recognised() {
+        let c = |s: &str| s.chars().collect::<Vec<char>>();
+        for yes in ["😀", "👍🏽", "❤\u{FE0F}", "👨\u{200D}👩\u{200D}👧", "🇯🇵", "1\u{FE0F}\u{20E3}", "🏳\u{FE0F}\u{200D}🌈"] {
+            assert!(is_emoji_cluster(&c(yes)), "{yes:?}");
+        }
+        for no in ["a", "1", "❤", "☺\u{FE0E}", "😀\u{FE0E}", "字", "→"] {
+            assert!(!is_emoji_cluster(&c(no)), "{no:?}");
+        }
+    }
+
+    #[test]
+    fn colour_fonts_are_recognised() {
+        let db = FontDb::with_font_dirs(Vec::new());
+        assert!(db.add_font(include_bytes!("../../render/tests/fixtures/colr-squares.ttf").to_vec()) > 0);
+        assert!(db.face("DeckCraft Colr Squares", "Regular").is_color());
+        assert!(!fontdb::last_resort_face().is_color());
+    }
+
     #[test]
     fn last_resort_face_parses() {
         let f = fontdb::last_resort_face();
@@ -143,6 +162,17 @@ mod tests {
         assert!(f.upem > 0.0);
     }
 
+    #[test]
+    fn line_split_follows_the_windows_ascent_and_descent() {
+        use skrifa::raw::TableProvider;
+        let f = fontdb::last_resort_face();
+        let font = skrifa::FontRef::new(f.data()).unwrap();
+        let os2 = font.os2().unwrap();
+        let (a, d) = (os2.us_win_ascent() as f64, os2.us_win_descent() as f64);
+        assert!((f.line_split - a / (a + d)).abs() < 1e-9, "{} vs {}", f.line_split, a / (a + d));
+        assert!(f.line_split > 0.5 && f.line_split < 1.0);
+    }
+
     #[test]
     fn some_face_always_resolves() {
         let db = FontDb::with_font_dirs(Vec::new());

crates/model/src/text.rs

@@ -223,6 +223,10 @@ pub struct ParaProps {
     pub rtl: Option<bool>,
     pub font_align: Option<String>,
     pub east_asian_line_break: Option<bool>,
+    /// `latinLnBrk`: Latin words may break inside (after `/`, `\`); off by default.
+    pub latin_line_break: Option<bool>,
+    /// `hangingPunct`: closing East Asian punctuation may hang past the end of a line.
+    pub hanging_punct: Option<bool>,
 }
 
 impl ParaProps {
@@ -253,6 +257,8 @@ impl ParaProps {
             self.font_align.clone_from(&p.font_align);
         }
         self.east_asian_line_break = self.east_asian_line_break.or(p.east_asian_line_break);
+        self.latin_line_break = self.latin_line_break.or(p.latin_line_break);
+        self.hanging_punct = self.hanging_punct.or(p.hanging_punct);
     }
 }
 

crates/pptx/src/read/dml.rs

@@ -345,6 +345,8 @@ pub fn ppr(imp: &mut Imp, part: &Part, p: &El) -> (Option<u8>, ParaProps, Option
         rtl: p.bool("rtl"),
         font_align: p.attr("fontAlgn").map(String::from),
         east_asian_line_break: p.bool("eaLnBrk"),
+        latin_line_break: p.bool("latinLnBrk"),
+        hanging_punct: p.bool("hangingPunct"),
         default_tab: pt(p, "defTabSz"),
         ..Default::default()
     };

crates/pptx/src/write/dml.rs

@@ -432,6 +432,8 @@ pub fn ppr(w: &mut W, x: &mut Exp, o: &mut Out, tag: &str, level: Option<u8>, p:
         .o("defTabSz", p.default_tab.map(|v| emu(v).max(0)))
         .b("rtl", p.rtl)
         .b("eaLnBrk", p.east_asian_line_break)
+        .b("latinLnBrk", p.latin_line_break)
+        .b("hangingPunct", p.hanging_punct)
         .o("fontAlgn", p.font_align.as_deref().filter(|f| matches!(*f, "auto" | "t" | "ctr" | "base" | "b")));
     let has_kids = p.line_spacing.is_some()
         || p.space_before.is_some()

crates/pptx/tests/roundtrip.rs

@@ -766,3 +766,17 @@ fn a_picture_duotone_round_trips() {
     assert!(matches!(d.base, deckcraft_model::ColorBase::Scheme { slot: SchemeSlot::Accent1 }));
     assert!(matches!(l.base, deckcraft_model::ColorBase::Rgb { rgb } if rgb == Rgba::rgb(250, 240, 200)));
 }
+
+#[test]
+fn line_break_options_round_trip() {
+    let mut p = defaults::new_presentation(None);
+    let first = p.slides[0].id;
+    let s = p.slide_mut(first).expect("slide");
+    let t = s.shapes[0].text.insert(TextBody::from_text("x"));
+    t.paragraphs[0].props.latin_line_break = Some(true);
+    t.paragraphs[0].props.hanging_punct = Some(false);
+    let q = round(&p);
+    let props = &q.slides[0].shapes[0].text.as_ref().expect("text").paragraphs[0].props;
+    assert_eq!(props.latin_line_break, Some(true));
+    assert_eq!(props.hanging_punct, Some(false));
+}

crates/render/Cargo.toml

@@ -19,6 +19,7 @@ vello_common = { workspace = true }
 image = { workspace = true }
 log = { workspace = true }
 kurbo = { workspace = true }
+skrifa = { workspace = true }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
 vello_cpu = { workspace = true, features = ["multithreading"] }

crates/render/src/colr.rs

@@ -0,0 +1,212 @@
+//! Colour glyphs (OpenType `COLR` v0 and v1, colours from `CPAL`), as colour emoji fonts draw
+//! them: layers of glyph outlines filled with solid colours or gradients.
+
+use deckcraft_color::Rgba;
+use deckcraft_fonts::FontFace;
+use kurbo::{Affine, BezPath, Point, Rect};
+use skrifa::color::{Brush, ColorPainter, ColorStop, CompositeMode, Extend, Transform};
+use skrifa::raw::types::BoundingBox;
+use skrifa::{GlyphId, MetadataProvider};
+use vello_cpu::{RenderContext, peniko};
+
+/// Nesting depth of clips and layers past which a glyph opens no more (hostile fonts).
+const MAX_DEPTH: usize = 64;
+
+/// Paint `gid` of `face` as a colour glyph, its origin mapped by `at` (y down, points) at `scale`
+/// points per font unit. `fg` is the text colour (palette index 0xFFFF) and `alpha` fades it all.
+/// False when the glyph has no colour version, so the caller draws the plain outline.
+pub fn paint(ctx: &mut RenderContext, face: &FontFace, gid: u32, at: Affine, scale: f64, fg: Rgba, alpha: f64) -> bool {
+    let Some(font) = face.skrifa() else { return false };
+    let glyphs = font.color_glyphs();
+    let Some(glyph) = glyphs.get(GlyphId::new(gid)) else { return false };
+    let palette: Vec<Rgba> = font
+        .color_palettes()
+        .get(0)
+        .map(|p| p.colors().iter().map(|c| Rgba { r: c.red, g: c.green, b: c.blue, a: c.alpha }).collect())
+        .unwrap_or_default();
+    // Font units are y up; the slide is y down.
+    let base = at * Affine::scale(scale) * Affine::scale_non_uniform(1.0, -1.0);
+    let mut p = Painter { ctx, face, base, stack: vec![Affine::IDENTITY], palette, fg, opened: Vec::new() };
+    p.ctx.push_layer(None, None, Some(alpha.clamp(0.0, 1.0) as f32), None, None);
+    let ok = glyph.paint(face.location(), &mut p).is_ok();
+    // A malformed glyph may leave layers open: close them all.
+    while let Some(open) = p.opened.pop() {
+        if open {
+            p.ctx.pop_layer();
+        }
+    }
+    p.ctx.pop_layer();
+    ok
+}
+
+struct Painter<'a> {
+    ctx: &'a mut RenderContext,
+    face: &'a FontFace,
+    base: Affine,
+    /// Transforms pushed by the glyph (font units), innermost last.
+    stack: Vec<Affine>,
+    palette: Vec<Rgba>,
+    fg: Rgba,
+    /// Clips and composite groups pushed by the glyph, innermost last: true when a layer was
+    /// opened on the context for it (false past `MAX_DEPTH`, so its pop is skipped too).
+    opened: Vec<bool>,
+}
+
+fn affine(t: &Transform) -> Affine {
+    Affine::new([t.xx as f64, t.yx as f64, t.xy as f64, t.yy as f64, t.dx as f64, t.dy as f64])
+}
+
+fn pt(p: skrifa::raw::types::Point<f32>) -> Point {
+    Point::new(p.x as f64, p.y as f64)
+}
+
+fn extend(e: Extend) -> peniko::Extend {
+    match e {
+        Extend::Repeat => peniko::Extend::Repeat,
+        Extend::Reflect => peniko::Extend::Reflect,
+        _ => peniko::Extend::Pad,
+    }
+}
+
+fn blend(m: CompositeMode) -> peniko::BlendMode {
+    use peniko::{Compose, Mix};
+    let (mix, compose) = match m {
+        CompositeMode::Clear => (Mix::Normal, Compose::Clear),
+        CompositeMode::Src => (Mix::Normal, Compose::Copy),
+        CompositeMode::Dest => (Mix::Normal, Compose::Dest),
+        CompositeMode::DestOver => (Mix::Normal, Compose::DestOver),
+        CompositeMode::SrcIn => (Mix::Normal, Compose::SrcIn),
+        CompositeMode::DestIn => (Mix::Normal, Compose::DestIn),
+        CompositeMode::SrcOut => (Mix::Normal, Compose::SrcOut),
+        CompositeMode::DestOut => (Mix::Normal, Compose::DestOut),
+        CompositeMode::SrcAtop => (Mix::Normal, Compose::SrcAtop),
+        CompositeMode::DestAtop => (Mix::Normal, Compose::DestAtop),
+        CompositeMode::Xor => (Mix::Normal, Compose::Xor),
+        CompositeMode::Plus => (Mix::Normal, Compose::Plus),
+        CompositeMode::Screen => (Mix::Screen, Compose::SrcOver),
+        CompositeMode::Overlay => (Mix::Overlay, Compose::SrcOver),
+        CompositeMode::Darken => (Mix::Darken, Compose::SrcOver),
+        CompositeMode::Lighten => (Mix::Lighten, Compose::SrcOver),
+        CompositeMode::ColorDodge => (Mix::ColorDodge, Compose::SrcOver),
+        CompositeMode::ColorBurn => (Mix::ColorBurn, Compose::SrcOver),
+        CompositeMode::HardLight => (Mix::HardLight, Compose::SrcOver),
+        CompositeMode::SoftLight => (Mix::SoftLight, Compose::SrcOver),
+        CompositeMode::Difference => (Mix::Difference, Compose::SrcOver),
+        CompositeMode::Exclusion => (Mix::Exclusion, Compose::SrcOver),
+        CompositeMode::Multiply => (Mix::Multiply, Compose::SrcOver),
+        CompositeMode::HslHue => (Mix::Hue, Compose::SrcOver),
+        CompositeMode::HslSaturation => (Mix::Saturation, Compose::SrcOver),
+        CompositeMode::HslColor => (Mix::Color, Compose::SrcOver),
+        CompositeMode::HslLuminosity => (Mix::Luminosity, Compose::SrcOver),
+        _ => (Mix::Normal, Compose::SrcOver),
+    };
+    peniko::BlendMode::new(mix, compose)
+}
+
+impl Painter<'_> {
+    fn current(&self) -> Affine {
+        self.base * self.stack.last().copied().unwrap_or(Affine::IDENTITY)
+    }
+
+    fn color(&self, index: u16, alpha: f32) -> peniko::Color {
+        let c = if index == 0xFFFF { self.fg } else { self.palette.get(index as usize).copied().unwrap_or(self.fg) };
+        let a = (c.a as f64 * (alpha as f64).clamp(0.0, 1.0)).round().clamp(0.0, 255.0) as u8;
+        peniko::Color::from_rgba8(c.r, c.g, c.b, a)
+    }
+
+    fn stops(&self, stops: &[ColorStop]) -> Vec<peniko::ColorStop> {
+        stops.iter().map(|s| peniko::ColorStop { offset: s.offset.clamp(0.0, 1.0), color: self.color(s.palette_index, s.alpha).into() }).collect()
+    }
+
+    /// The glyph outline in font units, y up.
+    fn outline(&self, gid: GlyphId) -> BezPath {
+        let p = deckcraft_fonts::FontDb::global().outline(self.face, gid.to_u32());
+        Affine::scale_non_uniform(1.0, -1.0) * (*p).clone()
+    }
+
+    fn push_clip(&mut self, path: &BezPath) {
+        let open = self.opened.len() < MAX_DEPTH;
+        if open {
+            self.ctx.set_transform(self.current());
+            self.ctx.push_clip_layer(path);
+        }
+        self.opened.push(open);
+    }
+
+    fn pop(&mut self) {
+        if self.opened.pop() == Some(true) {
+            self.ctx.pop_layer();
+        }
+    }
+
+    /// Fill the open clip area (a large box in the current transform) with `paint`.
+    fn cover(&mut self, paint: impl Into<vello_cpu::PaintType>) {
+        self.ctx.set_transform(self.current());
+        self.ctx.set_paint(paint);
+        self.ctx.fill_rect(&Rect::new(-1.0e5, -1.0e5, 1.0e5, 1.0e5));
+    }
+}
+
+impl ColorPainter for Painter<'_> {
+    fn push_transform(&mut self, t: Transform) {
+        let next = self.stack.last().copied().unwrap_or(Affine::IDENTITY) * affine(&t);
+        self.stack.push(next);
+    }
+
+    fn pop_transform(&mut self) {
+        if self.stack.len() > 1 {
+            self.stack.pop();
+        }
+    }
+
+    fn push_clip_glyph(&mut self, gid: GlyphId) {
+        let path = self.outline(gid);
+        self.push_clip(&path);
+    }
+
+    fn push_clip_box(&mut self, b: BoundingBox<f32>) {
+        let r = Rect::new(b.x_min as f64, b.y_min as f64, b.x_max as f64, b.y_max as f64);
+        self.push_clip(&kurbo::Shape::to_path(&r, 0.1));
+    }
+
+    fn pop_clip(&mut self) {
+        self.pop();
+    }
+
+    fn fill(&mut self, brush: Brush<'_>) {
+        match brush {
+            Brush::Solid { palette_index, alpha } => {
+                let c = self.color(palette_index, alpha);
+                self.cover(c);
+            }
+            Brush::LinearGradient { p0, p1, color_stops, extend: e } => {
+                let g = peniko::Gradient::new_linear(pt(p0), pt(p1)).with_stops(self.stops(color_stops).as_slice()).with_extend(extend(e));
+                self.cover(g);
+            }
+            Brush::RadialGradient { c0, r0, c1, r1, color_stops, extend: e } => {
+                let g = peniko::Gradient::new_two_point_radial(pt(c0), r0.max(0.0), pt(c1), r1.max(0.0))
+                    .with_stops(self.stops(color_stops).as_slice())
+                    .with_extend(extend(e));
+                self.cover(g);
+            }
+            Brush::SweepGradient { c0, start_angle, end_angle, color_stops, extend: e } => {
+                let g = peniko::Gradient::new_sweep(pt(c0), start_angle.to_radians(), end_angle.to_radians())
+                    .with_stops(self.stops(color_stops).as_slice())
+                    .with_extend(extend(e));
+                self.cover(g);
+            }
+        }
+    }
+
+    fn push_layer(&mut self, mode: CompositeMode) {
+        let open = self.opened.len() < MAX_DEPTH;
+        if open {
+            self.ctx.push_blend_layer(blend(mode));
+        }
+        self.opened.push(open);
+    }
+
+    fn pop_layer(&mut self) {
+        self.pop();
+    }
+}

crates/render/src/lib.rs

@@ -8,6 +8,7 @@
 #![forbid(unsafe_code)]
 
 mod chart;
+mod colr;
 mod images;
 mod morph_path;
 mod morph_text;
@@ -222,11 +223,14 @@ pub struct Renderer {
     resources: Resources,
     /// Outlines morphing in the frame being drawn by `blend`.
     paths: Vec<PathMorph>,
+    /// The background of the slide (layout, master) being drawn, its placeholder colour and the
+    /// slide's view transform: shapes filled with the background (`useBgFill`) show it through.
+    bg: Option<(Fill, Option<Rgba>, Affine)>,
 }
 
 impl Default for Renderer {
     fn default() -> Self {
-        Renderer { resources: Resources::new(), paths: Vec::new() }
+        Renderer { resources: Resources::new(), paths: Vec::new(), bg: None }
     }
 }
 
@@ -589,7 +593,12 @@ impl Renderer {
         let r = Rect::new(0.0, 0.0, f.pres.slide_size.width, f.pres.slide_size.height);
         ctx.set_transform(view);
         let path = r.to_path(0.1);
+        // PowerPoint lays every background over white: a picture stretched into part of the
+        // slide, or a see-through colour, leaves white around and under it.
+        ctx.set_paint(color(Rgba::WHITE, 1.0));
+        ctx.fill_path(&path);
         paint::fill_path(ctx, rctx, &fill, ph, &path, r, view, FillMode::Norm, 1.0, f.pres);
+        self.bg = Some((fill, ph, view));
     }
 
     fn shape(&mut self, ctx: &mut RenderContext, f: &Frame, rctx: &Ctx, s: &Shape, parent: Affine, depth: usize) {
@@ -711,7 +720,16 @@ impl Renderer {
                         }
                         ctx.set_transform(m);
                         ctx.set_fill_rule(if sp.even_odd { peniko::Fill::EvenOdd } else { peniko::Fill::NonZero });
-                        paint::fill_path(ctx, rctx, fl, fill_ph, &sp.path, Rect::new(0.0, 0.0, w, h), m, sp.fill, fade(i).fill, f.pres);
+                        match (fl, &self.bg) {
+                            // `useBgFill`: the slide's background, laid out on the slide (not the
+                            // shape), shows through the shape.
+                            (Fill::Background, Some((bg, ph, view))) => {
+                                let slide = Rect::new(0.0, 0.0, f.pres.slide_size.width, f.pres.slide_size.height);
+                                let path = (view.inverse() * m) * sp.path.clone();
+                                paint::fill_path(ctx, rctx, bg, *ph, &path, slide, *view, sp.fill, fade(i).fill, f.pres);
+                            }
+                            _ => paint::fill_path(ctx, rctx, fl, fill_ph, &sp.path, Rect::new(0.0, 0.0, w, h), m, sp.fill, fade(i).fill, f.pres),
+                        }
                         ctx.set_fill_rule(peniko::Fill::NonZero);
                     }
                 }
@@ -1115,8 +1133,24 @@ pub fn draw_layout_with(ctx: &mut RenderContext, l: &deckcraft_text::TextLayout,
             continue;
         }
         let m = m * Affine::translate(ps.offset);
+        // A gradient fill starts over on every line and spans that line's text (from its top to
+        // its bottom, from its first to its last character), as in PowerPoint.
+        let mut grads: Vec<(usize, peniko::Gradient)> = Vec::new();
         for (gid, x, y) in &run.glyphs {
-            draw_glyph(ctx, run, *gid, m * Affine::translate((*x, *y)), ps.opacity);
+            let at = m * Affine::translate((*x, *y));
+            let Some(g) = run.gradient.as_ref().filter(|g| !g.stops.is_empty()) else {
+                draw_glyph(ctx, run, *gid, at, ps.opacity);
+                continue;
+            };
+            let li = line_at(l, run.para, *y);
+            if !grads.iter().any(|(i, _)| *i == li) {
+                let scheme = deckcraft_color::ColorScheme { name: String::new(), colors: [Rgba::BLACK; 12] };
+                let stops = g.stops.iter().map(|s| (s.pos, s.color.resolve(&scheme, None))).collect();
+                let bounds = l.lines.get(li).and_then(line_bounds).unwrap_or(tr);
+                grads.push((li, paint::gradient(&g.shape, stops, bounds, run.alpha * ps.opacity)));
+            }
+            let fill = grads.iter().find(|(i, _)| *i == li).map(|(_, g)| (g, Affine::translate((-*x, -*y))));
+            draw_glyph_with(ctx, run, *gid, at, ps.opacity, fill);
         }
     }
     for d in l.decos.iter().filter(|d| !d.behind) {
@@ -1124,20 +1158,63 @@ pub fn draw_layout_with(ctx: &mut RenderContext, l: &deckcraft_text::TextLayout,
     }
 }
 
+/// The line of paragraph `para` holding a glyph on baseline `y` (the nearest baseline).
+fn line_at(l: &deckcraft_text::TextLayout, para: usize, y: f64) -> usize {
+    l.lines
+        .iter()
+        .enumerate()
+        .filter(|(_, li)| li.para == para)
+        .min_by(|a, b| (a.1.baseline - y).abs().total_cmp(&(b.1.baseline - y).abs()))
+        .map(|(i, _)| i)
+        .unwrap_or(0)
+}
+
+/// The box a line's text covers: its top and bottom, its first and last caret.
+fn line_bounds(li: &deckcraft_text::LineInfo) -> Option<Rect> {
+    let (x0, x1) = li.caret_x.iter().fold((f64::INFINITY, f64::NEG_INFINITY), |(a, b), x| (a.min(*x), b.max(*x)));
+    let r = Rect::new(x0, li.top, x1, li.bottom);
+    (r.is_finite() && r.width() > 0.0 && r.height() > 0.0).then_some(r)
+}
+
 /// Draw glyph `gid` of `run` with its origin (on the baseline) mapped by `at`, faded by `opacity`.
 pub(crate) fn draw_glyph(ctx: &mut RenderContext, run: &deckcraft_text::GlyphRun, gid: u32, at: Affine, opacity: f64) {
+    draw_glyph_with(ctx, run, gid, at, opacity, None);
+}
+
+/// [`draw_glyph`], filled with `fill` (a gradient laid out in the text's space, and the map from
+/// the glyph's origin to that space) instead of the run's colour.
+fn draw_glyph_with(
+    ctx: &mut RenderContext,
+    run: &deckcraft_text::GlyphRun,
+    gid: u32,
+    at: Affine,
+    opacity: f64,
+    fill: Option<(&peniko::Gradient, Affine)>,
+) {
     let alpha = run.alpha * opacity;
     if (alpha <= 0.0 || run.color.a == 0) && run.outline.is_none() {
         return;
     }
+    let k = run.size / run.face.upem.max(1.0);
+    // Colour glyphs (emoji) paint their own colours; an outline (text outline effect) still
+    // strokes the plain glyph below.
+    if alpha > 0.0 && run.outline.is_none() && run.face.is_color() && colr::paint(ctx, &run.face, gid, at, k, run.color, alpha) {
+        return;
+    }
     let path = glyph(&run.face, gid);
     if path.elements().is_empty() {
         return;
     }
-    let k = run.size / run.face.upem.max(1.0);
     let skew = if run.fake_italic { Affine::new([1.0, 0.0, -0.2, 1.0, 0.0, 0.0]) } else { Affine::IDENTITY };
     ctx.set_transform(at * skew * Affine::scale(k));
-    if alpha > 0.0 && run.color.a > 0 {
+    if let Some((g, to_text)) = fill
+        && alpha > 0.0
+    {
+        ctx.set_paint(g.clone());
+        ctx.set_paint_transform((skew * Affine::scale(k)).inverse() * to_text);
+        ctx.fill_path(&path);
+        ctx.reset_paint_transform();
+    } else if alpha > 0.0 && run.color.a > 0 {
         ctx.set_paint(color(run.color, alpha));
         ctx.fill_path(&path);
         if run.fake_bold {

crates/render/src/paint.rs

@@ -35,33 +35,8 @@ pub fn fill_path(
             if g.stops.is_empty() {
                 return;
             }
-            let mut stops: Vec<(f64, Rgba)> = g.stops.iter().map(|s| (s.pos.clamp(0.0, 1.0), shade(rctx.color(&s.color, ph), mode))).collect();
-            stops.sort_by(|a, b| a.0.total_cmp(&b.0));
-            // PowerPoint's ramp between stops (linear light, S-shaped), see `ramp`.
-            let stops: Vec<peniko::ColorStop> =
-                crate::ramp::expand(&stops).into_iter().map(|(o, c)| peniko::ColorStop { offset: o as f32, color: color(c, alpha).into() }).collect();
-            let grad = match &g.shape {
-                GradientShape::Linear { angle, .. } => {
-                    // Angle measured clockwise from left→right; span the bounds along that direction.
-                    let a = angle.to_radians();
-                    let (dx, dy) = (a.cos(), a.sin());
-                    let c = bounds.center();
-                    let half = (bounds.width() * dx.abs() + bounds.height() * dy.abs()) / 2.0;
-                    peniko::Gradient::new_linear(Point::new(c.x - dx * half, c.y - dy * half), Point::new(c.x + dx * half, c.y + dy * half))
-                        .with_stops(stops.as_slice())
-                }
-                GradientShape::Path { focus, .. } => {
-                    let fx = bounds.x0 + bounds.width() * (focus[0] + (1.0 - focus[2])) / 2.0;
-                    let fy = bounds.y0 + bounds.height() * (focus[1] + (1.0 - focus[3])) / 2.0;
-                    // Reach the farthest corner, so a gradient from a corner covers the whole box.
-                    let r = [(bounds.x0, bounds.y0), (bounds.x1, bounds.y0), (bounds.x0, bounds.y1), (bounds.x1, bounds.y1)]
-                        .iter()
-                        .map(|(x, y)| ((x - fx).powi(2) + (y - fy).powi(2)).sqrt())
-                        .fold(1e-6, f64::max);
-                    peniko::Gradient::new_radial(Point::new(fx, fy), r as f32).with_stops(stops.as_slice())
-                }
-            };
-            ctx.set_paint(grad);
+            let stops: Vec<(f64, Rgba)> = g.stops.iter().map(|s| (s.pos, shade(rctx.color(&s.color, ph), mode))).collect();
+            ctx.set_paint(gradient(&g.shape, stops, bounds, alpha));
             ctx.fill_path(path);
         }
         Fill::Picture(pf) => {
@@ -131,6 +106,38 @@ pub fn resolved<'a>(rctx: &Ctx, pf: &'a PictureFill, ph: Option<Rgba>) -> std::b
     std::borrow::Cow::Owned(out)
 }
 
+/// The paint of a gradient of `shape` with `stops` (position, colour) spanning `bounds`, faded
+/// by `alpha`, ramping between stops as PowerPoint does (see `ramp`).
+pub fn gradient(shape: &GradientShape, mut stops: Vec<(f64, Rgba)>, bounds: Rect, alpha: f64) -> peniko::Gradient {
+    for s in &mut stops {
+        s.0 = s.0.clamp(0.0, 1.0);
+    }
+    stops.sort_by(|a, b| a.0.total_cmp(&b.0));
+    let stops: Vec<peniko::ColorStop> =
+        crate::ramp::expand(&stops).into_iter().map(|(o, c)| peniko::ColorStop { offset: o as f32, color: color(c, alpha).into() }).collect();
+    match shape {
+        GradientShape::Linear { angle, .. } => {
+            // Angle measured clockwise from left→right; span the bounds along that direction.
+            let a = angle.to_radians();
+            let (dx, dy) = (a.cos(), a.sin());
+            let c = bounds.center();
+            let half = (bounds.width() * dx.abs() + bounds.height() * dy.abs()) / 2.0;
+            peniko::Gradient::new_linear(Point::new(c.x - dx * half, c.y - dy * half), Point::new(c.x + dx * half, c.y + dy * half))
+                .with_stops(stops.as_slice())
+        }
+        GradientShape::Path { focus, .. } => {
+            let fx = bounds.x0 + bounds.width() * (focus[0] + (1.0 - focus[2])) / 2.0;
+            let fy = bounds.y0 + bounds.height() * (focus[1] + (1.0 - focus[3])) / 2.0;
+            // Reach the farthest corner, so a gradient from a corner covers the whole box.
+            let r = [(bounds.x0, bounds.y0), (bounds.x1, bounds.y0), (bounds.x0, bounds.y1), (bounds.x1, bounds.y1)]
+                .iter()
+                .map(|(x, y)| ((x - fx).powi(2) + (y - fy).powi(2)).sqrt())
+                .fold(1e-6, f64::max);
+            peniko::Gradient::new_radial(Point::new(fx, fy), r as f32).with_stops(stops.as_slice())
+        }
+    }
+}
+
 /// Draw a picture fill into `bounds` (shape-local) honouring crop and stretch/tile modes; an animated
 /// GIF shows its frame at `gif_time` seconds.
 pub fn picture(ctx: &mut RenderContext, pres: &Presentation, pf: &PictureFill, bounds: Rect, m: Affine, gif_time: Option<f64>) {

crates/render/src/tests.rs

@@ -572,3 +572,132 @@ fn a_gradient_with_a_stop_off_the_end_stays_linear() {
         assert!((got - want).abs() <= 4, "x {x}: {got} vs {want}");
     }
 }
+
+#[test]
+fn a_shape_filled_with_the_background_shows_the_slide_background() {
+    // `useBgFill`: PowerPoint paints the slide's background into the shape, laid out on the
+    // slide. A white panel covers a black-to-grey background; a shape on it with the background
+    // fill is a window onto that background.
+    use deckcraft_model::style::{Fill, Gradient, GradientShape, GradientStop};
+    let none = || Some(deckcraft_model::style::Line { fill: Some(Fill::None), ..Default::default() });
+    let panel = Shape {
+        id: ShapeId(710),
+        xfrm: Some(Xfrm::new(0.0, 0.0, 960.0, 540.0)),
+        fill: Some(Fill::solid(ColorRef::rgb(deckcraft_color::Rgba::rgb(255, 255, 255)))),
+        line: none(),
+        ..Default::default()
+    };
+    let window = Shape {
+        id: ShapeId(711),
+        xfrm: Some(Xfrm::new(100.0, 100.0, 760.0, 340.0)),
+        fill: Some(Fill::Background),
+        line: none(),
+        ..Default::default()
+    };
+    let mut p = deck_with(vec![panel, window]);
+    let stop = |pos, v| GradientStop { pos, color: ColorRef::rgb(deckcraft_color::Rgba::rgb(v, v, v)) };
+    std::sync::Arc::make_mut(&mut p.slides[0]).background = Some(deckcraft_model::Background::Fill {
+        fill: Fill::Gradient(Gradient {
+            stops: vec![stop(0.0, 0), stop(0.5, 0), stop(1.0, 200)],
+            shape: GradientShape::Linear { angle: 0.0, scaled: false },
+            rotate_with_shape: true,
+        }),
+    });
+    let img = render_slide(&p, 0, &RenderOpts { scale: 1.0, ..Default::default() });
+    assert_eq!(img.pixel(50, 50)[0], 255, "the panel stays white outside the window");
+    assert!(img.pixel(300, 270)[0] < 8, "the window shows the background's black half: {:?}", img.pixel(300, 270));
+    // Laid out on the slide: three quarters across the slide is half way from black to grey.
+    let v = img.pixel(720, 270)[0] as i32;
+    assert!((v - 100).abs() <= 6, "{v}");
+}
+
+#[test]
+fn a_background_is_laid_over_white() {
+    // A background picture stretched into the bottom-right quarter (fillRect l=50% t=50%), and a
+    // half-transparent colour: PowerPoint shows white around and under them, not transparency.
+    use deckcraft_model::style::{Fill, PictureFill, PictureMode};
+    let mut png = std::io::Cursor::new(Vec::new());
+    image::DynamicImage::ImageRgb8(image::RgbImage::from_pixel(4, 4, image::Rgb([0, 0, 200]))).write_to(&mut png, image::ImageFormat::Png).unwrap();
+    let mut p = deck_with(vec![]);
+    let media = p.add_media("bg.png", "image/png", png.into_inner());
+    let pf = PictureFill { media, mode: PictureMode::Stretch { fill_rect: [0.5, 0.5, 0.0, 0.0] }, ..Default::default() };
+    std::sync::Arc::make_mut(&mut p.slides[0]).background = Some(deckcraft_model::Background::Fill { fill: Fill::Picture(pf) });
+    let img = render_slide(&p, 0, &RenderOpts { scale: 0.5, ..Default::default() });
+    assert_eq!(img.pixel(20, 20), [255, 255, 255, 255], "white where the picture doesn't reach");
+    let q = img.pixel(400, 230);
+    assert!(q[2] > 190 && q[0] < 10 && q[3] == 255, "{q:?}");
+    let see_through = ColorRef::rgb(deckcraft_color::Rgba { r: 0, g: 0, b: 0, a: 128 });
+    std::sync::Arc::make_mut(&mut p.slides[0]).background = Some(deckcraft_model::Background::Fill { fill: Fill::solid(see_through) });
+    let img = render_slide(&p, 0, &RenderOpts { scale: 0.5, ..Default::default() });
+    let g = img.pixel(20, 20);
+    assert!(g[3] == 255 && (g[0] as i32 - 127).abs() <= 3, "half-transparent black over white is grey: {g:?}");
+}
+
+#[test]
+fn colour_glyphs_paint_their_layers() {
+    // A COLRv0 test font (crates/render/tests/fixtures): U+E000 is a red square with a blue
+    // square in its middle, U+E001 a square in the text colour.
+    deckcraft_fonts::FontDb::global().add_font(include_bytes!("../tests/fixtures/colr-squares.ttf").to_vec());
+    let mut sh = Shape { id: ShapeId(720), xfrm: Some(Xfrm::new(0.0, 0.0, 400.0, 200.0)), text_box: true, ..Default::default() };
+    let mut t = TextBody::from_text("\u{E000} \u{E001}");
+    let props = &mut t.paragraphs[0].runs[0].props;
+    props.size = Some(72.0);
+    props.font = Some("DeckCraft Colr Squares".into());
+    props.fill = Some(deckcraft_model::style::Fill::solid(ColorRef::rgb(deckcraft_color::Rgba::rgb(0, 160, 0))));
+    sh.text = Some(t);
+    let p = deck_with(vec![sh]);
+    let img = render_slide(&p, 0, &RenderOpts { scale: 1.0, ..Default::default() });
+    let count = |f: &dyn Fn(&[u8; 4]) -> bool| img.pixels.as_chunks::<4>().0.iter().filter(|px| f(px)).count();
+    let red = count(&|p| p[0] > 230 && p[1] < 30 && p[2] < 30);
+    let blue = count(&|p| p[0] < 30 && p[1] < 30 && p[2] > 230);
+    let green = count(&|p| p[0] < 30 && p[1] > 140 && p[1] < 180 && p[2] < 30);
+    // 72 pt squares: the blue one is 40 % of the side (16 % of the area).
+    assert!(red > 2500 && blue > 500, "red {red} blue {blue}");
+    let share = blue as f64 / (red + blue) as f64;
+    assert!((share - 0.16).abs() < 0.03, "blue share {share}");
+    // The text-colour glyph is as big as the other square.
+    assert!((green as f64 / (red + blue) as f64 - 1.0).abs() < 0.1, "green {green} vs {}", red + blue);
+}
+
+#[test]
+fn a_text_gradient_starts_over_on_every_line() {
+    // PowerPoint fills each line of gradient text with the whole gradient, spanning that line
+    // (black at the top of every line to white at its bottom), not the text box.
+    use deckcraft_model::style::{Fill, Gradient, GradientShape, GradientStop};
+    let stop = |pos, v| GradientStop { pos, color: ColorRef::rgb(deckcraft_color::Rgba::rgb(v, v, v)) };
+    let mut sh = Shape { id: ShapeId(730), xfrm: Some(Xfrm::new(0.0, 0.0, 600.0, 500.0)), text_box: true, ..Default::default() };
+    let mut t = TextBody::from_text("HHHH\nHHHH");
+    for p in &mut t.paragraphs {
+        let props = &mut p.runs[0].props;
+        props.size = Some(80.0);
+        props.fill = Some(Fill::Gradient(Gradient {
+            stops: vec![stop(0.0, 0), stop(1.0, 255)],
+            shape: GradientShape::Linear { angle: 90.0, scaled: false },
+            rotate_with_shape: true,
+        }));
+    }
+    sh.text = Some(t);
+    let p = deck_with(vec![sh]);
+    let img = render_slide(&p, 0, &RenderOpts { scale: 1.0, ..Default::default() });
+    // Ink rows (any pixel not white), grouped into the two lines.
+    let ink = |y: u32| (0..600).any(|x| img.pixel(x, y)[0] < 250);
+    let mut bands: Vec<(u32, u32)> = vec![];
+    for y in 0..500 {
+        if ink(y) {
+            match bands.last_mut() {
+                Some(b) if b.1 + 1 == y => b.1 = y,
+                _ => bands.push((y, y)),
+            }
+        }
+    }
+    assert_eq!(bands.len(), 2, "{bands:?}");
+    // The darkest ink in the first rows of each line.
+    let top = |b: (u32, u32)| (b.0..b.0 + 6).flat_map(|y| (0..600).map(move |x| (x, y))).map(|(x, y)| img.pixel(x, y)[0]).min().unwrap();
+    let (a, b) = (top(bands[0]), top(bands[1]));
+    assert!(a < 140 && (a as i32 - b as i32).abs() < 25, "line tops {a} and {b}: the second line starts dark again");
+    // ...and each line ends light.
+    let bottom = |b: (u32, u32)| (b.1 - 5..=b.1).flat_map(|y| (0..600).map(move |x| (x, y))).map(|(x, y)| img.pixel(x, y)[0]).min().unwrap();
+    for band in bands {
+        assert!(bottom(band) > 150, "line {band:?} ends at {}", bottom(band));
+    }
+}

crates/render/tests/fixtures/make_colr_font.py

@@ -0,0 +1,51 @@
+"""Build the COLR test font: DeckCraft Colr Squares (contributor-original, CC0-1.0).
+
+Usage: python make_colr_font.py colr-squares.ttf  (needs fontTools)
+
+U+E000: a 1000x1000 red square (palette 0) with a 400x400 blue square (palette 1) in its middle.
+U+E001: a 1000x1000 square in the text colour (palette index 0xFFFF).
+Plain outlines of the base glyphs are a single square, as colour fonts carry for renderers
+without colour support.
+"""
+import sys
+
+from fontTools.fontBuilder import FontBuilder
+from fontTools.pens.ttGlyphPen import TTGlyphPen
+from fontTools.colorLib.builder import buildCOLR, buildCPAL
+
+
+def square(x0, y0, x1, y1):
+    pen = TTGlyphPen(None)
+    pen.moveTo((x0, y0))
+    pen.lineTo((x0, y1))
+    pen.lineTo((x1, y1))
+    pen.lineTo((x1, y0))
+    pen.closePath()
+    return pen.glyph()
+
+
+def empty():
+    return TTGlyphPen(None).glyph()
+
+
+order = [".notdef", "space", "redblue", "ink", "big", "small"]
+fb = FontBuilder(1000, isTTF=True)
+fb.setupGlyphOrder(order)
+fb.setupCharacterMap({0x20: "space", 0xE000: "redblue", 0xE001: "ink"})
+fb.setupGlyf({
+    ".notdef": empty(),
+    "space": empty(),
+    "redblue": square(0, 0, 1000, 1000),
+    "ink": square(0, 0, 1000, 1000),
+    "big": square(0, 0, 1000, 1000),
+    "small": square(300, 300, 700, 700),
+})
+fb.setupHorizontalMetrics({g: (1000, 0) for g in order})
+fb.setupHorizontalHeader(ascent=1000, descent=0)
+fb.setupNameTable({"familyName": "DeckCraft Colr Squares", "styleName": "Regular"})
+fb.setupOS2(sTypoAscender=1000, sTypoDescender=0, usWinAscent=1000, usWinDescent=0)
+fb.setupPost()
+fb.font["COLR"] = buildCOLR({"redblue": [("big", 0), ("small", 1)], "ink": [("big", 0xFFFF)]}, version=0)
+fb.font["CPAL"] = buildCPAL([[(1.0, 0.0, 0.0, 1.0), (0.0, 0.0, 1.0, 1.0)]])
+fb.save(sys.argv[1])
+print("saved", sys.argv[1])

crates/text/src/lib.rs

@@ -245,7 +245,14 @@ fn make_style(ctx: &Ctx, r: &RunProps, scale: f64, prompt: Option<Rgba>) -> Styl
     let size = (r.size.unwrap_or(18.0) * scale).clamp(0.5, 4000.0);
     let (mut color, alpha, gradient) = match &r.fill {
         Some(Fill::Solid { color }) => (ctx.color(color, None), color.alpha(), None),
-        Some(Fill::Gradient(g)) => (g.stops.first().map(|s| ctx.color(&s.color, None)).unwrap_or(Rgba::BLACK), 1.0, Some(g.clone())),
+        Some(Fill::Gradient(g)) => {
+            // Colours resolved here (theme, colour map), so the renderer needs no colour scheme.
+            let mut g = g.clone();
+            for s in &mut g.stops {
+                s.color = deckcraft_model::ColorRef::rgb(ctx.color(&s.color, None));
+            }
+            (g.stops.first().map(|s| ctx.color(&s.color, None)).unwrap_or(Rgba::BLACK), 1.0, Some(g))
+        }
         Some(Fill::None) => (Rgba::TRANSPARENT, 0.0, None),
         _ => (resolve::text_color(ctx, r), 1.0, None),
     };
@@ -524,7 +531,9 @@ fn shape_cells(ctx: &Ctx, text: &str, char_style: &[usize], styles: &[Style], fa
         let (sc, slot) = scripts.get(a).copied().unwrap_or((None, FontSlot::Latin));
         // Spaces, digits and punctuation stay in the face of the text before them when it can
         // draw them, so a phrase isn't cut into items at every space.
-        let neutral = cluster.iter().all(|c| script::script_of(*c).is_none());
+        // Emoji, and pictographs asked to look like text (U+FE0E), pick their own face.
+        let neutral =
+            cluster.iter().all(|c| script::script_of(*c).is_none()) && !deckcraft_fonts::is_emoji_cluster(cluster) && !cluster.contains(&'\u{FE0E}');
         let face = match prev.as_ref() {
             Some(p) if neutral && deckcraft_fonts::covers_cluster(p, cluster) && char_style.get(a.wrapping_sub(1)) == Some(&si) => p.clone(),
             _ => {
@@ -702,13 +711,60 @@ fn measure_str(face: &FontFace, size: f64, s: &str) -> (f64, Vec<(u32, f64)>) {
     (x, out)
 }
 
+/// Single line spacing as a multiple of the font size. PowerPoint spaces single-spaced lines 1.2
+/// times the size apart in every font (observed on twenty Latin, CJK, Thai and Indic fonts at 18
+/// and 40 pt), whatever the font's own ascent and descent.
+///
+/// Caveat: this was measured on one Windows install of desktop PowerPoint. It may be a Windows or
+/// machine setting; PowerPoint on macOS or the web may space lines by the font's own metrics.
+/// Keep it a single tunable value, and re-measure on the other platform before changing it.
+const LINE_PITCH: f64 = 1.2;
+
+/// A line's height above and below the baseline at `size`: [`LINE_PITCH`] × size, split where
+/// the font's Windows ascent and descent put the baseline.
 fn line_metrics(face: &FontFace, size: f64) -> (f64, f64) {
-    let k = size / face.upem.max(1.0);
-    (face.ascent * k, face.descent * k)
+    let h = size * LINE_PITCH;
+    (h * face.line_split, h * (1.0 - face.line_split))
 }
 
-/// Break opportunities: allowed[i] = a line may start at char i.
-fn break_opportunities(text: &str) -> (Vec<bool>, Vec<bool>) {
+/// Hangul syllables and jamo: PowerPoint wraps Korean at word boundaries (spaces), not between
+/// syllables.
+fn is_hangul(c: char) -> bool {
+    matches!(c, '\u{1100}'..='\u{11FF}' | '\u{3130}'..='\u{318F}' | '\u{A960}'..='\u{A97F}' | '\u{AC00}'..='\u{D7FF}')
+}
+
+/// Closing East Asian punctuation that may hang past the end of a line (`hangingPunct`).
+fn is_hanging_punct(c: char) -> bool {
+    matches!(
+        c,
+        '、' | '。'
+            | '，'
+            | '．'
+            | '：'
+            | '；'
+            | '！'
+            | '？'
+            | '）'
+            | '」'
+            | '』'
+            | '】'
+            | '〕'
+            | '〉'
+            | '》'
+            | '〙'
+            | '〛'
+            | '｝'
+            | '］'
+            | '｣'
+            | '､'
+            | '｡'
+    )
+}
+
+/// Break opportunities: allowed[i] = a line may start at char i. Unicode line breaking, then
+/// PowerPoint's differences: without `latinLnBrk` a word doesn't break after `/` or `\`, and
+/// Korean breaks only between words.
+fn break_opportunities(text: &str, latin_break: bool) -> (Vec<bool>, Vec<bool>) {
     let n = text.chars().count();
     let mut allowed = vec![false; n + 1];
     let mut mandatory = vec![false; n + 1];
@@ -729,6 +785,17 @@ fn break_opportunities(text: &str) -> (Vec<bool>, Vec<bool>) {
             }
         }
     }
+    let chars: Vec<char> = text.chars().collect();
+    for (i, w) in chars.windows(2).enumerate() {
+        let (prev, next) = (w[0], w[1]);
+        let keep = if is_hangul(prev) && is_hangul(next) { false } else { latin_break || !matches!(prev, '/' | '\\') || next.is_whitespace() };
+        if !keep
+            && !mandatory.get(i + 1).copied().unwrap_or(false)
+            && let Some(a) = allowed.get_mut(i + 1)
+        {
+            *a = false;
+        }
+    }
     (allowed, mandatory)
 }
 
@@ -750,7 +817,8 @@ fn break_lines(
     x0_rest: f64,
 ) -> Vec<RawLine> {
     let text: String = p.cells.iter().map(|c| c.ch).collect();
-    let (allowed, _) = break_opportunities(&text);
+    let (allowed, _) = break_opportunities(&text, p.props.latin_line_break.unwrap_or(false));
+    let hang = p.props.hanging_punct.unwrap_or(false);
     let n = p.cells.len();
     let mut lines = vec![];
     let mut start = 0;
@@ -777,6 +845,13 @@ fn break_lines(
             if i > start && allowed.get(i).copied().unwrap_or(false) && breakable(i) {
                 last_break = Some(i);
             }
+            // Closing East Asian punctuation hangs past the end instead of wrapping
+            // (`hangingPunct`); the line breaks after it.
+            if wrap && hang && x + adv > avail + 0.01 && x <= avail + 0.01 && is_hanging_punct(c) && i > start {
+                end = i + 1;
+                next = i + 1;
+                break;
+            }
             if wrap && x + adv > avail + 0.01 && !c.is_whitespace() && i > start {
                 // Break at the last opportunity, or force mid-word (between clusters).
                 let b = last_break
@@ -917,7 +992,11 @@ fn layout_scaled(ctx: &Ctx, shape: &Shape, body: &TextBody, bp: &BodyProps, opts
         let bullet_w = p.bullet.as_ref().map(|(s, st)| measure_str(&st.face, st.size, s).0).unwrap_or(0.0);
         let first_x = if p.bullet.is_some() {
             let bx = (margin + indent).max(0.0);
-            if indent < 0.0 && bx + bullet_w <= margin { margin } else { bx + bullet_w + if indent >= 0.0 { 0.0 } else { 3.0 } }
+            // A hanging bullet's text starts at the margin. When the hang reaches left of the box
+            // (marL + indent < 0), PowerPoint pins the bullet to the box's edge and keeps the
+            // hang: the first line's text starts at -indent (later lines stay at the margin).
+            let stop = margin.max(-indent);
+            if indent < 0.0 && bx + bullet_w <= stop { stop } else { bx + bullet_w + if indent >= 0.0 { 0.0 } else { 3.0 } }
         } else {
             (margin + indent).max(0.0)
         };

crates/text/src/tests.rs

@@ -447,3 +447,158 @@ fn superscript_glyphs_sit_inside_their_cells() {
         assert!(g.1 >= x0 - 0.01 && g.1 < x1, "glyph at {} outside its cell {x0}..{x1}", g.1);
     }
 }
+
+/// A wrapping numbered paragraph with `marL` and `indent`; returns (bullet x, first line's text
+/// x, second line's text x).
+fn hanging(margin: f64, indent: f64, bullet: Bullet) -> (Option<f64>, f64, f64) {
+    let text = "Wrapping words go on and on so the paragraph needs at least two or three lines here";
+    let (p, mut sh) = setup(text, 300.0, 300.0);
+    let para = &mut sh.text.as_mut().unwrap().paragraphs[0];
+    para.props.bullet = Some(bullet);
+    para.props.margin_left = Some(margin);
+    para.props.indent = Some(indent);
+    let l = lay(&p, &sh, 300.0, 300.0);
+    assert!(l.lines.len() >= 2, "{} lines", l.lines.len());
+    let bx = l.runs.iter().find(|r| r.cells.is_empty() && !r.glyphs.is_empty()).map(|r| r.glyphs[0].1);
+    (bx, l.lines[0].caret_x[0], l.lines[1].caret_x[0])
+}
+
+#[test]
+fn a_hang_past_the_box_edge_keeps_its_width_on_the_first_line() {
+    // PowerPoint, marL 0 / indent -36pt: the number sits at the box's edge, the first line's text
+    // 36pt in, and the wrapped lines at the margin (observed with PowerPoint's slide export).
+    let num = || Bullet::AutoNum { scheme: "arabicPeriod".into(), start_at: 1 };
+    let (bx, first, rest) = hanging(0.0, -36.0, num());
+    assert!((first - rest - 36.0).abs() < 0.5, "first {first} rest {rest}");
+    assert!((bx.unwrap() - rest).abs() < 0.5, "bullet {bx:?} rest {rest}");
+    // marL 18 / indent -54: number at the edge, first line at 54, the rest at 18.
+    let (bx, first, rest) = hanging(18.0, -54.0, num());
+    assert!((first - rest - 36.0).abs() < 0.5, "first {first} rest {rest}");
+    assert!((rest - bx.unwrap() - 18.0).abs() < 0.5, "bullet {bx:?} rest {rest}");
+    // A character bullet behaves the same.
+    let (_, first, rest) = hanging(0.0, -36.0, Bullet::Char { char: "•".into() });
+    assert!((first - rest - 36.0).abs() < 0.5, "first {first} rest {rest}");
+    // Without a bullet the first line just starts at the edge.
+    let (_, first, rest) = hanging(0.0, -36.0, Bullet::None);
+    assert!((first - rest).abs() < 0.5, "first {first} rest {rest}");
+}
+
+#[test]
+fn an_ordinary_hang_still_puts_the_text_at_the_margin() {
+    let (bx, first, rest) = hanging(36.0, -36.0, Bullet::AutoNum { scheme: "arabicPeriod".into(), start_at: 1 });
+    assert!((first - rest).abs() < 0.5, "first {first} rest {rest}");
+    assert!((rest - bx.unwrap() - 36.0).abs() < 0.5);
+}
+
+#[test]
+fn single_spaced_lines_are_1_2_times_the_size_apart_whatever_the_font() {
+    // PowerPoint spaces single-spaced lines 1.2 × the font size apart in every font, with the
+    // baseline where the font's Windows ascent/descent split puts it (observed on twenty fonts).
+    for size in [18.0, 40.0] {
+        let mut run = Run::new("HHH");
+        run.props.size = Some(size);
+        let (p, mut sh) = bidi_setup(vec![run], 2000.0, false, Align::Left);
+        let t = sh.text.as_mut().unwrap();
+        t.body.autofit = Some(AutoFit::None);
+        let second = t.paragraphs[0].clone();
+        t.paragraphs.push(second.clone());
+        t.paragraphs.push(second);
+        for para in &mut t.paragraphs {
+            para.props.line_spacing = Some(Spacing::Pct(1.0));
+            para.props.space_before = Some(Spacing::Pts(0.0));
+            para.props.space_after = Some(Spacing::Pts(0.0));
+        }
+        let l = lay(&p, &sh, 2000.0, 600.0);
+        assert_eq!(l.lines.len(), 3);
+        // Each line is 1.2 × the size tall (the face is not compared across lines: another
+        // test's thread can load the family between them, see #252).
+        for line in &l.lines {
+            assert!((line.bottom - line.top - size * LINE_PITCH).abs() < 1e-6, "{size}: {}", line.bottom - line.top);
+        }
+        let face = &l.runs[0].face;
+        let first = &l.lines[0];
+        assert!((first.baseline - first.top - size * LINE_PITCH * face.line_split).abs() < 1e-6);
+    }
+}
+
+/// The lines of `text` in an Arial-free (whatever face resolves) box `w` wide, as strings.
+fn wrapped(text: &str, w: f64, set: impl Fn(&mut ParaProps)) -> Vec<String> {
+    let (p, mut sh) = bidi_setup(vec![Run::new(text)], w, false, Align::Left);
+    let t = sh.text.as_mut().unwrap();
+    t.body.inset_l = Some(0.0);
+    t.body.inset_r = Some(0.0);
+    set(&mut t.paragraphs[0].props);
+    let l = lay(&p, &sh, w, 600.0);
+    let chars: Vec<char> = text.chars().collect();
+    l.lines.iter().map(|li| chars[li.start..li.end].iter().collect()).collect()
+}
+
+/// Width of `text` on one line.
+fn one_line(text: &str) -> f64 {
+    let (p, sh) = bidi_setup(vec![Run::new(text)], 5000.0, false, Align::Left);
+    let l = lay(&p, &sh, 5000.0, 300.0);
+    l.lines[0].caret_x.last().unwrap() - l.lines[0].caret_x[0]
+}
+
+#[test]
+fn a_word_does_not_break_after_a_slash_or_backslash() {
+    // PowerPoint (latinLnBrk off, its default) keeps "alpha/beta/gamma" whole and only breaks it
+    // where it no longer fits; Unicode line breaking would allow a break after each slash.
+    for sep in ["/", "\\"] {
+        let text = ["alpha", "beta", "gamma", "delta", "epsilon"].join(sep);
+        let w = one_line(&text) * 0.6;
+        let lines = wrapped(&text, w, |_| {});
+        assert!(lines.len() >= 2, "{lines:?}");
+        assert!(lines[0].chars().count() > "alpha/beta".len(), "filled to the edge, not cut at a separator: {lines:?}");
+    }
+    // latinLnBrk on: Unicode's break after a slash is allowed again.
+    let text = "alpha/beta/gamma/delta/epsilon";
+    let lines = wrapped(text, one_line(text) * 0.6, |p| p.latin_line_break = Some(true));
+    assert!(lines[0].ends_with('/'), "{lines:?}");
+    // A slash followed by a space still breaks, and hyphens still break.
+    let lines = wrapped("alpha-beta-gamma-delta-epsilon", one_line("alpha-beta-gamma-") + 1.0, |_| {});
+    assert_eq!(lines[0], "alpha-beta-gamma-");
+}
+
+#[test]
+fn korean_wraps_between_words() {
+    let text = "한국어 안녕하세요 반갑습니다 감사합니다";
+    let w = one_line("한국어 안녕하세요 반") + 0.5;
+    let lines = wrapped(text, w, |_| {});
+    assert_eq!(lines.iter().map(|l| l.trim_end()).collect::<Vec<_>>(), ["한국어 안녕하세요", "반갑습니다", "감사합니다"], "{lines:?}");
+    // Japanese and Chinese still break between characters.
+    let lines = wrapped("日本語の文章は空白なしで続きます", one_line("日本語の文章") + 0.5, |_| {});
+    assert_eq!(lines[0], "日本語の文章");
+}
+
+#[test]
+fn closing_punctuation_hangs_past_the_end_with_hanging_punct() {
+    // PowerPoint (hangingPunct on, as its default text styles set it) lets "。" hang past the
+    // edge instead of pulling the character before it onto the next line.
+    let text = "白なしで続きます。句読点も含めて。";
+    let w = one_line("白なしで続きます") + 0.5;
+    let lines = wrapped(text, w, |p| p.hanging_punct = Some(true));
+    assert_eq!(lines[0], "白なしで続きます。", "{lines:?}");
+    // Without it, "。" can't start a line, so "す。" moves down together.
+    let lines = wrapped(text, w, |p| p.hanging_punct = Some(false));
+    assert_eq!(lines[0], "白なしで続きま", "{lines:?}");
+}
+
+#[test]
+fn emoji_take_a_colour_face_when_one_is_installed() {
+    // PowerPoint draws emoji (and ZWJ sequences, skin tones, flags) from the colour emoji font
+    // even when the run's font has a plain glyph for some of them. Skipped without an installed
+    // colour emoji font.
+    let db = FontDb::global();
+    let probe = db.cascade(&['😀'], &[], "Regular");
+    if !probe.is_color() {
+        return;
+    }
+    for s in ["😀", "👍🏽", "❤\u{FE0F}", "👨\u{200D}👩\u{200D}👧"] {
+        let (p, sh) = bidi_setup(vec![Run::new(format!("a{s}b"))], 2000.0, false, Align::Left);
+        let l = lay(&p, &sh, 2000.0, 300.0);
+        let emoji = l.runs.iter().find(|r| r.cells.iter().any(|(_, c)| !c.is_ascii())).unwrap();
+        assert!(emoji.face.is_color(), "{s:?} drawn with {}", emoji.face.family);
+        assert!(l.runs.iter().filter(|r| r.cells.iter().all(|(_, c)| c.is_ascii())).all(|r| !r.face.is_color()), "the letters keep a text face");
+    }
+}