vertext-html 0.1.0

Shared Layout-to-HTML renderer for vertext hosts (CLI, wasm)
Documentation
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
//! The shared `Layout` → HTML renderer.
//!
//! Every HTML-producing host — the CLI today, `vertext-wasm` tomorrow — goes
//! through this crate, so the slot-to-class mapping and the mode protocol are
//! defined exactly once. The crate is `wasm32`-clean: no I/O, strings in,
//! strings out.

use vertext_core::{
    layout_text, prefers_horizontal, HorizontalKind, Layout, LayoutConfig, Progression, Slot,
};

/// Reserved private-use markers that the Quarto filter inserts around a
/// segment so a single invocation can switch mid-stream between rule sets.
/// Source authors never type these, which is why they live in the Unicode
/// Private Use Area.
///
/// A marker means "everything after me is this kind of segment, until the
/// next marker". Structure that markdown expresses and a flat string cannot —
/// a heading is not a paragraph that happens to be short — has to cross the
/// boundary somehow, and this is the seam it crosses.
///
/// Wire protocol note: `extensions/vertext/vertext.lua` carries the same
/// codepoints as string literals. The `mode_markers_are_the_wire_protocol`
/// test pins the values so a drift on the Rust side cannot pass silently.
pub const MODE_CODE: char = '\u{E000}';
pub const MODE_PROSE: char = '\u{E001}';
/// Heading levels 1–6 occupy U+E002–U+E007.
pub const MODE_HEADING_BASE: u32 = 0xE002;
pub const MAX_HEADING_LEVEL: u8 = 6;
/// A table segment. Within it, cells are separated by [`CELL_SEP`] and rows by
/// [`ROW_SEP`]; a table is 2-D and the wire is a flat string, so the structure
/// needs separators rather than a mode alone.
pub const MODE_TABLE: char = '\u{E008}';
pub const CELL_SEP: char = '\u{E009}';
pub const ROW_SEP: char = '\u{E00A}';
/// One list item. Each item is its own segment: flattening a whole list into
/// a single blob welds the items together *and* mixes their scripts, so a
/// list of mostly-CJK items with Latin terms in them gets classified by the
/// aggregate rather than item by item.
pub const MODE_LIST: char = '\u{E00B}';
/// One item of a *numbered* list. Ordered items already carry their number in
/// the text, so they must not also be given a bullet; a marker of their own
/// is what lets the stylesheet tell them apart.
pub const MODE_LIST_ORDERED: char = '\u{E00C}';
/// One past the last reserved codepoint. The filter strips this whole range
/// from author text; keep the two in step.
pub const RESERVED_END: u32 = 0xE00C;

/// The marker introducing a heading of `level` (clamped to 1–6).
pub fn heading_marker(level: u8) -> char {
    let level = level.clamp(1, MAX_HEADING_LEVEL);
    char::from_u32(MODE_HEADING_BASE + u32::from(level) - 1).expect("heading marker in PUA")
}

/// Single source of truth for the Latin slot caps. The renderer publishes
/// them to CSS as custom properties on the root element, so the stylesheet
/// never hardcodes a width that could drift from the layout.
pub const PROSE_LATIN_CAP: usize = 12;
pub const CODE_LATIN_CAP: usize = 24;

pub fn prose_config(progression: Progression) -> LayoutConfig {
    LayoutConfig {
        max_latin_word_width: PROSE_LATIN_CAP,
        preserve_spaces: false,
        progression,
    }
}

pub fn code_config(progression: Progression) -> LayoutConfig {
    LayoutConfig {
        max_latin_word_width: CODE_LATIN_CAP,
        preserve_spaces: true,
        progression,
    }
}

pub fn escape(text: &str) -> String {
    text.replace('&', "&")
        .replace('<', "&lt;")
        .replace('>', "&gt;")
        .replace('"', "&quot;")
}

fn advance_keyword(progression: Progression) -> &'static str {
    match progression {
        Progression::RightToLeft => "left",
        Progression::LeftToRight => "right",
    }
}

