jsPDF TextBox

Rich text boxes for jsPDF.

This library lets you:

• Add rich text to your jsPDF documents, using a syntax similar to Markdown.
• Create text boxes with horizontal/vertical overflow control, and page breaks.
• Compute text boxes dimensions, useful to arrange other document elements relative to the text (like backgrounds).

Usage

Install

npm i @gquagliano/jspdf-textbox

Usage

import  jsPDF  from  "jspdf";
import textBox from "@gquagliano/jspdf-textbox";

let doc = new jsPDF();

let myTextBox = new textBox(doc, "**Hello** World", {
	//options
});

//In case you need the text box dimensions before actually drawing it:
//myTextBox.pages - Number of pages used up by the text box
//myTextBox.finalY - Final Y position (last page)
//myTextBox.finalHeight - Height of the text box (last page)

myTextBox.draw();

Supported formats

• **bold**
• *italic*
• ***bold italic***
• _underlined_
• # Heading 1 (block)
• ## Heading 2 (block)
• > Centered paragraph (block)
• >> Right-aligned paragraph (block)
• <> Justified paragraph (block)
• Fill with spaces in between (four spaces, only if the box/block is justified)
• < Left-aligned paragraph (block)
• ^ Small text (block)
• Escape character: \

Note: "block" means that the token formats whole lines (until line break or end of input), and it must be located at the begining of the line.

Note: You can use one single escape character in front of a string of all the same character, for example: \_______ will print the entire line _______ instead of escaping just the first underscore.

Options

|Option|Description|Default value| |--|--|--| |startY|Initial Y position.|Top margin.| |margin|Page margins as a number (all margins will be equal), or as an object {top, bottom, left, right}|0| |width|Width of the text box|Page width minus margins.| |baseline|Baseline option for the jsPDF text() function (see jsPDF docs)|top| |numLines|Limit the number of lines to be drawn.|| |maxHeight|Maximum height. This will disable page breaks even if the value is greater than the available space in the page.|| |ellipsis|Wether or not to add ellipsis if the text overflows the box.|false| |lineBreak|false, lines won't break unless a \n is found.|true| |pageBreak|Wether or not to add new pages if necessary.|true| |textAlign|Text align, as "left", "right", "center", "justify", "justify-right" or "justify-center".|left| |styles|Styles for the different elements. See below.||

Styles

Only a couple of styles are supported so far.

|Property|Description|Default| |--|--|--| |h1|Heading 1|bold = true, fontSize 175% of default text size| |h2|Heading 2|bold = true, fontSize 145% of default text size| |p|Default text style|| |small|Default small text style|fontSize 85% of default text size|

Supported styles:

• fontSize
• bold (boolean)
• italic (boolean)
• underline (boolean)
• marginBottom
• lineHeight (line height factor)

Note: Paragraph style will be the document's text style at the moment of drawing. Font face, size and leading should not change between the textBox instance creation and the execution of draw().

Note: Styles reset for each block/paragraph.

TODO

1. Add more formatting tokens, including colors, links and images--or full Markdown support.
2. Add validations & friendly error messages.
3. Columns.
4. Hyphenate.
5. Position the box relative to the bottom margin of the page.
6. Test! The current version is a work in progress, use it at your own risk.