Properly handle margin-left and margin-right specified on the input elements.

ts/output/common/Wrapper.ts

@@ -104,6 +104,7 @@ export const SPACE: StringMap = {
  * Padding and border data from the style attribute
  */
 export type StyleData = {
+  margin: [number, number, number, number];
   padding: [number, number, number, number];
   border: {
     width: [number, number, number, number];
@@ -596,9 +597,10 @@ export class CommonWrapper<
     if (!this.styleData) return bbox;
     const padding = this.styleData.padding;
     const border = this.styleData.border?.width || [0, 0, 0, 0];
+    const margin = this.styleData.margin || [0, 0, 0, 0];
     const obox = bbox.copy();
     for (const [, i, side] of BBox.boxSides) {
-      (obox as any)[side] += padding[i] + border[i];
+      (obox as any)[side] += padding[i] + border[i] + margin[i];
     }
     return obox;
   }
@@ -741,35 +743,40 @@ export class CommonWrapper<
     return cbox;
   }
 
+  /**
+   * @param {number} n   The side number (0 to 3) whose size is needed
+   * @returns {number}   The side's size in ems
+   */
+  protected sideStyleSize(n: number): number {
+    const border = this.styleData.border;
+    const padding = this.styleData.padding;
+    const margin = this.styleData.margin;
+    return (border?.width?.[n] || 0) + (padding?.[n] || 0) + (margin?.[n] || 0);
+  }
+
   /**
    * @param {BBox} bbox   The bounding box where left borders are to be added
    */
   protected addLeftBorders(bbox: BBox) {
     if (!this.styleData) return;
-    const border = this.styleData.border;
-    const padding = this.styleData.padding;
-    bbox.w += (border?.width?.[3] || 0) + (padding?.[3] || 0);
+    bbox.w += this.sideStyleSize(3);
   }
 
   /**
    * @param {BBox} bbox   The bounding box where top and bottom borders are to be added
    */
   protected addMiddleBorders(bbox: BBox) {
     if (!this.styleData) return;
-    const border = this.styleData.border;
-    const padding = this.styleData.padding;
-    bbox.h += (border?.width?.[0] || 0) + (padding?.[0] || 0);
-    bbox.d += (border?.width?.[2] || 0) + (padding?.[2] || 0);
+    bbox.h += this.sideStyleSize(0);
+    bbox.d += this.sideStyleSize(2);
   }
 
   /**
    * @param {BBox} bbox   The bounding box where right borders are to be added
    */
   protected addRightBorders(bbox: BBox) {
     if (!this.styleData) return;
-    const border = this.styleData.border;
-    const padding = this.styleData.padding;
-    bbox.w += (border?.width?.[1] || 0) + (padding?.[1] || 0);
+    bbox.w += this.sideStyleSize(1);
   }
 
   /**
@@ -875,11 +882,13 @@ export class CommonWrapper<
   protected getStyleData() {
     if (!this.styles) return;
     const padding = Array(4).fill(0);
+    const margin = Array(4).fill(0);
     const width = Array(4).fill(0);
     const style = Array(4);
     const color = Array(4);
     let hasPadding = false;
     let hasBorder = false;
+    let hasMargin = false;
     for (const [name, i] of BBox.boxSides) {
       const key = 'border' + name;
       const w = this.styles.get(key + 'Width');
@@ -894,11 +903,17 @@ export class CommonWrapper<
         hasPadding = true;
         padding[i] = Math.max(0, this.length2em(p, 1));
       }
+      const m = this.styles.get('margin' + name);
+      if (m) {
+        hasMargin = true;
+        margin[i] = this.length2em(m, 1);
+      }
     }
     this.styleData =
-      hasPadding || hasBorder
+      hasPadding || hasBorder || hasMargin
         ? ({
             padding,
+            margin,
             border: hasBorder ? { width, style, color } : null,
           } as StyleData)
         : null;

ts/output/svg/Wrapper.ts

@@ -239,7 +239,7 @@ export class SvgWrapper<N, T, D> extends CommonWrapper<
    * @param {N[]} parents   The HTML nodes in which the output is to be placed
    * @returns {N[]}          The roots of the HTML tree for the node's output
    */
-  protected handleHref(parents: N[]) {
+  protected handleHref(parents: N[]): N[] {
     const href = this.node.attributes.get('href');
     if (!href) return parents;
     let i = 0;
@@ -278,10 +278,17 @@ export class SvgWrapper<N, T, D> extends CommonWrapper<
       );
     }
     const padding = (this.styleData?.padding || [0, 0, 0, 0])[3];
+    const margin = (this.styleData?.margin || [0, 0, 0, 0])[3];
     const border = (this.styleData?.border?.width || [0, 0, 0, 0])[3];
     if (padding || border) {
       this.dx = padding + border;
     }
+    if (margin) {
+      const transform = `translate(${this.fixed(margin)},0)`;
+      this.dom.forEach((node) =>
+        this.adaptor.setAttribute(node, 'transform', transform)
+      );
+    }
   }
 
   /**
@@ -346,6 +353,7 @@ export class SvgWrapper<N, T, D> extends CommonWrapper<
   protected handleBorder() {
     const border = this.styleData?.border;
     if (!border) return;
+    const margin = this.styleData?.margin ?? [0, 0, 0, 0];
     const f = SvgWrapper.borderFuzz;
     const adaptor = this.adaptor;
     let k = 0;
@@ -355,7 +363,9 @@ export class SvgWrapper<N, T, D> extends CommonWrapper<
       const L = !n || !k ? 1 : 0;
       const R = !n || k === n ? 1 : 0;
       const bbox = isEmbellished ? this.getOuterBBox() : this.getLineBBox(k++);
-      const [h, d, w] = [bbox.h + f, bbox.d + f, bbox.w + f];
+      const h = bbox.h - margin[0] + f;
+      const d = bbox.d - margin[2] + f;
+      const w = bbox.w - margin[1] - margin[3] + f;
       const outerRT = [w, h];
       const outerLT = [-f, h];
       const outerRB = [w, -d];