#[derive(Clone, Copy, PartialEq, Eq, Debug)]
enum Mode {
    Prose,
    Code,
    Heading(u8),
    Table,
    ListItem { ordered: bool },
}

impl Mode {
    fn from_marker(ch: char) -> Option<Mode> {
        if ch == MODE_CODE {
            return Some(Mode::Code);
        }
        if ch == MODE_PROSE {
            return Some(Mode::Prose);
        }
        if ch == MODE_TABLE {
            return Some(Mode::Table);
        }
        if ch == MODE_LIST {
            return Some(Mode::ListItem { ordered: false });
        }
        if ch == MODE_LIST_ORDERED {
            return Some(Mode::ListItem { ordered: true });
        }
        let offset = (ch as u32).checked_sub(MODE_HEADING_BASE)?;
        (offset < u32::from(MAX_HEADING_LEVEL)).then(|| Mode::Heading(offset as u8 + 1))
    }

    fn config(self, progression: Progression) -> LayoutConfig {
        match self {
            // A heading is prose that happens to be short and loud. It gets
            // the prose rule set; only its presentation differs.
            Mode::Prose | Mode::Heading(_) | Mode::Table | Mode::ListItem { .. } => prose_config(progression),
            Mode::Code => code_config(progression),
        }
    }

    fn column_class(self) -> String {
        match self {
            Mode::Prose | Mode::Table => "vertext-column vertext-column-prose".to_string(),
            Mode::ListItem { ordered } => {
                let kind = if ordered { "vertext-column-list-ordered" } else { "vertext-column-list-bullet" };
                format!("vertext-column vertext-column-prose vertext-column-list {kind}")
            }
            Mode::Code => "vertext-column vertext-column-code".to_string(),
            Mode::Heading(level) => format!(
                "vertext-column vertext-column-prose vertext-column-heading vertext-column-h{level}"
            ),
        }
    }

    /// Which way this segment is set.
    ///
    /// Code is always horizontal — program source has a left-to-right reading
    /// order built into its own syntax, and Japanese and Chinese technical
    /// publishing has set code horizontally inside vertical books for decades.
    /// Prose is decided by which script carries the line. Headings follow the
    /// body so a section title never sits at odds with the section.
    fn block(self, text: &str) -> BlockKind {
        match self {
            Mode::Table => BlockKind::Table,
            Mode::Code => BlockKind::Horizontal(HorizontalKind::Code),
            Mode::Prose | Mode::Heading(_) | Mode::ListItem { .. } => {
                if prefers_horizontal(text) {
                    BlockKind::Horizontal(HorizontalKind::Prose)
                } else {
                    BlockKind::Vertical
                }
            }
        }
    }
}

#[derive(Clone, Copy, PartialEq, Eq, Debug)]
enum BlockKind {
    Vertical,
    Horizontal(HorizontalKind),
    Table,
}

#[derive(Clone, Copy, Debug)]
pub struct RenderOptions {
    /// Lay the entire input out under the code rule set, ignore the mode
    /// markers, and put `vertext-code` on the root.
    pub whole_strip_code: bool,
    /// Put `vertext-page` on the root. The stylesheet keys full-page vertical
    /// flow (native `writing-mode` on the surrounding page) off this class.
    pub page: bool,
    /// Which way columns advance. A property of the document's script, and
    /// the one thing an engine must never hardcode: every renderer that fixes
    /// this to right-to-left has decided permanently which literatures it can
    /// carry. Declared by the author, because it cannot be inferred — a
    /// Chinese document teaching Mongolian and a Mongolian document teaching
    /// Chinese contain the same scripts and want opposite answers.
    pub progression: Progression,
}

impl Default for RenderOptions {
    fn default() -> Self {
        Self {
            whole_strip_code: false,
            page: false,
            // CJK is the bulk of vertical text on the web; Mongolian
            // documents declare. Neither is privileged in the model.
            progression: Progression::RightToLeft,
        }
    }
}

