weight.rs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

//! Compares output drawn as characters with output drawn as outlines, overlaid at the same size

use suki::font;
use suki::{Mode, Shape, escape};

fn main() {
    let path = std::env::args().nth(1).unwrap_or_else(|| "font/latinmodern-math.otf".to_string());
    let data = std::fs::read(&path).unwrap();
    let loaded = font::load(data).unwrap();
    let source = r"x = \frac{a}{b}";

    println!("<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\">");
    println!("<title>Weight</title><style>");
    println!("@font-face{{font-family:\"{}\";src:url(\"{}\")}}", escape(font::family(&loaded)), escape(&path));
    println!("{}", suki::style(&loaded));
    println!("body{{margin:0;padding:32px;font-family:system-ui,sans-serif;font-size:13px}}");
    println!(".big{{font-size:150px}}.small{{font-size:20px}}");
    println!(".stack{{position:relative;height:230px}}");
    println!(".stack>span,.stack>svg{{position:absolute;left:0;top:40px}}");
    println!(".name{{color:#767676;margin:24px 0 6px}}");
    println!("</style></head><body>");

    for (label, size) in [("Side by side at 150px", "big"), ("Side by side at 20px", "small")] {
        println!("<div class=\"name\">{label}</div>");
        println!("<div class=\"{size}\">{}</div>", suki::render_html(source, &loaded, Mode::Display).unwrap());
        println!("<div class=\"{size}\">{}</div>",
            suki::render_svg(source, &loaded, Mode::Display, Shape::Text).unwrap());
        println!("<div class=\"{size}\">{}</div>",
            suki::render_svg(source, &loaded, Mode::Display, Shape::Outline).unwrap());
    }

    println!("<div class=\"name\">Overlaid at 150px (characters below, outlines on top)</div>");
    println!("<div class=\"stack big\">{}{}</div>",
        suki::render_html(source, &loaded, Mode::Display).unwrap(),
        suki::render_svg(source, &loaded, Mode::Display, Shape::Outline).unwrap());
    println!("</body></html>");
}