Skip to main content

Text

Text shapes can be added to Slides.

Usage#

slide.addText([{ text: "TEXT", options: { OPTIONS } }]);

Properties#

Position/Size Props (PositionProps)#

NameTypeDefaultDescriptionPossible Values
xnumber1.0hor location (inches)0-n
xstringhor location (percent)'n%'. (Ex: {x:'50%'} middle of the Slide)
ynumber1.0ver location (inches)0-n
ystringver location (percent)'n%'. (Ex: {y:'50%'} middle of the Slide)
wnumber1.0width (inches)0-n
wstringwidth (percent)'n%'. (Ex: {w:'50%'} 50% the Slide width)
hnumber1.0height (inches)0-n
hstringheight (percent)'n%'. (Ex: {h:'50%'} 50% the Slide height)

Base Properties (TextPropsOptions)#

OptionTypeUnitDefaultDescriptionPossible Values
alignstringleftalignmentleft or center or right
autoFitbooleanfalse"Fit to Shape"true or false
baselinenumberpointstext baseline value0-256
boldbooleanfalsebold texttrue or false
breakLinebooleanfalseappends a line breaktrue or false (only applies when used in text options) Ex: {text:'hi', options:{breakLine:true}}
bulletbooleanfalsebulleted texttrue or false
bulletobjectbullet optionsobject with type, code or style. Ex: bullet:{type:'number'}. Ex: bullet:{code:'2605'}. Ex: {style:'alphaLcPeriod'}
charSpacingnumberpointscharacter spacing1-256. Ex: { charSpacing:12 }
colorstringtext colorhex color code or scheme color. Ex: { color:'0088CC' }
fillstringfill/bkgd colorhex color code or scheme color. Ex: { color:'0088CC' }
fitstringnonetext fit optionsnone, shrink, resize. Ex: { fit:'shrink' }
fontFacestringfont faceEx: { fontFace:'Arial'}
fontSizenumberpointsfont size1-256. Ex: { fontSize:12 }
glowobjecttext glowobject with size, opacity, color (opt). Ex: glow:{size:10, opacity:0.75, color:'0088CC'}
highlightstringhighlight colorhex color code or scheme color. Ex: { color:'0088CC' }
hyperlinkstringadd hyperlinkobject with url or slide (tooltip optional). Ex: { hyperlink:{url:'https://github.com'} }
indentLevelnumberlevel0bullet indent level1-32. Ex: { indentLevel:1 }
insetnumberinchesinset/padding1-256. Ex: { inset:1.25 }
isTextBoxbooleanfalsePPT "Textbox"true or false
italicbooleanfalseitalic texttrue or false
langstringen-USlanguage settingEx: { lang:'zh-TW' } (Set this when using non-English fonts like Chinese)
lineobjectline/borderadds a border. Ex: line:{ width:'2', color:'A9A9A9' }
lineSpacingnumberpointsline spacing points1-256. Ex: { lineSpacing:28 }
lineSpacingMultiplenumberpercentline spacing multiple0.0-9.99
marginnumberpointsmargin0-99 (ProTip: use the same value from CSS padding)
outlineobjecttext outline optionsOptions: color & size. Ex: outline:{ size:1.5, color:'FF0000' }
paraSpaceAfternumberpointsparagraph spacingParagraph Spacing: After. Ex: { paraSpaceAfter:12 }
paraSpaceBeforenumberpointsparagraph spacingParagraph Spacing: Before. Ex: { paraSpaceBefore:12 }
rectRadiusnumberinchesrounding radiusrounding radius for ROUNDED_RECTANGLE text shapes
rotateintegerdegrees0text rotation degrees0-360. Ex: {rotate:180}
rtlModebooleanfalseenable Right-to-Left modetrue or false
shadowobjecttext shadow optionssee "Shadow Properties" below. Ex: shadow:{ type:'outer' }
softBreakBeforebooleanfalsesoft (shift-enter) breakAdd a soft line-break (shift+enter) before line text content
strikestringtext strikethroughdblStrike or sngStrike
subscriptbooleanfalsesubscript texttrue or false
superscriptbooleanfalsesuperscript texttrue or false
underlineTextUnderlinePropsunderline color/styleTextUnderlineProps
valignstringvertical alignmenttop or middle or bottom
vertstringhorztext directioneaVert or horz or mongolianVert or vert or vert270 or wordArtVert or wordArtVertRtl

Shadow Properties (ShadowProps)#

OptionTypeUnitDefaultDescriptionPossible Values
typestringoutershadow typeouter or inner
anglenumberdegreesshadow angle0-359. Ex: { angle:180 }
blurnumberpointsblur size1-256. Ex: { blur:3 }
colorstringtext colorhex color code or scheme color constant. Ex: { color:'0088CC' }
offsetnumberpointsoffset size1-256. Ex: { offset:8 }
opacitynumberpercentopacity0-1. Ex: opacity:0.75

Examples#

Text Options#