/// Renders one `.vertext` strip to HTML.
///
/// Without [`RenderOptions::whole_strip_code`] the input is split at the
/// reserved markers into prose/code segments, each laid out under its own
/// rule set.
pub fn render_document(input: &str, options: RenderOptions) -> String {
    let mut segments: Vec<(Mode, String)> = Vec::new();
    if options.whole_strip_code {
        segments.push((Mode::Code, input.to_owned()));
    } else {
        let mut current = (Mode::Prose, String::new());
        for ch in input.chars() {
            match Mode::from_marker(ch) {
                // A marker at the very start has nothing to close, so it
                // retargets the open segment instead of emitting an empty one.
                Some(mode) if current.1.is_empty() && segments.is_empty() => {
                    current = (mode, String::new());
                }
                Some(mode) => {
                    segments.push(std::mem::replace(&mut current, (mode, String::new())));
                }
                None => current.1.push(ch),
            }
        }
        if !current.1.is_empty() || segments.is_empty() {
            segments.push(current);
        }
    }

    let mut root_class = String::from("vertext");
    if options.whole_strip_code {
        root_class.push_str(" vertext-code");
    }
    if options.page {
        root_class.push_str(" vertext-page");
    }
    let advance = advance_keyword(options.progression);
    let mut html = format!(
        "<div class=\"{root_class}\" data-column-advance=\"{advance}\" \
         style=\"--vertext-latin-cap-prose:{PROSE_LATIN_CAP}ch;\
         --vertext-latin-cap-code:{CODE_LATIN_CAP}ch\">"
    );

    let mut emitted_any = false;
    let mut in_stack = false;
    for (mode, segment_text) in segments {
        let trimmed = segment_text.trim_end_matches('\n');
        // A wholly blank segment carries nothing and must stay transparent.
        // The separator newline between a heading and the fenced block under
        // it produces one, and treating it as content made it a vertical block
        // that split the two apart — the heading ended one horizontal stack
        // and its own code block started another.
        if trimmed.is_empty() {
            continue;
        }
        emitted_any = true;
        // `.vertext-code` is the author declaring "set this vertically as
        // code" — the showcase case. A fenced block inside ordinary prose is
        // the opposite instruction and goes horizontal. Same content, and the
        // difference is what the author asked for, never what we guessed.
        let block = if options.whole_strip_code { BlockKind::Vertical } else { mode.block(trimmed) };

        // Consecutive horizontal blocks stack vertically instead of each
        // claiming its own slot beside the columns. Without this a one-word
        // English heading takes a full column's width and leaves the height of
        // the page empty beneath it, with its own paragraph stranded in the
        // next slot over. Stacked, the heading sits on top and its text runs
        // underneath — which is how a heading and its paragraph relate.
        //
        // Tables join the stack for the same reason: a table's caption line
        // belongs above it and its commentary below, not beside it. A table
        // that happens to sit among vertical columns simply ends up alone in
        // its stack, which lays out exactly as it did before.
        let horizontal = matches!(block, BlockKind::Horizontal(_) | BlockKind::Table);
        if horizontal && !in_stack {
            html.push_str("<div class=\"vertext-hstack\">");
            in_stack = true;
        } else if !horizontal && in_stack {
            html.push_str("</div>");
            in_stack = false;
        }

        match block {
            BlockKind::Table => render_table(&mut html, trimmed, options.progression),
            BlockKind::Horizontal(kind) => render_horizontal(&mut html, trimmed, kind, mode),
            BlockKind::Vertical => {
                let layout = layout_text(trimmed, &mode.config(options.progression));
                let column_class = mode.column_class();
                for column in &layout.columns {
                    html.push_str(&format!("<div class=\"{column_class}\">"));
                    render_slots(&mut html, &column.slots);
                    html.push_str("</div>");
                }
                // Preserve a blank column for a paragraph break that ends the
                // segment (source newline immediately before a mode toggle).
                if trimmed.len() < segment_text.len() && !layout.columns.is_empty() {
                    html.push_str(&format!("<div class=\"{column_class}\"></div>"));
                }
            }
        }
    }
    if in_stack {
        html.push_str("</div>");
    }
    if !emitted_any {
        // Empty input must still produce a well-formed empty strip.
        html.push_str("<div class=\"vertext-column vertext-column-prose\"></div>");
    }
    html.push_str("</div>\n");
    html
}

