html.rs

//! Converts a group with determined positions and dimensions into HTML
//!
//! Every character is placed with absolute positioning. The vertical position is set without
//! relying on the vertical metrics of the font: a strut that has only a height is placed first
//! to fix the baseline of the line.
//!
//! This module outputs characters, not outlines. The side that displays them needs the same
//! font, but in return the text can be selected and copied. To output outlines, use svg.rs.

use crate::font::{self, Font};
use crate::layout::{Content, Layout};
use crate::node::class_name;
use crate::outline;
use crate::svg::DARKEN;
use crate::text::{escape, number, spacing_mark};


/// Extra height that makes sure the strut is taller than the content
const STRUT_MARGIN: f64 = 1.0;


/// CSS needed to display the HTML output. The typeface name is taken from the font
pub fn style(font: &Font) -> String {
    format!(
        concat!(
            ".suki{{display:inline-block;position:relative;text-align:left;line-height:1;",
            "white-space:pre;font-family:\"{}\",{};font-style:normal;font-weight:normal}}\n",
            ".suki .at{{position:absolute;height:0}}\n",
            ".suki .strut{{display:inline-block;width:0;overflow:hidden}}\n",
            ".suki .rule{{display:inline-block;background:currentColor}}\n",
            ".suki .drawn{{display:inline-block;overflow:visible;fill:currentColor}}\n",
            ".suki .stretch{{display:inline-block;transform-origin:0 84%}}\n"
        ),
        escape(font::family(font)),
        font::FALLBACK
    )
}


/// Converts a group into HTML. The result is a single `<span class="suki">`
pub fn render(placed: &Layout, font: &Font) -> String {
    let mut out = String::new();
    write_box(placed, font, &mut out);

    out
}


fn write_box(placed: &Layout, font: &Font, out: &mut String) {
    out.push_str(&format!(
        "<span class=\"suki\" style=\"width:{}em;height:{}em;vertical-align:{}em\">",
        number(placed.width),
        number(placed.height + placed.depth),
        number(-placed.depth)
    ));

    match &placed.content {
        Content::Group(children) => {
            for child in children {
                write_child(child.x, child.y, &child.layout, font, placed.height, out);
            }
        }
        _ => write_child(0.0, 0.0, placed, font, placed.height, out),
    }

    out.push_str("</span>");
}


/// Places one child of the parent after setting its baseline with a strut
fn write_child(x: f64, y: f64, placed: &Layout, font: &Font, parent_height: f64, out: &mut String) {
    if is_blank(placed) {
        return;
    }

    out.push_str(&format!(
        concat!(
            "<span class=\"at\" style=\"left:{}em;top:{}em\">",
            "<span class=\"strut\" style=\"height:{}em\"></span>"
        ),
        number(x),
        number(-STRUT_MARGIN),
        number(parent_height + y + STRUT_MARGIN)
    ));
    write_inner(placed, font, out);
    out.push_str("</span>");
}


fn write_inner(placed: &Layout, font: &Font, out: &mut String) {
    match &placed.content {
        Content::Glyph {text, glyph, size, ..} if text.is_empty() => {
            write_drawn(placed, font, *glyph, *size, out);
        }
        Content::Glyph {text, class, size, italic, bold, stretch, ..} => {
            let shown: String = text.chars().map(spacing_mark).collect();
            let mut names = format!("glyph {}", class_name(*class));
            let mut inline = format!("font-size:{}em", number(*size));

            if *italic {
                inline.push_str(";font-style:italic");
            }

            if *bold {
                inline.push_str(";font-weight:bold");
            }

            if *stretch != 1.0 {
                names.push_str(" stretch");
                inline.push_str(&format!(";transform:scaleY({})", number(*stretch)));
            }

            out.push_str(&format!(
                "<span class=\"{names}\" style=\"{inline}\">{}</span>",
                escape(&shown)
            ));
        }
        Content::Rule => {
            out.push_str(&format!(
                "<span class=\"rule\" style=\"width:{}em;height:{}em\"></span>",
                number(placed.width),
                number(placed.height + placed.depth)
            ));
        }
        Content::Group(_) => write_box(placed, font, out),
    }
}