var pptx = new PptxGenJS();var slide = pptx.addSlide();
// EX: Dynamic location using percentagesslide.addText("^ (50%/50%)", { x: "50%", y: "50%" });
// EX: Basic formattingslide.addText("Hello", { x: 0.5, y: 0.7, w: 3, color: "0000FF", fontSize: 64 });slide.addText("World!", { x: 2.7, y: 1.0, w: 5, color: "DDDD00", fontSize: 90 });
// EX: More formatting optionsslide.addText("Arial, 32pt, green, bold, underline, 0 inset", {    x: 0.5,    y: 5.0,    w: "90%",    margin: 0.5,    fontFace: "Arial",    fontSize: 32,    color: "00CC00",    bold: true,    underline: true,    isTextBox: true,});
// EX: Format some textslide.addText("Hello World!", { x: 2, y: 4, fontFace: "Arial", fontSize: 42, color: "00CC00", bold: true, italic: true, underline: true });
// EX: Multiline Text / Line Breaks - use "\n" to create line breaks inside text stringsslide.addText("Line 1\nLine 2\nLine 3", { x: 2, y: 3, color: "DDDD00", fontSize: 90 });
// EX: Format individual words or lines by passing an array of text objects with `text` and `options`slide.addText(    [        { text: "word-level", options: { fontSize: 36, color: "99ABCC", align: "right", breakLine: true } },        { text: "formatting", options: { fontSize: 48, color: "FFFF00", align: "center" } },    ],    { x: 0.5, y: 4.1, w: 8.5, h: 2.0, fill: { color: "F1F1F1" } });
// EX: Bulletsslide.addText("Regular, black circle bullet", { x: 8.0, y: 1.4, w: "30%", h: 0.5, bullet: true });// Use line-break character to bullet multiple linesslide.addText("Line 1\nLine 2\nLine 3", { x: 8.0, y: 2.4, w: "30%", h: 1, fill: { color: "F2F2F2" }, bullet: { type: "number" } });// Bullets can also be applied on a per-line levelslide.addText(    [        { text: "I have a star bullet", options: { bullet: { code: "2605" }, color: "CC0000" } },        { text: "I have a triangle bullet", options: { bullet: { code: "25BA" }, color: "00CD00" } },        { text: "no bullets on this line", options: { fontSize: 12 } },        { text: "I have a normal bullet", options: { bullet: true, color: "0000AB" } },    ],    { x: 8.0, y: 5.0, w: "30%", h: 1.4, color: "ABABAB", margin: 1 });
// EX: Paragraph Spacingslide.addText("Paragraph spacing - before:12pt / after:24pt", {    x: 1.5,    y: 1.5,    w: 6,    h: 2,    fill: { color: "F1F1F1" },    paraSpaceBefore: 12,    paraSpaceAfter: 24,});
// EX: Hyperlink: Webslide.addText(    [        {            text: "PptxGenJS Project",            options: { hyperlink: { url: "https://github.com/gitbrent/pptxgenjs", tooltip: "Visit Homepage" } },        },    ],    { x: 1.0, y: 1.0, w: 5, h: 1 });// EX: Hyperlink: Slide in Presentationslide.addText(    [        {            text: "Slide #2",            options: { hyperlink: { slide: "2", tooltip: "Go to Summary Slide" } },        },    ],    { x: 1.0, y: 2.5, w: 5, h: 1 });
// EX: Drop/Outer Shadowslide.addText("Outer Shadow", {    x: 0.5,    y: 6.0,    fontSize: 36,    color: "0088CC",    shadow: { type: "outer", color: "696969", blur: 3, offset: 10, angle: 45 },});
// EX: Text Outlineslide.addText("Text Outline", {    x: 0.5,    y: 6.0,    fontSize: 36,    color: "0088CC",    outline: { size: 1.5, color: "696969" },});
// EX: Formatting can be applied at the word/line level// Provide an array of text objects with the formatting options for that `text` string value// Line-breaks work as wellslide.addText(    [        { text: "word-level\nformatting", options: { fontSize: 36, fontFace: "Courier New", color: "99ABCC", align: "right", breakLine: true } },        { text: "...in the same textbox", options: { fontSize: 48, fontFace: "Arial", color: "FFFF00", align: "center" } },    ],    { x: 0.5, y: 4.1, w: 8.5, h: 2.0, margin: 0.1, fill: { color: "232323" } });
pptx.writeFile("Demo-Text");

Line Break Options#

  • Use the breakLine prop to force line breaks when composing text objects using an array of text objects.
  • Use the softBreakBefore prop to create a "soft line break" (shift-enter)
let arrTextObjs1 = [    { text: "1st line", options: { fontSize: 24, color: "99ABCC", breakLine: true } },    { text: "2nd line", options: { fontSize: 36, color: "FFFF00", breakLine: true } },    { text: "3rd line", options: { fontSize: 48, color: "0088CC" } },];slide.addText(arrTextObjs1, { x: 0.5, y: 1, w: 8, h: 2, fill: { color: "232323" } });
let arrTextObjs2 = [    { text: "1st line", options: { fontSize: 24, color: "99ABCC", breakLine: false } },    { text: "2nd line", options: { fontSize: 36, color: "FFFF00", breakLine: false } },    { text: "3rd line", options: { fontSize: 48, color: "0088CC" } },];slide.addText(arrTextObjs2, { x: 0.5, y: 4, w: 8, h: 2, fill: { color: "232323" } });

Line Break Examples#

text line breaks

Text Formatting#

text formatting

Bullet Options#

bullets options

Tab Stops#

tab stops

Samples#

Sample code: demos/modules/demo_text.mjs