Precise Text Positioning

[FrothyFrog]

I'm recently new to Fabric and I find there's one thing that really puzzles me. There doesn't seem to be a clean way of precisely positioning text, but then again it may be that it's just as hard to find good documentation.

The bounding box data returned by a text object using getBoundingRect is clearly off to the point where it can't be used to reliably position the text, based on my understanding. The area (padding?) around the text within the bounding box varies greatly depending on the font size and angle. To precisely site the text you simply can't have a variable amount of space within the bounding box on all four sides of the text. Ideally, it should be a clean cutout, but it's not.

The only thing that seems to give a reliable metric on the text is using getCenterPoint after Left and Top have been set. This does indeed return the center, as opposed to calculating the center based on the data from GetBoundingRect, which should be usable but it falls far from the mark.

Generally, my technique is to find a move-to point and then move the text bounding box from its center to the move-to point. But I can't find any way to do this in Fabric, and I've searched for three days.

What is it I'm I missing, or is this just the way it is? Is there a resource that goes into detail on this?

[ShaMan123]

Please share a reproduction

[FrothyFrog]

Not as easy to do, but I'll get something to you soon.

[asturur]

@FrothyFrog the text in fabric ( and every object ) is positioned by the top left corner of the bounding box.
Fabric was built in a moment in which advanced text apis didn't exist and is not leveraging them yet ( and won't for a while yet ).
So what you get is that the text has a bounding box that is used to accomodate the font, an overline, most of the descendants, an underline. Some fonts are also completely out of the box.

It would be nice if you could explain what you are looking for precise text positioning.
There are some magic numbers that given the top left corner ( or any corner ) can let you figure out where the baseline of the font is, but i have to dig them.

[taarss]

its actual pieces of text

[taarss]

I've looked into the other software that consumes my xml and this is how it draws the text on pdfs
` public override void Draw(PdfGraphics graph, double pageWidth, double pageHeight, PdfDocumentProcessor unused)
{
CoordinateXY location = RotateText(graph, OriginCalc(pageWidth, pageHeight));

        PointF p = new PointF((float)location.X, (float)location.Y);

        graph.DrawString(Text, Font, PenBrush, p, Format);
        graph.RestoreGraphicsState();
    }`

[asturur]

I checked my old code and it was converting text to path and then add the path to PDF.
The conversion of the path was done with openFont.js that does not know anything about fabric, and then the path was added in the pdf at the text top/left. And it was matching just fine.

this is what i was doing on the PDF;

  fabric.EditorTextBox.prototype.renderPdfKit = async function (pdfDoc, artboard) {
    pdfDoc.save();
    this.transformPdf(pdfDoc); // transformPDF is adding the transformMatrix of the text to the pdf, this is important.
    let lineHeights = 0;
    const left = this._getLeftOffset(); 
    const top = this._getTopOffset();
    this.renderPdfTextLinesBackground(pdfDoc, left, top);
    for (let i = 0, len = this._textLines.length; i < len; i++) { // text is rendered line by line
      const heightOfLine = this.getHeightOfLine(i);
      const maxHeight = heightOfLine / this.lineHeight;
      const leftOffset = this._getLineLeftOffset(i);
      this.renderTextDecorationPdf(pdfDoc, artboard, 'underline', 'stroke');
      this.renderTextDecorationPdf(pdfDoc, artboard, 'underline', 'fill');
      await this.renderLineAndBullet(
        artboard,
        pdfDoc,
        this._textLines[i],
        left + leftOffset,
        top + lineHeights + maxHeight,
        i,
      );
      this.renderTextDecorationPdf(pdfDoc, artboard, 'linethrough', 'fill');
      lineHeights += heightOfLine;
    }
    pdfDoc.restore();
  };

So as long as you are using the same transformation logic of fabricJS and are rendering the text line by line you should be ok

[taarss]

Okay im not sure i quite understand this solution.
I cant really change how i render the text on the pdf due to maintaining backwords compatability.
I must simply just get the correct coordinates of a text element when im converting all of elements to xml.
Would i be able to use openFont.js to get the correct coordinates that the text will be rendered at?
If so could calculate the offset that i need to shift my coordinates by like this.
Offset = fabricTextElementCoordinates - pdfRenderedCoordinates

That would solve my problem.

[asturur]

You don't have to use openFont, openFont is just a sort of proof that left and top from fabricJS are good enough.

        PointF p = new PointF((float)location.X, (float)location.Y);

        graph.DrawString(Text, Font, PenBrush, p, Format);
        graph.RestoreGraphicsState();

instead of render the text at location x and y, you should try to see if your pdf library support canvas transformation with a matrix and then render text at locations described by the code i sent you.
That would mean that you have to export all the returned values of getHeightOfLine(), getLineOffset() for every string of text in your XML and the text object transformMatrix.