/// Places a glyph that has no character mapped to it as a small SVG that holds its outline
///
/// The glyphs of stretched delimiters and large operators have no character mapped to them,
/// so they cannot be output as a character inside a span. Only these are drawn as outlines
fn write_drawn(placed: &Layout, font: &Font, glyph: u16, size: f64, out: &mut String) {
    let drawn = font::outline_of(font, glyph);

    if drawn.segment.is_empty() {
        return;
    }

    let scale = size / font::units_per_em(font);
    let width = placed.width.max(0.01);
    let height = (placed.height + placed.depth).max(0.01);

    out.push_str(&format!(
        concat!(
            "<svg class=\"drawn\" xmlns=\"http://www.w3.org/2000/svg\"",
            " width=\"{}em\" height=\"{}em\" viewBox=\"0 {} {} {}\"",
            " style=\"vertical-align:{}em\">",
            "<path d=\"{}\" stroke=\"currentColor\" stroke-width=\"{}\"",
            " stroke-linejoin=\"round\"/></svg>"
        ),
        number(width),
        number(height),
        number(-placed.height),
        number(width),
        number(height),
        number(-placed.depth),
        outline::path_data(&drawn, scale, 0.0, 0.0),
        number(DARKEN)
    ));
}


/// A group that has nothing to draw
fn is_blank(placed: &Layout) -> bool {
    match &placed.content {
        Content::Glyph {text, glyph, ..} => text.is_empty() && *glyph == 0,
        Content::Group(children) => children.is_empty(),
        Content::Rule => placed.width <= 0.0 || placed.height + placed.depth <= 0.0,
    }
}


#[cfg(test)]
mod tests {
    use super::*;
    use crate::layout::layout;
    use crate::node::Style;
    use crate::parse::parse;

    fn sample() -> Font {
        let data = std::fs::read("font/latinmodern-math.otf").expect("cannot read the test font");

        font::load(data).unwrap()
    }

    fn html(source: &str, display: bool) -> String {
        let font = sample();
        let placed = layout(&parse(source).unwrap(), &font, 1.0, Style::Auto, display);

        render(&placed, &font)
    }

    #[test]
    fn a_variable_uses_the_math_italic_shape() {
        let out = html("x", false);
        assert!(out.contains("\u{1d465}"), "{out}");
        assert!(!out.contains("font-style:italic"));
    }

    #[test]
    fn a_digit_stays_upright() {
        let out = html("2", false);
        assert!(out.contains(">2</span>"));
        assert!(!out.contains("font-style:italic"));
    }

    #[test]
    fn every_child_carries_a_strut() {
        let out = html("x+1", false);
        assert_eq!(out.matches("class=\"strut\"").count(), out.matches("class=\"at\"").count());
    }

    #[test]
    fn a_fraction_draws_a_rule() {
        assert!(html(r"\frac{a}{b}", false).contains("class=\"rule\""));
        assert!(!html(r"\binom{n}{k}", false).contains("class=\"rule\""));
    }

    #[test]
    fn tall_delimiters_are_drawn_as_outlines() {
        // The larger glyphs have no character mapped to them, so only they become outlines
        let out = html(r"\left( \frac{a}{b} \right)", false);
        assert_eq!(out.matches("class=\"drawn\"").count(), 2, "{out}");
    }

    #[test]
    fn a_plain_paren_stays_a_character() {
        let out = html(r"\left( x \right)", false);
        assert!(!out.contains("class=\"drawn\""));
        assert!(out.contains(">(</span>"));
    }

    #[test]
    fn markup_in_the_source_is_escaped() {
        assert!(html("a<b", false).contains("&lt;"));
        assert!(html(r"\text{a & b}", false).contains("&amp;"));
    }

    #[test]
    fn the_style_names_the_font() {
        assert!(style(&sample()).contains("\"Latin Modern Math\""));
    }
}