/// A horizontal block: an orthogonal island in the vertical flow.
///
/// The wrap measure is published as a custom property rather than baked into
/// the stylesheet, for the same reason the Latin caps are — one source, no
/// drift. Line breaking is left to the browser, which has the font metrics.
fn render_horizontal(html: &mut String, text: &str, kind: HorizontalKind, mode: Mode) {
    let (kind_class, wrap) = match kind {
        HorizontalKind::Prose => ("vertext-horizontal-prose", kind.default_wrap()),
        HorizontalKind::Code => ("vertext-horizontal-code", kind.default_wrap()),
    };
    let heading_class = match mode {
        Mode::Heading(level) => format!(" vertext-horizontal-heading vertext-horizontal-h{level}"),
        Mode::ListItem { ordered } => {
            let kind = if ordered { " vertext-horizontal-list-ordered" } else { " vertext-horizontal-list-bullet" };
            format!(" vertext-horizontal-list{kind}")
        }
        _ => String::new(),
    };
    let tag = if matches!(kind, HorizontalKind::Code) { "pre" } else { "div" };
    html.push_str(&format!(
        "<div class=\"vertext-horizontal {kind_class}{heading_class}\" \
         style=\"--vertext-wrap:{wrap}ch\"><{tag}>{}</{tag}></div>",
        escape(text)
    ));
}

/// A table. Rows are separated by [`ROW_SEP`] and cells by [`CELL_SEP`].
///
/// Vertical text is the one place a table's structure falls out for free: a
/// row set as a column reads top-to-bottom as one entry, and successive rows
/// advance the way the surrounding text does. A markup `<table>` under
/// `writing-mode: vertical-rl` does exactly that transposition natively, so
/// the row stays a `<tr>` and the browser places it — no transposing here,
/// which keeps the markup honest for screen readers and for `display: block`
/// fallbacks.
///
/// Cell contents go through the ordinary slot layout, so a Mongolian cell
/// keeps its joined run and a Latin cell keeps its word slots. Cells do not
/// hyphenate: the column width is the constraint, and a romanization broken
/// across a hard hyphen is unreadable as a citation form.
fn render_table(html: &mut String, text: &str, progression: Progression) {
    let config = LayoutConfig { max_latin_word_width: usize::MAX, ..prose_config(progression) };
    html.push_str("<table class=\"vertext-table\">");
    for (index, row) in text.split(ROW_SEP).enumerate() {
        if row.is_empty() {
            continue;
        }
        let header = index == 0;
        let cell_tag = if header { "th" } else { "td" };
        html.push_str(if header {
            "<thead><tr class=\"vertext-row vertext-row-header\">"
        } else {
            "<tr class=\"vertext-row\">"
        });
        for cell in row.split(CELL_SEP) {
            html.push_str(&format!("<{cell_tag} class=\"vertext-cell\">"));
            let layout = layout_text(cell, &config);
            for column in &layout.columns {
                html.push_str("<div class=\"vertext-column vertext-column-cell\">");
                render_slots(html, &column.slots);
                html.push_str("</div>");
            }
            html.push_str(&format!("</{cell_tag}>"));
        }
        html.push_str(if header { "</tr></thead><tbody>" } else { "</tr>" });
    }
    html.push_str("</tbody></table>");
}

