@react-x11/components 0.10.0 → 0.11.0

package/dist/html/layout/inline.js

@@ -32,7 +32,7 @@
 import { codePointAtOffset, codeUnitOffsets } from '../../internal/text.js';
 import { CONTAIN_LAYOUT, INLINE_BEFORE_ABSOLUTE, scrolls, } from '../css/style.js';
 import { inkColor, isTransparent, resolve } from '../css/values.js';
-import { BOX_RAISES, LINE_BOX_RAISES, isOffset, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, } from './boxes.js';
+import { BOX_RAISES, LINE_BOX_RAISES, isOffset, letteredAfter, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, transformInPlace, } from './boxes.js';
 import { tableGrid } from './grid.js';
 /**
  * The text behind a layout, for the one caller that needs it: a selection
@@ -246,6 +246,8 @@ function linesOf(block, options, items, floatCount) {
         CLIPPED_TEXT.add(block);
         fonts = recording(fonts);
     }
+    // small capitals the face does not have, made of its capitals
+    synthesizeSmallCaps(items, fonts);
     if (wraps(block.style))
         holdNoWrap(items, block);
     // one walk for what few paragraphs have: text that casts a shadow, and a
@@ -353,23 +355,33 @@ function linesOf(block, options, items, floatCount) {
     const spaced = hasEdges && !hasAtomics && !hasOffset && spacersHold(style, items);
     // a first line in fonts of its own is found a piece at a time, in them
     const restyled = options.firstLineStyle !== undefined;
+    // and where one layout makes a line shorter than the strut, its text all
+    // smaller than the block's, the lines are made a piece at a time too,
+    // where every line holds it (`shortOfStrut`)
+    const strut = fonts ? strutOf(fonts, style) : null;
+    // and the first line holds what it is handed besides: a marker's room
+    const firstStrut = withRoom(strut, options.firstStrut);
+    let strutted = false;
     // Inline boxes' edges as spacers in one layout, where the engine left
     // every edge on the line of the content it belongs to (`layoutSpaced`);
     // the lines a piece at a time, below, where it did not.
     if (spaced && !floated && !indent && !alignedApart && !restyled) {
         const laid = layoutSpaced(items, base, style, options.width, lineHeightMul, align, fonts);
-        if (laid)
+        if (laid && !shortOfStrut(laid.lines, strut, firstStrut))
             return laid;
+        if (laid)
+            strutted = true;
     }
     // The text-only, float-free, unindented case: one call, every line — or
     // one call per *chunk*, when the text is long and carries hard breaks.
-    if (!hasAtomics &&
+    fast: if (!hasAtomics &&
         !hasEdges &&
         !raised &&
         !floated &&
         !indent &&
         !alignedApart &&
-        !restyled) {
+        !restyled &&
+        !strutted) {
         // no atomics and no edges, so everything is text
         const textItems = items;
         let total = 0;
@@ -395,7 +407,11 @@ function linesOf(block, options, items, floatCount) {
         if (perLine)
             cut = null;
         if (total > CHUNK_TRIGGER_CHARS && hasNewline && !hasControls(items)) {
-            return layoutChunked(textItems, base, style, options.width, lineHeightMul, align, fonts);
+            const chunked = layoutChunked(textItems, base, style, options.width, lineHeightMul, align, fonts);
+            if (!shortOfStrut(chunked.lines, strut, firstStrut))
+                return chunked;
+            strutted = true;
+            break fast;
         }
         let runs = [];
         let spans = new SpanMap();
@@ -464,6 +480,11 @@ function linesOf(block, options, items, floatCount) {
             : balanced
                 ? unwrappedPlacer(style, options.width, false)
                 : null);
+        // a clamp and a cut are the one layout's to make
+        if (!clamp && !cut && shortOfStrut(lines, strut, firstStrut)) {
+            strutted = true;
+            break fast;
+        }
         return clampCut
             ? { lines, height: layout.height, width: widest, cut: true }
             : { lines, height: layout.height, width: widest };
@@ -509,7 +530,6 @@ function linesOf(block, options, items, floatCount) {
         }
         deferred = [];
     };
-    const strut = fonts ? strutOf(fonts, style) : null;
     // How tall a line is taken to be before it is made, for its room beside
     // the floats: the paragraph's strut, a line of its text. An item taller
     // asks over its own height, and the line made over its whole (`close`).
@@ -544,7 +564,9 @@ function linesOf(block, options, items, floatCount) {
         const line = finishLine(open, y, 
         // the room beside the floats over the whole line box, which an
         // inline-block can make taller than its text (CSS 2.1 9.5)
-        (height) => bandAt(options, y, Math.max(height, guess)), last || !wraps(style) ? lastShift : restShift, rtl, onFirst ? lineOne.strut : strut, onFirst ? lineOne.lifts : lifts, (last || !wraps(style) ? justify.last : justify.rest)
+        (height) => bandAt(options, y, Math.max(height, guess)), last || !wraps(style) ? lastShift : restShift, rtl, lines.length
+            ? strut
+            : withRoom(onFirst ? lineOne.strut : strut, options.firstStrut), onFirst ? lineOne.lifts : lifts, (last || !wraps(style) ? justify.last : justify.rest)
             ? onFirst
                 ? lineOne.justify
                 : lineJustify
@@ -702,6 +724,7 @@ function linesOf(block, options, items, floatCount) {
         // `text-align-last` sets it apart)
         const tailIsPlain = !alignedApart &&
             !onFirst &&
+            !strutted &&
             segment.nextIndex >= items.length &&
             open.x === 0 &&
             !open.atomics.length &&
@@ -722,6 +745,7 @@ function linesOf(block, options, items, floatCount) {
             // the lines past the floats are justified as the lines beside them
             // were (`finishLine`), in the room they have
             layout = justifiedLayout(fonts, segment.runs, base, tailOptions, layout, Math.max(1, available), justify).layout;
+            const tail = [];
             for (let i = 0; i < layout.lines.length; i += 1) {
                 const natural = layout.lines[i];
                 const text = {
@@ -735,7 +759,7 @@ function linesOf(block, options, items, floatCount) {
                     spans: segment.spans,
                 };
                 segment.spans.giveGaps(text, natural.start, natural.end);
-                lines.push({
+                tail.push({
                     x: band.left + natural.x,
                     y: y + natural.y,
                     width: natural.width,
@@ -746,12 +770,19 @@ function linesOf(block, options, items, floatCount) {
                     textEnd: text.textEnd,
                     atomics: [],
                 });
-                widest = Math.max(widest, natural.width);
             }
-            y += layout.height;
-            index = segment.nextIndex;
-            offset = 0;
-            continue;
+            // or a line at a time, where one of them is shorter than the strut
+            if (!shortOfStrut(tail, strut, lines.length ? null : firstStrut)) {
+                for (const line of tail) {
+                    lines.push(line);
+                    widest = Math.max(widest, line.width);
+                }
+                y += layout.height;
+                index = segment.nextIndex;
+                offset = 0;
+                continue;
+            }
+            strutted = true;
         }
         // One line: `maxLines: 1` cuts the layout at the first break and its
         // `truncated` flag answers "did the segment wrap" — so a line costs one
@@ -2365,7 +2396,12 @@ function inlineEdges(box, width, fonts) {
  * a pointer move that gives a link a background (`HtmlViewNode`).
  */
 export function inlineDecoration(fonts, box, s) {
+    // a background is a colour, a gradient or an image: a span a gradient
+    // underlines, a highlighter's, was painted only where it had a border
     const decorated = !isTransparent(s.backgroundColor) ||
+        s.backgroundGradient !== null ||
+        s.backgroundImage !== null ||
+        s.backgroundImages !== null ||
         box.borderTop + box.borderRight + box.borderBottom + box.borderLeft > 0 ||
         s.outlineStyle !== 'none';
     return !decorated ? null : fonts ? faceExtent(fonts, s) : NO_EXTENT;
@@ -2434,10 +2470,27 @@ function firstLineSetting(block, items, how, fonts, strut, justify) {
     const of = (box) => box === block || !box.parent
         ? style
         : styleOnFirstLine(box, of(box.parent), how.styler);
+    // and in its `text-transform` where the line has one of its own, which
+    // the boxes' text was not made with: a word carried from one run into
+    // the next, as the box builder carries it (`letteredAfter`)
+    let lettered = false;
     const restyled = items.map((item) => {
+        if (item.kind === 'atomic')
+            lettered = false;
         if (item.kind !== 'text')
             return item;
-        const run = restyledRun(item.run, item.box.style, of(item.box));
+        const own = item.box.style;
+        const on = of(item.box);
+        let run = restyledRun(item.run, own, on);
+        const transform = on.textTransform;
+        if (!item.control &&
+            transform !== own.textTransform &&
+            transform !== 'none') {
+            const text = transformInPlace(run.text, transform, lettered);
+            if (text !== run.text)
+                run = { ...run, text };
+        }
+        lettered = letteredAfter(run.text, lettered);
         return run === item.run ? item : { ...item, run };
     });
     const lineHeight = lineHeightMultiplier(fonts, style);
@@ -2761,6 +2814,175 @@ function heldText(box) {
     return held;
 }
 const HELD = new WeakMap();
+/**
+ * Whether a line one layout made is shorter about its baseline than the
+ * block's strut. Every line box starts with the strut, the block's font at
+ * its line height (CSS 2.1 10.8.1), and a layout has none: it makes a line
+ * as tall as the text on it, at the block's line height as a multiple of
+ * each face's natural one. So a line of `<small>` text alone came out as
+ * short as the small text, and overlapped what followed. A paragraph with
+ * such a line is made a line at a time instead, where `finishLine` puts
+ * the strut on every line; one whose lines all hold text of the block's
+ * own face is kept as it was laid out.
+ */
+function shortOfStrut(lines, strut, 
+/** The first line's, where it holds more: a marker's room. */
+first = null) {
+    for (let i = 0; i < lines.length; i += 1) {
+        const line = lines[i];
+        const holds = i === 0 && first ? first : strut;
+        if (!holds)
+            continue;
+        if (line.baseline < holds.ascent - 0.5 ||
+            line.height - line.baseline < holds.descent - 0.5) {
+            return true;
+        }
+    }
+    return false;
+}
+/** A strut with room besides it about the same baseline, or the strut
+ *  where there is none. */
+function withRoom(strut, room) {
+    if (!room)
+        return strut;
+    if (!strut)
+        return room;
+    return {
+        ascent: Math.max(strut.ascent, room.ascent),
+        descent: Math.max(strut.descent, room.descent),
+    };
+}
+/** The share of the size a synthesized small capital is set at, rounded to
+ *  a whole pixel as Blink rounds it (`SimpleFontData`'s scaled font data):
+ *  CSS Fonts 4 (6.2) leaves the size to the user agent. */
+const SMALL_CAPS_SCALE = 0.7;
+/**
+ * Small capitals a face does not have, made of its capitals set smaller
+ * (CSS Fonts 4, 6.2): where `font-variant-caps` asks for `smcp` — or
+ * `c2sc` too, for `all-small-caps` — and the face does not answer it,
+ * each letter that would be a small capital is its capital at 70% of the
+ * size, in a run of its own: a lower-case letter, and for `all-small-caps`
+ * the rest of the text too. Under `small-caps` what has no case — a space,
+ * a digit, a mark of punctuation — keeps its size, as Blink keeps it. Only
+ * a letter whose capital is one character is made one, so every offset
+ * holds.
+ */
+function synthesizeSmallCaps(items, fonts) {
+    for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.kind !== 'text' || item.control)
+            continue;
+        // `font-variant-caps`'s, which is synthesized where the face has none;
+        // not `font-feature-settings`', which asks for the feature as it is
+        const caps = item.box.style.fontVariantCaps;
+        const features = item.run.features;
+        if (!caps.includes('smcp') || !features?.smcp)
+            continue;
+        const all = caps.includes('c2sc');
+        if (hasSmallCaps(fonts, item.run, all))
+            continue;
+        const pieces = smallCapsPieces(item, all, withoutCaps(features));
+        if (!pieces)
+            continue;
+        items.splice(i, 1, ...pieces);
+        i += pieces.length - 1;
+    }
+}
+/** A text item cut where its letters turn to synthesized small capitals
+ *  and back, or null where none does. */
+function smallCapsPieces(item, all, features) {
+    const text = item.run.text;
+    const pieces = [];
+    let from = 0;
+    let small = false;
+    let capitals = '';
+    const cut = (to) => {
+        if (to === from)
+            return;
+        const run = small
+            ? {
+                ...item.run,
+                text: capitals,
+                size: Math.round((item.run.size ?? 16) * SMALL_CAPS_SCALE),
+            }
+            : { ...item.run, text: text.slice(from, to) };
+        if (small) {
+            if (features)
+                run.features = features;
+            else
+                delete run.features;
+        }
+        pieces.push({ ...item, run, start: item.start + from, length: to - from });
+        from = to;
+        capitals = '';
+    };
+    let any = false;
+    for (let at = 0; at < text.length;) {
+        const ch = String.fromCodePoint(text.codePointAt(at));
+        const upper = ch.toUpperCase();
+        // everything, for `all-small-caps`: its spaces are small too
+        const becomes = (all || upper !== ch) && upper.length === ch.length;
+        if (becomes !== small) {
+            cut(at);
+            small = becomes;
+        }
+        if (becomes) {
+            capitals += upper;
+            any = true;
+        }
+        at += ch.length;
+    }
+    cut(text.length);
+    return any ? pieces : null;
+}
+/** Features without the small capitals a synthesis stands in for, one
+ *  object for each set, as `featuresOf` keeps them. */
+function withoutCaps(features) {
+    let kept = WITHOUT_CAPS.get(features);
+    if (kept === undefined) {
+        const out = {};
+        for (const [tag, value] of Object.entries(features)) {
+            if (tag !== 'smcp' && tag !== 'c2sc')
+                out[tag] = value;
+        }
+        kept = Object.keys(out).length ? out : null;
+        WITHOUT_CAPS.set(features, kept);
+    }
+    return kept;
+}
+const WITHOUT_CAPS = new WeakMap();
+/**
+ * Whether a run's face has small capitals of its own — and capitals to
+ * small capitals, for `all-small-caps`: the alphabet set with the feature
+ * and without it comes out another width where it does. Asked of the
+ * engine's layout rather than of the font's tables, which a CoreText face
+ * does not hand over. Kept per face.
+ */
+function hasSmallCaps(fonts, run, all) {
+    let known = SMALL_CAPS.get(fonts);
+    if (!known)
+        SMALL_CAPS.set(fonts, (known = new Map()));
+    const key = `${run.family}|${run.weight}|${run.style}|${all}`;
+    let has = known.get(key);
+    if (has === undefined) {
+        const face = {
+            family: run.family,
+            weight: run.weight,
+            style: run.style,
+            size: 16,
+        };
+        const width = (text, features) => fonts.layout([{ text, ...face, ...(features ? { features } : null) }], face, {}).width;
+        const lower = 'abcdefghijklmnopqrstuvwxyz';
+        has = Math.abs(width(lower, { smcp: 1 }) - width(lower, null)) > 0.01;
+        if (has && all) {
+            const upper = lower.toUpperCase();
+            has = Math.abs(width(upper, { c2sc: 1 }) - width(upper, null)) > 0.01;
+        }
+        known.set(key, has);
+    }
+    return has;
+}
+const SMALL_CAPS = new WeakMap();
 /**
  * The OpenType features a style's text is shaped with: the `font-variant`
  * longhands' and `font-kerning`'s, then `font-feature-settings`, which has