Text & Rich Text
Multi-run text and paragraph control: alignment, fonts, strike/underline, wavy underline, highlights, bullets, hyperlinks, line spacing and text fitting.
Demo class
DemoText
Source file Modules/DemoText.cs
Slide methods genSlide01 – genSlide06
Output files text_genSlide*.pptx
1Overview
DemoText is the text playground of the suite: six slides built with slide.addText in two flavours — a single string/options call for labels, and a List<TextProps> for multi-run rich text.
TextPropsOptions carries everything: x/y/w/h in inches, align/valign, fontFace/fontSize, color/fill, margin, lineSpacing, bullet and underline objects, hyperlinks, fit — most slides overlay a caption so you can see exactly which option produced which effect.
2Demo methods
| Method | What it demonstrates |
|---|---|
| genSlide01 | Text alignment & margins — valign/align, fill, margin, fixed and percent x/y. |
| genSlide02 | Fonts, line breaks & spacing — multi-run formatting, strike, underline, wavy underline, highlight, lineSpacing. |
| genSlide03 | Bullets — indent levels, numbered styles (arabic/alpha/roman), numberStartAt, soft line breaks. |
| genSlide04 | Hyperlinks, text shadow, outline & glow. |
| genSlide05 | Text fit — TextFitType none / shrink / resize. |
| genSlide06 | Scheme colors — SCHEME_COLORS palette on runs and fills. |
3Code samples
Text alignment & margins valign + align on a filled text box with margin; percent x/y. DemoText.cs · genSlide01
slide.addText(new List<TextProps> {
new TextProps { text= "(left/top)", options= new TextPropsOptions { fontSize= 12, breakLine= true } },
new TextProps { text= "Textbox", options= new TextPropsOptions { bold= true } },
},
new TextPropsOptions { x = 10, y = 0.75, w = 3.0, h = 1.0, color = "FFFFFF", fill = "00B050", valign = VAlign.top, align = HAlign.left, margin = 15 }
);Fonts, strike & underline fontFace/fontSize per run; strike and classic underline. DemoText.cs · genSlide02
slide.addText(new List<TextProps> {
new TextProps { text= "Courier New ", options= new TextPropsOptions { fontSize= 36, fontFace= "Courier New", color= SCHEME_COLORS.accent6 } },
new TextProps { text= "36", options= new TextPropsOptions { fontSize= 36, fontFace= "Courier New", color= SCHEME_COLORS.accent1, breakLine= true } },
new TextProps { text= "Arial ", options= new TextPropsOptions { fontSize= 48, fontFace= "Arial", color= SCHEME_COLORS.accent2 } },
new TextProps { text= "48", options= new TextPropsOptions { fontSize= 48, fontFace= "Courier New", color= SCHEME_COLORS.accent1, breakLine= true } },
new TextProps { text= "Verdana 48", options= new TextPropsOptions { fontSize= 48, fontFace= "Verdana", color= SCHEME_COLORS.accent3, align= HAlign.left, breakLine= true } },
new TextProps
{
text= "\nStrikethrough",
options= new TextPropsOptions { fontSize= 36, fontFace= "Arial", color= SCHEME_COLORS.accent6, align= HAlign.center, strike= true, breakLine= true },
},
new TextProps
{
text= "Underline",
options= new TextPropsOptions { fontSize= 36, fontFace= "Arial", color= SCHEME_COLORS.accent2, align= HAlign.center,
underline= true,
breakLine= true },
},Wavy underline & highlight underline = new TextUnderlineOption(TextUnderlineStyle.wavy, color), plus highlight. DemoText.cs · genSlide02
new TextProps
{
text= "FUN",
options= new TextPropsOptions
{
fontFace= "Arial",
fontSize= 48,
color= SCHEME_COLORS.accent6,
align= HAlign.center,
underline= new TextUnderlineOption(TextUnderlineStyle.wavy, SCHEME_COLORS.accent4),
},
},
new TextProps
{
text= "derline",
options= new TextPropsOptions
{
fontFace= "Arial",
fontSize= 48,
color= SCHEME_COLORS.accent4,
align= HAlign.center,
underline= new TextUnderlineOption (TextUnderlineStyle.wavy, SCHEME_COLORS.accent5),
breakLine= true,
},
},
new TextProps { text= " ", options= new TextPropsOptions { breakLine= true } },
new TextProps { text= "Also: ", options= new TextPropsOptions { fontSize= 36, fontFace= "Arial", color= SCHEME_COLORS.accent5, align= HAlign.right } },
new TextProps { text= "highlighted", options= new TextPropsOptions { fontSize= 36, fontFace= "Arial", color= SCHEME_COLORS.accent5, align= HAlign.right, highlight= "FFFF00" } },
new TextProps { text= " text!", options= new TextPropsOptions { fontSize= 36, fontFace= "Arial", color= SCHEME_COLORS.accent5, align= HAlign.right } },Line spacing lineSpacing (exact points) and lineSpacingMultiple (multiple). DemoText.cs · genSlide02
// 2= line-Spacing (exact)
slide.addText("line-Spacing (text):", new TextPropsOptions { x = 7.0, y = 2.7, w = "40%", h = 0.3, margin = 0, color = SCHEME_COLORS.accent1 });
slide.addText("lineSpacing (Exactly)\n40pt", new TextPropsOptions {
x = 7.0, y = 3.1, w = 5.75, h = 1.17, align = HAlign.center, fill = "F1F1F1", color = "363636", lineSpacing = 39.9 } // TEST-CASE= `lineSpacing` decimal value
);
// 3= line-Spacing (multiple)
slide.addText("lineSpacing (Multiple)\n1.5",
new TextPropsOptions
{
x = 7.0,
y = 4.5,
w = 5.75,
h = 1.0,
align = HAlign.center,
fill = "E6E9EC",
color = "363636",
lineSpacingMultiple = 1.5,
}
);Bullet indent levels bullet:true across indentLevel 0–3. DemoText.cs · genSlide03
slide.addText(new List<TextProps>
{
new TextProps { text= "Root-Level ", options= new TextPropsOptions { fontSize= 32, bullet= true, color= SCHEME_COLORS.accent3, indentLevel= 0 } },
new TextProps { text= "Indent-Level 1", options= new TextPropsOptions { fontSize= 32, bullet= true, color= SCHEME_COLORS.accent4, indentLevel= 1 } },
new TextProps { text= "Indent-Level 2", options= new TextPropsOptions { fontSize= 32, bullet= true, color= SCHEME_COLORS.accent5, indentLevel= 2 } },
new TextProps { text= "Indent-Level 3", options= new TextPropsOptions { fontSize= 32, bullet= true, color= SCHEME_COLORS.accent6, indentLevel= 3 } },
},
new TextPropsOptions { x = 0.5, y= 1.0, w= 5.75, h= 2.4, fill= "232323" }
);Numbered bullet styles CustomTextBullet numberType arabicPeriod / alphaLcPeriod / romanLcPeriod and numberStartAt. DemoText.cs · genSlide03
slide.addText("Bullet Styles:", new TextPropsOptions { x = 0.5, y= 4.6, w= "40%", h= 0.3, margin= 0, color= SCHEME_COLORS.accent1 });
slide.addText(new List<TextProps>
{
new TextProps { text= "style: arabicPeriod", options= new TextPropsOptions { color= SCHEME_COLORS.accent2,
bullet= new CustomTextBullet { type= BulletType.number, numberType= TextBulletNumberType.arabicPeriod } } },
new TextProps { text= "style: arabicPeriod", options= new TextPropsOptions { color= SCHEME_COLORS.accent2,
bullet= new CustomTextBullet{ type= BulletType.number, numberType= TextBulletNumberType.arabicPeriod } } },
new TextProps { text= "style: alphaLcPeriod", options= new TextPropsOptions { color= SCHEME_COLORS.accent5,
bullet= new CustomTextBullet { type= BulletType.number, numberType= TextBulletNumberType.alphaLcPeriod }, indentLevel= 1 },
},
new TextProps{ text= "style: alphaLcPeriod", options= new TextPropsOptions { color= SCHEME_COLORS.accent5,
bullet= new CustomTextBullet { type= BulletType.number, numberType= TextBulletNumberType.alphaLcPeriod }, indentLevel= 1 },
},
new TextProps{ text= "style: romanLcPeriod",options= new TextPropsOptions { color= SCHEME_COLORS.accent6,
bullet= new CustomTextBullet { type= BulletType.number, numberType= TextBulletNumberType.romanLcPeriod }, indentLevel= 2 },
},
new TextProps{ text= "style: romanLcPeriod", options= new TextPropsOptions { color= SCHEME_COLORS.accent6,
bullet= new CustomTextBullet { type= BulletType.number, numberType= TextBulletNumberType.romanLcPeriod }, indentLevel= 2 },
},
},
new TextPropsOptions { x= 0.5, y= 5.0, w= 5.75, h= 2.0, fill= (SCHEME_COLORS.bg2), color= SCHEME_COLORS.accent1 }
);
// RIGHT COLUMN ------------------------------------------------------------
// 1= Regular bullets
slide.addText(@"Bullet ""Start At"" number option:", new TextPropsOptions { x= 7.0, y= 0.6, w= 5.75, h= 0.3, margin= 0, color= SCHEME_COLORS.accent1 });
slide.addText("type:'number'\nnumberStartAt:'5'", new TextPropsOptions
{
x= 7.0,
y= 1.0,
w= 5.75,
h= 0.75,
fill= (SCHEME_COLORS.bg2),
color= SCHEME_COLORS.accent6,
fontFace= "Courier New",
bullet= new CustomTextBullet { type= BulletType.number, numberStartAt= 5 },
});Soft line breaks softBreakBefore:true adds a Shift+Enter style break inside a bullet block. DemoText.cs · genSlide03
slide.addText("Bullets and soft-line-break (shift+enter):", new TextPropsOptions { x= 7.0, y= 3.5, w= 5.75, h= 0.3, margin= 0, color= SCHEME_COLORS.accent1 });
slide.addText(new List<TextProps>
{
new TextProps { text= "First line", options= new TextPropsOptions { bullet= true, breakLine= true } },
new TextProps { text= "Second line", options= new TextPropsOptions { bullet= true } },
new TextProps { text= "Third line via `softBreakBefore:true`", options= new TextPropsOptions { softBreakBefore= true } },
},
new TextPropsOptions { x= 7.0, y= 3.9, w= 5.75, h= 1.0, color= "393939", fontSize= 16, fill= (SCHEME_COLORS.bg2) }
);Hyperlinks hyperlink = new HyperlinkProps(url, tooltip) and the short-form hyperlink = url. DemoText.cs · genSlide04
// Link with tooltip
slide.addText(new TextProps {
text = "Link with Tooltip",
options = new TextPropsOptions {
hyperlink = new HyperlinkProps("https://github.com/gitbrent/pptxgenjs", "Visit Homepage")
}
}, new TextPropsOptions { x = 0.5, y = 1.0, w = 2.5, h = 0.6, margin = 10, fill = "F1F1F1", fontSize = 14, align = HAlign.center });
// Link without tooltip
slide.addText(new List { new TextProps {
text = "Link without Tooltip",
options = new TextPropsOptions { hyperlink = ("https://github.com/gitbrent") } } },
new TextPropsOptions { x = 3.78, y = 1.0, w = 2.5, h = 0.6, margin = 10, fill = "F1F1F1", fontSize = 14, align = HAlign.center });
// Link with custom color
slide.addText(new TextProps {
text = "Link with custom color",
options = new TextPropsOptions { hyperlink = ("https://github.com/gitbrent"), color = "EE40EE" } },
new TextPropsOptions { x = 7.05, y = 1.0, w = 2.5, h = 0.6, margin = 10, fill = "F1F1F1", fontSize = 14, align = HAlign.center });
// Link to Slide #5
slide.addText(new TextProps { text = "Link to Slide #5", options = new TextPropsOptions { hyperlink = 5 } },
new TextPropsOptions { x = 10.33, y = 1.0, w = 2.5, h = 0.6, margin = 10, fill = "E2F0D9", fontSize = 14, align = HAlign.center }); Tab stops tabStops = List<TextTabStopProps> { inches, ... } with "\t" in the text. DemoText.cs · genSlide04
slide.addText(new TextProps {
text = "text...\tTab1\tTab2\tTab3",
options = new TextPropsOptions {
tabStops = new List { 1, 3, 7 }
} },
new TextPropsOptions { x = 0.5, y = 2.5, w = 12.3, h = 0.6, fill = (SCHEME_COLORS.bg2) }); Text effects: outline, glow & shadow outline = TextOutlineOption(color, size); glow = TextGlowProps(size, color, opacity); shadow = ShadowProps { type, color, blur, offset, angle, opacity }. DemoText.cs · genSlide04
// outline
slide.addText("size:2", new TextPropsOptions {
x = 0.5, y = 6.2, w = 3.0, h = 1.1, fontSize = 72, bold = true,
color = SCHEME_COLORS.accent1,
outline = new TextOutlineOption(SCHEME_COLORS.accent4, 2) });
// glow
slide.addText("size:10", new TextPropsOptions {
x = 3.9, y = 6.2, w = 3.0, h = 1.1, fontSize = 72, color = SCHEME_COLORS.accent1,
glow = new TextGlowProps(10, SCHEME_COLORS.accent2, 0.25) });
// shadow
var shadowOpts = new ShadowProps { type = ShadowType.outer, color = "696969", blur = 3, offset = 10, angle = 45, opacity = 0.6 };
slide.addText("type:outer, offset:10, blur:3", new TextPropsOptions {
x = 7.5, y = 6.2, w = 5.5, h = 1.1, fontSize = 32, color = "0088cc", shadow = shadowOpts });Text fit modes fit: TextFitType.none / shrink / resize on identical boxes. DemoText.cs · genSlide05
slide.addText(LOREM_IPSUM_ENG.JsSubstring(0, 1200), new TextPropsOptions { x = 0.5, y = 1.3, w = 4, h = 4, fontSize = 12, fit = TextFitType.none });
slide.addText(LOREM_IPSUM_ENG.JsSubstring(0, 1200), new TextPropsOptions { x = 4.5, y = 1.3, w = 4, h = 4, fontSize = 12, fit = TextFitType.shrink });
slide.addText(LOREM_IPSUM_ENG.JsSubstring(0, 1200), new TextPropsOptions { x = 8.5, y = 1.3, w = 4, h = 4, fontSize = 12, fit = TextFitType.resize });
// titles last so they overlay the overflowing text from above
slide.addText("fit:'none' ", new TextPropsOptions { x = 0.5, y = 0.6, w = 4, h = 0.3, color = SCHEME_COLORS.accent1, fill = "ffffff" });
slide.addText("fit:'shrink'", new TextPropsOptions { x = 4.5, y = 0.6, w = 4, h = 0.3, color = SCHEME_COLORS.accent1, fill = "ffffff" });
slide.addText("fit:'resize'", new TextPropsOptions { x = 8.5, y = 0.6, w = 4, h = 0.3, color = SCHEME_COLORS.accent1, fill = "ffffff" });Scheme colors color/fill accept SCHEME_COLORS.tx1/tx2, bg1/bg2 and accent1..accent6. DemoText.cs · genSlide06
slide.addText("TEXT1 on BACKGROUND2", new TextPropsOptions { x = 0.5, y = 0.7, w = 6.0, h = 2.0, color = SCHEME_COLORS.tx1, fill = (SCHEME_COLORS.bg2) });
slide.addText("TEXT2 on BACKGROUND1", new TextPropsOptions { x = 7.0, y = 0.7, w = 6.0, h = 2.0, color = SCHEME_COLORS.tx2, fill = (SCHEME_COLORS.bg1) });
slide.addText("ACCENT1", new TextPropsOptions { x = 0.5, y = 3.25, w = 6.0, h = 1.0, color = "FFFFFF", fill = (SCHEME_COLORS.accent1) });
slide.addText("ACCENT2", new TextPropsOptions { x = 7.0, y = 3.25, w = 6.0, h = 1.0, color = "FFFFFF", fill = (SCHEME_COLORS.accent2) });
slide.addText("ACCENT3", new TextPropsOptions { x = 0.5, y = 4.7, w = 6.0, h = 1.0, color = "FFFFFF", fill = (SCHEME_COLORS.accent3) });
slide.addText("ACCENT4", new TextPropsOptions { x = 7.0, y = 4.7, w = 6.0, h = 1.0, color = "FFFFFF", fill = (SCHEME_COLORS.accent4) });
slide.addText("ACCENT5", new TextPropsOptions { x = 0.5, y = 6.15, w = 6.0, h = 1.0, color = "FFFFFF", fill = (SCHEME_COLORS.accent5) });
slide.addText("ACCENT6", new TextPropsOptions { x = 7.0, y = 6.15, w = 6.0, h = 1.0, color = "FFFFFF", fill = (SCHEME_COLORS.accent6) });4Key notes
!
Two overloads are used everywhere: addText(string, TextPropsOptions) for labels and addText(List<TextProps>, TextPropsOptions) for runs sharing one text box.
!
New rich-text values: underline accepts a TextUnderlineOption(TextUnderlineStyle.wavy, color) object; strike and highlight are plain props.
!
Bullet control goes through CustomTextBullet { type = BulletType.number, numberType = …, numberStartAt = n, characterCode = "…" } — numberStartAt only applies to number bullets.
!
softBreakBefore:true inserts a soft (Shift+Enter style) break before that run — handy inside bulleted paragraphs that should stay one bullet.
!
fit accepts TextFitType.none | shrink | resize; the demo shows the three modes on identical Lorem-ipsum boxes so the difference is obvious.