better docx
Usage

Text Box

Similar Text Frames, but the difference being that it is VML Shape based.

Text Boxes requires an understanding of Paragraphs.

Text boxes are paragraphs of text in a document which are positioned in a separate region or frame in the document, and can be positioned with a specific size and position relative to non-frame paragraphs in the current document.

Intro

To make a Text Box, simply create a Textbox object inside the Document:

new Textbox({
    alignment: "center",
    children: [
        new Paragraph({
            children: [new TextRun("Hi i'm a textbox!")],
        }),
    ],
    style: {
        width: "200pt",
        height: "auto",
    },
});

Paragraph Options

Besides style, a Textbox accepts all Paragraph options (alignment, spacing, indent, numbering, etc.). These are applied to the paragraph that anchors the text box in the document flow. For example, alignment: "center" in the example above centers the box on the page.

Style Options

The style object describes the VML shape itself. width is required; all other properties are optional.

Length values (LengthUnit) can be a number, a measurement string such as "200pt" or "50%", or "auto".

OptionTypeDescription
widthLengthUnitWidth of the shape's containing block. Required.
heightLengthUnitHeight of the shape's containing block.
position"static" | "absolute" | "relative"Type of positioning used to place the shape. Default is static.
leftLengthUnitPosition of the left edge relative to the element left of it in the page flow. Not for inline-anchored shapes.
topLengthUnitPosition of the top edge relative to the element above it in the page flow. Not for inline-anchored shapes.
rotationnumberAngle the shape is rotated, in degrees. Positive angles are clockwise.
flip"x" | "y" | "xy" | "yx"Flips the orientation of the shape.
zIndex"auto" | numberDisplay order of overlapping shapes. Not for inline-anchored shapes.
visibility"hidden" | "inherit"Whether the shape is displayed. Default is inherit.
positionHorizontal"absolute" | "left" | "center" | "right" | "inside" | "outside"Horizontal positioning of the shape. Default is absolute.
positionHorizontalRelative"margin" | "page" | "text" | "char"What positionHorizontal is relative to. Default is text.
positionVertical"absolute" | "left" | "center" | "right" | "inside" | "outside"Vertical positioning of the shape. Default is absolute.
positionVerticalRelative"margin" | "page" | "text" | "char"What positionVertical is relative to. Default is text.
marginLeftLengthUnitPosition of the left of the containing block relative to the shape anchor.
marginRightLengthUnitPosition of the right of the containing block relative to the shape anchor.
marginTopLengthUnitPosition of the top of the containing block relative to the shape anchor.
marginBottomLengthUnitPosition of the bottom of the containing block relative to the shape anchor.
wrapStyle"square" | "none"Wrapping mode for text around the shape. Default is square.
wrapDistanceLeftnumberDistance in points from the left side of the shape to the wrapping text.
wrapDistanceRightnumberDistance in points from the right side of the shape to the wrapping text.
wrapDistanceTopnumberDistance in points from the top of the shape to the wrapping text.
wrapDistanceBottomnumberDistance in points from the bottom of the shape to the wrapping text.
wrapEditedbooleanWhether the wrap coordinates were customized by the user. Default is false.

Positioned and rotated example

new Textbox({
    children: [
        new Paragraph({
            children: [new TextRun("I float above the page!")],
        }),
    ],
    style: {
        width: "150pt",
        height: "50pt",
        position: "absolute",
        left: "100pt",
        top: "40pt",
        rotation: 15,
        zIndex: 10,
        wrapStyle: "none",
    },
});

On this page