fn render_slots(html: &mut String, slots: &[Slot]) {
    for slot in slots {
        // Whitespace is emitted as the character the author typed, never a
        // stand-in glyph. Code indentation is made visible by the stylesheet
        // instead — a background, not a substitution, so the text a reader
        // copies is the text a writer wrote.
        let (class, body) = match slot {
            Slot::Upright(s) => ("vertext-upright", escape(s)),
            Slot::LatinWord(s) => ("vertext-latin", escape(s)),
            Slot::MongolianRun(s) => ("vertext-mongolian", escape(s)),
            Slot::Space(s) => ("vertext-space", escape(s)),
            // The character is emitted exactly as the author wrote it. The
            // vertical appearance is the stylesheet's job — see the note on
            // `Slot::VerticalPunctuation`.
            Slot::VerticalPunctuation(s) => ("vertext-vform", escape(s)),
            Slot::CornerPunctuation(s) => ("vertext-corner", escape(s)),
            Slot::Neutral(s) => ("vertext-neutral", escape(s)),
        };
        html.push_str(&format!("<span class=\"{class}\">{body}</span>"));
    }
}

/// Exposes the advance keyword for hosts that render their own shell.
pub fn column_advance(layout: &Layout) -> &'static str {
    advance_keyword(layout.progression)
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn mode_markers_are_the_wire_protocol() {
        // These codepoints are duplicated as literals in
        // extensions/vertext/vertext.lua. Do not change one side alone.
        assert_eq!(MODE_CODE, '\u{E000}');
        assert_eq!(MODE_PROSE, '\u{E001}');
        assert_eq!(heading_marker(1), '\u{E002}');
        assert_eq!(heading_marker(6), '\u{E007}');
        // Out-of-range levels clamp rather than producing a stray codepoint.
        assert_eq!(heading_marker(0), heading_marker(1));
        assert_eq!(heading_marker(9), heading_marker(6));
    }

    #[test]
    fn every_marker_round_trips_to_its_mode() {
        assert_eq!(Mode::from_marker(MODE_CODE), Some(Mode::Code));
        assert_eq!(Mode::from_marker(MODE_PROSE), Some(Mode::Prose));
        assert_eq!(Mode::from_marker(MODE_TABLE), Some(Mode::Table));
        assert_eq!(Mode::from_marker(MODE_LIST), Some(Mode::ListItem { ordered: false }));
        assert_eq!(Mode::from_marker(MODE_LIST_ORDERED), Some(Mode::ListItem { ordered: true }));
        for level in 1..=MAX_HEADING_LEVEL {
            assert_eq!(Mode::from_marker(heading_marker(level)), Some(Mode::Heading(level)));
        }
        // Ordinary text must never be mistaken for a marker.
        // '\u{E00D}' is one past the last reserved codepoint and '\u{D7FF}'
        // sits below the whole block. Both must read as ordinary text.
        for ch in ['', 'a', '\u{E00D}', '\u{D7FF}', '\u{E7FF}'] {
            assert_eq!(Mode::from_marker(ch), None, "{ch:?} should not be a marker");
        }
    }

    #[test]
    fn a_heading_segment_gets_its_level_on_the_column() {
        // A CJK heading stays vertical and carries its level on the column.
        let input = format!("{}中文{MODE_PROSE}山川", heading_marker(2));
        let html = render_document(&input, RenderOptions::default());
        assert!(html.contains("vertext-column-heading vertext-column-h2"));
        assert!(html.contains("vertext-column-prose vertext-column-heading"));
        assert!(!html.contains(heading_marker(2)));
        // A Latin heading goes horizontal and carries its level there instead.
        let latin = format!("{}Chinese{MODE_PROSE}山川", heading_marker(2));
        let html = render_document(&latin, RenderOptions::default());
        assert!(html.contains("vertext-horizontal-heading vertext-horizontal-h2"));
    }

    #[test]
    fn headings_do_not_leak_into_the_following_prose() {
        let input = format!("{}中文{MODE_PROSE}山川", heading_marker(2));
        let html = render_document(&input, RenderOptions::default());
        let heading_at = html.find("vertext-column-heading").unwrap();
        let prose_at = html.rfind("vertext-column-prose\"").unwrap();
        assert!(prose_at > heading_at, "the prose column must follow the heading column");
    }

    #[test]
    fn empty_input_produces_a_well_formed_empty_strip() {
        let html = render_document("", RenderOptions::default());
        assert!(html.contains("<div class=\"vertext-column vertext-column-prose\"></div>"));
        assert!(html.starts_with("<div class=\"vertext\""));
    }

    #[test]
    fn prose_and_code_segments_get_their_own_column_classes() {
        let input = format!("散文\n{MODE_CODE}let x = 1{MODE_PROSE}又散文");
        let html = render_document(&input, RenderOptions::default());
        // CJK prose stays vertical; the fenced code becomes a horizontal block.
        assert!(html.contains("vertext-column-prose"));
        assert!(html.contains("vertext-horizontal-code"));
        // The markers themselves must never reach the output.
        assert!(!html.contains(MODE_CODE));
        assert!(!html.contains(MODE_PROSE));
    }

    #[test]
    fn leading_code_marker_does_not_create_an_empty_prose_segment() {
        let input = format!("{MODE_CODE}code{MODE_PROSE}");
        let html = render_document(&input, RenderOptions::default());
        assert!(!html.contains("vertext-column-prose\"><"));
        assert!(html.contains("vertext-horizontal-code"));
    }

    #[test]
    fn whole_strip_code_sets_root_class_and_ignores_markers() {
        // `.vertext-code` is an explicit request for vertical code, so it
        // must NOT be turned horizontal by the orientation rule.
        let html = render_document("  let", RenderOptions { whole_strip_code: true, ..Default::default() });
        assert!(html.starts_with("<div class=\"vertext vertext-code\""));
        assert!(html.contains("vertext-space"), "indentation must survive");
        assert!(html.contains("vertext-column-code"), "must stay vertical");
        assert!(!html.contains("vertext-horizontal"));
    }

    #[test]
    fn latin_caps_are_published_as_css_custom_properties() {
        let html = render_document("", RenderOptions::default());
        assert!(html.contains("--vertext-latin-cap-prose:12ch"));
        assert!(html.contains("--vertext-latin-cap-code:24ch"));
    }

    #[test]
    fn progression_reaches_the_dom_as_data() {
        let html = render_document("", RenderOptions::default());
        assert!(html.contains("data-column-advance=\"left\""));
    }

    #[test]
    fn a_table_keeps_its_cells_apart() {
        let input = format!(
            "{MODE_TABLE}蒙古文{CELL_SEP}转写{ROW_SEP}ᠰᠠᠶᠢᠨ{CELL_SEP}sayin"
        );
        let html = render_document(&input, RenderOptions::default());
        assert!(html.contains("<table class=\"vertext-table\">"));
        assert!(html.contains("<th class=\"vertext-cell\">"));
        assert!(html.contains("<td class=\"vertext-cell\">"));
        // The failure this exists to prevent: cells welding into one run.
        assert!(!html.contains("蒙古文转写"));
        assert!(!html.contains("ᠰᠠᠶᠢᠨsayin"));
        // The Mongolian cell keeps its joined run rather than per-glyph slots.
        assert!(html.contains("<span class=\"vertext-mongolian\">ᠰᠠᠶᠢᠨ</span>"));
        assert!(!html.contains(CELL_SEP));
        assert!(!html.contains(ROW_SEP));
    }

    #[test]
    fn a_table_stacks_with_the_text_around_it() {
        // Caption above, table, commentary below — one stack, not three slots
        // side by side.
        let input = format!(
            "A vocabulary table follows.{MODE_TABLE}x{CELL_SEP}y{MODE_PROSE}\
             Read each column top to bottom."
        );
        let html = render_document(&input, RenderOptions::default());
        assert_eq!(html.matches("vertext-hstack").count(), 1);
        let stack = html.find("vertext-hstack").unwrap();
        let table = html.find("vertext-table").unwrap();
        let close = html.rfind("</div></div>").unwrap();
        assert!(stack < table && table < close, "the table must sit inside the stack");
    }

    #[test]
    fn table_cells_never_hyphenate() {
        // A romanization broken across a hard hyphen is unusable as a
        // citation form; the column width is the constraint instead.
        let input = format!("{MODE_TABLE}x{CELL_SEP}bayarlal_a_bayartai_teyimu");
        let html = render_document(&input, RenderOptions::default());
        assert!(html.contains("bayarlal_a_bayartai_teyimu"));
        assert!(!html.contains(''));
    }

    #[test]
    fn latin_prose_is_set_horizontally_and_cjk_is_not() {
        let english = render_document(
            "It is a truth universally acknowledged, that a single man",
            RenderOptions::default(),
        );
        assert!(english.contains("vertext-horizontal-prose"));
        assert!(english.contains("--vertext-wrap:66ch"));
        assert!(!english.contains("vertext-column-prose\">"));

        let chinese = render_document("山川异域,风月同天。", RenderOptions::default());
        assert!(chinese.contains("vertext-column-prose"));
        assert!(!chinese.contains("vertext-horizontal"));
    }

    #[test]
    fn fenced_code_is_horizontal_at_the_code_measure() {
        let input = format!("{MODE_CODE}fn main() {{}}{MODE_PROSE}");
        let html = render_document(&input, RenderOptions::default());
        assert!(html.contains("vertext-horizontal-code"));
        assert!(html.contains("--vertext-wrap:80ch"));
        assert!(html.contains("<pre>"));
        // Source must still be escaped inside the pre.
        let injected = format!("{MODE_CODE}<script>{MODE_PROSE}");
        assert!(!render_document(&injected, RenderOptions::default()).contains("<script>"));
    }

    #[test]
    fn mongolian_progression_reaches_the_dom_and_the_layout() {
        let options = RenderOptions {
            progression: Progression::LeftToRight,
            ..Default::default()
        };
        let html = render_document("ᠮᠣᠩᠭᠤᠯ\nᠤᠯᠤᠰ", options);
        // `right` means columns advance rightward: vertical-lr, the Mongolian
        // direction. Getting this backwards does not look wrong, it reads the
        // document in reverse order.
        assert!(html.contains("data-column-advance=\"right\""));
        assert!(!html.contains("data-column-advance=\"left\""));
        // And the default stays CJK for every document that does not declare.
        let cjk = render_document("山川", RenderOptions::default());
        assert!(cjk.contains("data-column-advance=\"left\""));
    }

    /// The renderer must never substitute a character. Presentation forms
    /// like U+FE35 look right and destroy the document: copy-paste, find,
    /// and screen readers all yield codepoints the author never typed. The
    /// view rotates; the text is untouched.
    #[test]
    fn punctuation_is_never_substituted() {
        let source = "好(天):川、月。—…「引」";
        let html = render_document(source, RenderOptions::default());
        for original in ['', '', '', '', '', '', '', '', ''] {
            assert!(html.contains(original), "{original} must survive verbatim");
        }
        // Nothing from the vertical presentation blocks may appear.
        for ch in html.chars() {
            let c = ch as u32;
            assert!(!(0xFE10..=0xFE19).contains(&c), "presentation form {ch:?} leaked in");
            assert!(!(0xFE30..=0xFE4F).contains(&c), "presentation form {ch:?} leaked in");
        }
    }

    #[test]
    fn page_mode_marks_the_root() {
        let html = render_document("", RenderOptions { page: true, ..Default::default() });
        assert!(html.starts_with("<div class=\"vertext vertext-page\""));
    }

    #[test]
    fn user_text_is_escaped() {
        let html = render_document("<script>", RenderOptions::default());
        assert!(!html.contains("<script>"));
        assert!(html.contains("&lt;"));
    }

    #[test]
    fn trailing_newline_before_mode_toggle_keeps_a_blank_column() {
        let input = format!("散文\n{MODE_CODE}code{MODE_PROSE}");
        let html = render_document(&input, RenderOptions::default());
        assert!(html.contains("<div class=\"vertext-column vertext-column-prose\"></div>"));
    }
}