rapier-markdown-kit 1.1.62 → 1.1.64

package/dist/kit/render.mjs

@@ -579,6 +579,10 @@ function _rapierSharedPageLayout(root) {
 				image.style.width = naturalWidth + 'px';
 				image.style.marginLeft = image.style.marginRight = ((bounds.width - naturalWidth) / 2) + 'px';
 			}
+		} else if (layout.lines != null) {
+			// Sized in lines: the float shrinks to the picture, whose height is the lines (spec/md-layout.mjs imageStyle).
+			image.style.width = 'auto';
+			image.style.height = globalThis.RapierMarkdownLayout.linesHeightCss(layout.lines);
 		} else {
 			if (layout.width != null) paragraph.style.width = layout.width + '%';
 			else if (image.getAttribute('width')) paragraph.style.width = image.getAttribute('width') + 'px';
@@ -1308,7 +1312,9 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
 
         let ownerLed = false;
         for (const {element: source, image, layout, width: imageWidth} of anchors.get(element) || []) {
-          const unrotated = geometry.imageBox(width, image.naturalWidth, image.naturalHeight, layout, imageWidth);
+          // A picture sized in lines (`lines`) reads its anchor's line and stands on the first line's cap height, as the live editor.
+          const lines = layout.lines != null ? geometry.lineMetrics(element) : null;
+          const unrotated = geometry.imageBox(width, image.naturalWidth, image.naturalHeight, layout, imageWidth, lines);
           if (!unrotated) { restore(); return; }
           // rasterReserved (layout/model.mjs).
           const rasterRad = (layout.rotate || 0) * Math.PI / 180;
@@ -1319,7 +1325,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
           const em = parseFloat(computed.fontSize) || 16;
           const topInset = (parseFloat(computed.paddingTop) || 0) + (parseFloat(computed.borderTopWidth) || 0);
           const height = Math.max(0, bounds.height - topInset - (parseFloat(computed.paddingBottom) || 0) - (parseFloat(computed.borderBottomWidth) || 0));
-          let y = bounds.top - origin + topInset + Math.min(layout.y || 0, height / em) * em;
+          let y = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
           if (!outOfFlow(layout)) {
             for (const obstacle of [...obstacles].sort((left, right) => left.y - right.y)) {
               if (obstacle.x < left + rectangle.width + 10 && obstacle.x + obstacle.width > left - 10 &&
@@ -1327,14 +1333,14 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, pretext) {
                 y = obstacle.y + obstacle.height + 10;
             }
             // R87k: a picture pushed down by an earlier one takes its owner with it. A deliberate `y` stays; only the collision push moves the paragraph.
-            const ownerTop = bounds.top - origin + topInset + Math.min(layout.y || 0, height / em) * em;
+            const ownerTop = bounds.top - origin + topInset + geometry.linesTop(layout, lines) + Math.min(layout.y || 0, height / em) * em;
             // Only the first picture of an owner takes it down.
             if (!ownerLed && y > ownerTop + 0.5) {
               clearTo(element, (bounds.top - origin) + (y - ownerTop), origin, source);
               bounds = box(element);
             }
             ownerLed = true;
-            obstacles.push(...geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height));
+            obstacles.push(...geometry.linesSlices(geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height), layout, lines, y, rectangle.height));
           }
           placed.push({source, image, rectangle, left, y, wrap: layout.wrap,
             visualLeft: left + visualDeltaX, visualTop: y + visualDeltaY, visualWidth: fit.fit.width, visualHeight: fit.fit.height,

package/dist/layout/model.mjs

@@ -82,10 +82,54 @@ export function mapFragment(run, fragment) {
   return {text: fragment.text, offsets, start: run.offsets[from], end: run.offsets[to]};
 }
 
-export function imageBox(columnWidth, naturalWidth, naturalHeight, layout = {}, defaultWidth = naturalWidth) {
+// The line a picture is measured in (`lines`, spec/md-layout.mjs): the anchor's line box, its type's cap height, and where that
+// cap height stands in the first line box (the half-leading model: the baseline sits half the leading below the box's top plus
+// the ascent). Read from the font as the page lays it out, so a text size or a line spacing moves the picture with the words.
+const fontMetrics = new Map(), measurers = new WeakMap();
+export function lineMetrics(element) {
+  const view = element?.ownerDocument?.defaultView;
+  if (!view) return null;
+  const computed = view.getComputedStyle(element), size = parseFloat(computed.fontSize) || 16;
+  const font = computed.fontStyle + ' ' + computed.fontWeight + ' ' + size + 'px ' + computed.fontFamily;
+  let metrics = fontMetrics.get(font);
+  if (!metrics) {
+    let context = measurers.get(element.ownerDocument);
+    if (!context) measurers.set(element.ownerDocument, context = element.ownerDocument.createElement('canvas').getContext('2d'));
+    if (!context) return null;
+    context.font = font;
+    const capital = context.measureText('H');
+    metrics = {ascent: capital.fontBoundingBoxAscent, descent: capital.fontBoundingBoxDescent, cap: capital.actualBoundingBoxAscent};
+    if (![metrics.ascent, metrics.descent, metrics.cap].every(finite) || !(metrics.cap > 0)) return null;
+    // A face still loading measures as its fallback: keep the answer only once the face is in.
+    if (element.ownerDocument.fonts?.check?.(font) !== false && element.ownerDocument.fonts?.status !== 'loading') fontMetrics.set(font, metrics);
+  }
+  const line = parseFloat(computed.lineHeight) || metrics.ascent + metrics.descent;
+  return {line, cap: metrics.cap, capTop: (line - metrics.ascent - metrics.descent) / 2 + metrics.ascent - metrics.cap};
+}
+
+// `lines` tall: from the first line's cap height to the Nth line's baseline, N - 1 lines and one cap.
+export function linesHeight(lines, metrics) {
+  const height = Number.isInteger(lines) && lines > 0 && metrics && finite(metrics.line) && finite(metrics.cap)
+    ? (lines - 1) * metrics.line + metrics.cap : NaN;
+  return height > 0 ? height : null;
+}
+
+// A picture sized in lines keeps its standoff off the line after its last: below its foot (the Nth baseline) the gap stops
+// at that line's bottom, so exactly N lines stand beside it.
+export function linesSlices(slices, layout, metrics, y, height) {
+  if (layout?.lines == null || !metrics || !(slices?.length)) return slices;
+  const floor = y + height + Math.max(0, metrics.line - metrics.capTop - metrics.cap) - .5;
+  return slices.filter(slice => slice.y < floor).map(slice => slice.y + slice.height > floor ? {...slice, height: floor - slice.y} : slice);
+}
+
+// Where a picture's top stands in its anchor before `y`: a picture sized in lines stands on the first line's cap height.
+export const linesTop = (layout, metrics) => layout?.lines != null && finite(metrics?.capTop) ? metrics.capTop : 0;
+
+export function imageBox(columnWidth, naturalWidth, naturalHeight, layout = {}, defaultWidth = naturalWidth, metrics = null) {
   if (![columnWidth, naturalWidth, naturalHeight, defaultWidth].every(value => finite(value) && value > 0) ||
       !validLayout(layout) || layout.align === 'justify') return null;
-  const requestedWidth = layout.width == null ? defaultWidth : columnWidth * layout.width / 100;
+  const tall = layout.lines == null ? null : linesHeight(layout.lines, metrics);
+  const requestedWidth = tall ? tall * naturalWidth / naturalHeight : layout.width == null ? defaultWidth : columnWidth * layout.width / 100;
   if (!finite(requestedWidth) || requestedWidth <= 0) return null;
   const width = Math.min(columnWidth, requestedWidth), height = width * naturalHeight / naturalWidth;
   const center = layout.x == null ? width / 2 : columnWidth * layout.x / 100;

package/dist/spec/md-layout.mjs

@@ -2,13 +2,18 @@
 
 // `rotate`: degrees in (-180, 180], one decimal, omitted when 0; never written for a Rapier drawing (its turn lives in its SVG).
 // `opacity`: a picture's fade, a whole percent from 5 to 100, omitted at 100; the picture's bytes never change.
+// `lines`: a picture's height in lines of the text beside it, set as a drop cap is (CSS `initial-letter`): its top on the first
+// line's cap height, its foot on the Nth line's baseline, its width from its own aspect. A whole number 1 to 12; never with `width`.
 // `first`/`indent`: a paragraph's first-line indent and its whole-block indent, in levels of one step (2em), a whole number from 1 to 4, omitted when 0; text only.
-export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent']);
+// `lock=on`: a picture locked in place (the founder, 5 October): a tap goes to the words, never the picture; a hold takes it
+// to unlock it. Omitted when off.
+export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'lock']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
 // `behind`/`front`: out of flow; the paragraph lays out as though the picture were absent.
 export const wraps = new Set(['around', 'box', 'behind', 'front']);
 const has = (value, key) => Object.hasOwn(value, key);
 const percent = value => typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= 100;
+const lineCount = value => Number.isInteger(value) && value >= 1 && value <= 12;
 const level = value => Number.isInteger(value) && value >= 1 && value <= 4;
 const oneDecimalDegrees = value => typeof value === 'number' && Number.isFinite(value) &&
   value > -180 && value <= 180 && Math.abs(value * 10 - Math.round(value * 10)) < 1e-9;
@@ -19,12 +24,14 @@ export function validLayout(value) {
       Object.keys(value).some(key => !fields.has(key))) return false;
   return (!has(value, 'align') || alignments.has(value.align)) &&
     (!has(value, 'width') || percent(value.width) && value.width > 0) &&
+    (!has(value, 'lines') || lineCount(value.lines) && !has(value, 'width')) &&
     (!has(value, 'wrap') || wraps.has(value.wrap)) &&
     (!has(value, 'x') || percent(value.x) && (has(value, 'wrap') || has(value, 'width'))) &&
     (!has(value, 'y') || typeof value.y === 'number' && Number.isFinite(value.y) && value.y >= -50 && has(value, 'wrap')) &&
     (!has(value, 'rotate') || oneDecimalDegrees(value.rotate)) &&
     (!has(value, 'opacity') || Number.isInteger(value.opacity) && value.opacity >= 5 && value.opacity <= 100) &&
     (!has(value, 'first') || level(value.first)) && (!has(value, 'indent') || level(value.indent)) &&
+    (!has(value, 'lock') || value.lock === 'on') &&
     !(has(value, 'align') && (has(value, 'wrap') || has(value, 'x')));
 }
 
@@ -59,6 +66,9 @@ export function parseLayout(comment) {
     } else if (key === 'opacity') {
       if (!/^[1-9]\d{0,2}%$/.test(raw)) return null;
       value.opacity = Number(raw.slice(0, -1));
+    } else if (key === 'lines') {
+      if (!/^[1-9]\d?$/.test(raw)) return null;
+      value.lines = Number(raw);
     } else if (key === 'first' || key === 'indent') {
       if (!/^[1-4]$/.test(raw)) return null;
       value[key] = Number(raw);
@@ -75,7 +85,8 @@ export function decodeLayoutAttribute(value) {
 
 export const parseLayoutAttribute = value => parseLayout(decodeLayoutAttribute(value));
 
-// The picture's own CSS: its normal-flow width and x, and its fade.
+// The picture's own CSS: its normal-flow width and x, its height in lines, and its fade. `1cap` is the cap height of the
+// picture's own text; a renderer that sets the picture beside its anchor measures that paragraph's line and cap instead.
 export function imageStyle(value) {
   if (!validLayout(value)) return '';
   const parts = [];
@@ -85,10 +96,14 @@ export function imageStyle(value) {
       decimal(Number(Math.max(0, Math.min(100 - width, value.x - width / 2)).toFixed(6))) + '%;margin-right:0';
     parts.push('width:' + decimal(width) + '%;height:auto' + left);
   }
+  // Wider than the column at its own aspect, it is contained in the N-line box, never stretched.
+  if (value.lines != null) parts.push('width:auto;max-width:100%;height:' + linesHeightCss(value.lines) + ';object-fit:contain');
   if (value.opacity != null && value.opacity < 100) parts.push('opacity:' + decimal(value.opacity / 100));
   return parts.join(';');
 }
 
+export const linesHeightCss = lines => lines === 1 ? '1cap' : 'calc(' + (lines - 1) + ' * var(--md-line, 1.6em) + 1cap)';
+
 // Controls remain real DOM nodes while their surrounding text flows. A checkbox, link or
 // disclosure is not a reason to exclude its entire block from picture placement.
 export function wrapTextBlock(element) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.62",
+  "version": "1.1.64",
   "description": "Read, render, write and style Self-contained Markdown, and carry its optional edit ledger: the shared HTML writer, semantic renderer, stylesheet, layout, marks, pictures, Will/1, replay, authorship and offline merge. MIT, no npm dependencies.",
   "keywords": [
     "markdown",

package/style.css

@@ -367,7 +367,7 @@
 .md-render h1,.md-render h2,.md-render h3,.md-render h4,.md-render h5,.md-render h6{
 	font-family:var(--md-font-sans);letter-spacing:-0.01em;
 	line-height:var(--md-line);margin:0 0 calc(var(--md-line) / 2);color:var(--md-heading-color);text-wrap:balance}
-.md-render h1{font-size:calc(var(--md-text-body) * 2.4);line-height:calc(var(--md-line) * 2);font-weight:700}
+.md-render h1{font-size:calc(var(--md-text-body) * 2.7);line-height:calc(var(--md-line) * 2);font-weight:620}
 .md-render h2{font-size:calc(var(--md-text-body) * 1.9);line-height:calc(var(--md-line) * 1.5);font-weight:600}
 .md-render h3{font-size:calc(var(--md-text-body) * 1.5);line-height:calc(var(--md-line) * 1.5);font-weight:600}
 .md-render h4{font-size:calc(var(--md-text-body) * 1.25);font-weight:500}
@@ -577,7 +577,7 @@
 	background:var(--md-color-inset);border:1px solid var(--md-color-border);padding:1px 5px}
 .md-render pre{margin:0 0 var(--md-line);padding:var(--md-space-3) var(--md-space-4);
 	background:var(--md-color-surface-2);border:1px solid var(--md-color-border);overflow-x:auto}
-.md-render pre code{background:none;border:none;padding:0;font-size:0.8125rem;line-height:calc(var(--md-line) * .75)}
+.md-render pre code{background:none;border:none;padding:0;font-size:calc(var(--md-text-body) * 0.7386);line-height:calc(var(--md-line) * .75)}
 .md-render .math-display-wrap{
 	display:block;
 	max-width:100%;
@@ -784,11 +784,18 @@
 .rapier-ink-layer svg{position:absolute;display:block;margin:0;padding:0;overflow:visible}
 .rapier-ink-layer path{fill:light-dark(var(--md-ink),var(--md-ink-dark));stroke:none;opacity:.92}
 @media print{.rapier-ink-layer path{fill:var(--md-ink)}}
-.md-render [data-md-color="#1c7547"]{--md-color-dark:#70c390}
 .md-render [data-md-color="#b32034"]{--md-color-dark:#ff8385}
-.md-render [data-md-color="#175dc4"]{--md-color-dark:#7bafff}
+.md-render [data-md-color="#c2410c"]{--md-color-dark:#fb923c}
 .md-render [data-md-color="#865818"]{--md-color-dark:#d6a367}
+.md-render [data-md-color="#4d7c0f"]{--md-color-dark:#a3cf5c}
+.md-render [data-md-color="#1c7547"]{--md-color-dark:#70c390}
+.md-render [data-md-color="#0f766e"]{--md-color-dark:#5eead4}
+.md-render [data-md-color="#0369a1"]{--md-color-dark:#7dd3fc}
+.md-render [data-md-color="#175dc4"]{--md-color-dark:#7bafff}
+.md-render [data-md-color="#4338ca"]{--md-color-dark:#a5b4fc}
 .md-render [data-md-color="#7924d7"]{--md-color-dark:#ba97ff}
+.md-render [data-md-color="#be185d"]{--md-color-dark:#f9a8d4}
+.md-render [data-md-color="#57606a"]{--md-color-dark:#aab1bb}
 .md-render abbr[title]{text-decoration:underline dotted;text-decoration-color:var(--md-color-text-muted);text-underline-offset:2px;cursor:help}
 .md-render ins{text-decoration:underline;color:var(--md-color-success)}
 /* The document owns its selection accent, including on an exported page. */