PDF Export - Reduce the spacing between questions

JavaScript
import React from "react";
import { ElementFactory, Question, Serializer, SvgRegistry } from "survey-core";
import { localization, PropertyGridEditorCollection } from "survey-creator-core";
import { EmptyBrick, FlatQuestion, FlatRepository, IPoint, IRect, PdfBrick, TextBrick } from "survey-pdf";
import {
    ReactQuestionFactory,
    SurveyQuestionElementBase
} from "survey-react-ui";

const CUSTOM_TYPE = "clause";
class FlatClause extends FlatQuestion {
    async generateFlatsContent(point: IRect): Promise<PdfBrick[]> {
        const rect = { ...point };
        rect.yBot = point.yTop;
        rect.xRight = point.xLeft + 100;
        return [];
    }
}

FlatRepository.register(CUSTOM_TYPE, FlatClause);
// Create a question model
export class QuestionClauseModel extends Question {
    getType() {
        return CUSTOM_TYPE;
    }
}

// Register the custom "clause" question type
export function registerClause() {
    ReactQuestionFactory.Instance.registerQuestion(CUSTOM_TYPE, (props) => {
        return React.createElement(SurveyQuestionClause, props);
    });

    ElementFactory.Instance.registerElement(
        CUSTOM_TYPE,
        (name) => {
            return new QuestionClauseModel(name);
        },
        true
    );

    // Register `clause` as an editor for properties in the Survey Creator's Property Grid
    PropertyGridEditorCollection.register({
        fit: function (prop) {
            return prop.type === CUSTOM_TYPE;
        },
        getJSON: function () {
            return { type: CUSTOM_TYPE };
        }
    });
}
const locale = localization.getLocale("");
locale.qt[CUSTOM_TYPE] = "Clause";

// Register an SVG icon for the question type
SvgRegistry.registerIconFromSvg(
    CUSTOM_TYPE,
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="#7c7c7c" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-signature"><path d="m21 17-2.156-1.868A.5.5 0 0 0 18 15.5v.5a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1c0-2.545-3.991-3.97-8.5-4a1 1 0 0 0 0 5c4.153 0 4.745-11.295 5.708-13.5a2.5 2.5 0 1 1 3.31 3.284"/><path d="M3 21h18"/></svg>'
);

// Add question type metadata for further serialization into JSON
Serializer.addClass(
    CUSTOM_TYPE,
    [],
    function () {
        return new QuestionClauseModel("");
    },
    "question"
);

// Create a class that renders the clause
export class SurveyQuestionClause extends SurveyQuestionElementBase {
    constructor(props: any) {
        super(props);
    }

    get question() {
        return this.questionBase;
    }

    renderElement() {
        return null;
    }
}

// Remember to call registerClause() somewhere in your application startup

JSON
{
  "title": "Individual employment agreement - Spotlight",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "clause",
          "name": "question1",
          "title": "<p>This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause This is a clause </p>"
        },
        {
          "type": "clause",
          "name": "question2",
          "title": "<p>This is a clause</p>"
        },
        {
          "type": "clause",
          "name": "question4",
          "title": "<p>Question Title</p>"
        },
        {
          "type": "clause",
          "name": "question3",
          "title": "<p>Question Title</p>"
        }
      ]
    }
  ],
  "code": "DEA"
}

as you can see here the lower 3 have perfect bottom spacing but if you increase the character size of the title shown in question 1 the gap returns these are not titlebricks anymore the are html bricks due to the title being encased in <p> tags

Hi Miriam,
Thank you for sharing this code. I may need additional time to create a demo and test it on my end. Please stay tuned.

Hello Miriam,
Please accept my apologies for the delayed reply. To reduce the gap which remains when an input field is not rendered, please follow the previous recommendation and set the _yBot property to 0 at the level of a custom brick:

JavaScript
class CustomPdfBrick extends PdfBrick {
  setYBottom(val) {
    this._yBot = 0;
  }
}

class FlatClause extends FlatQuestion {
  async generateFlatsContent(point: IRect): Promise<PdfBrick[]> {
    const rect = { ...point };
    rect.yBot = point.yTop;
    rect.xRight = point.xLeft + 100;
    return [new CustomPdfBrick(this.question, this.controller, rect)];
  }
}

View Demo

Let me know if this option works for you. Additionally, please clarify whether you intentionally render unformatted HTML tags within question titles? Take note that you can convert Markdown to HTML by registering a Markdown text processor for your Form Library and PDF: View Demo.
Let me know if you require further assistance processing the Markdown text.

Thanks