rapier-markdown-kit 1.1.62 → 1.1.63

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,16 @@
 
 // `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']);
+export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent']);
 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,6 +22,7 @@ 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')) &&
@@ -59,6 +63,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 +82,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 +93,13 @@ 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);
   }
+  if (value.lines != null) parts.push('width:auto;max-width:100%;height:' + linesHeightCss(value.lines));
   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.63",
   "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",