Rich Text (HTML) Support | Header & Footer

You can use HTML tags to format your header and footer content with rich text styling.

Supported HTML Tags

• Text Formatting: <strong>, <b>, <em>, <i>, <u>, <s>
• Structure: <p>, <div>, <span>, <h1>-<h6>, <br>
• Styling: Inline styles with style attribute
• Colors: Use color names or hex codes in styles

Example: Rich Text Header

PaginationPlus.configure({
  headerLeft: `<h1 style="color: #2563eb;">Company Name</h1>
<p style="font-size: 12px; color: #6b7280;">Department</p>`,
  headerRight: `<span style="color: blue; font-weight: bold;">Page {page}</span>`,
})

Example: Rich Text Footer

PaginationPlus.configure({
  footerLeft: `<p><strong>Contact:</strong><br>
<em>dev.romikmakavana@gmail.com</em></p>`,
  footerRight: `<span style="color: #10b981;">Made with ❤️ by Romik</span>`,
})

Text Formatting

Use HTML tags for basic text formatting:

PaginationPlus.configure({
  headerLeft: `<p><strong>Bold Text</strong> and <em>Italic Text</em></p>`,
  footerLeft: `<p><u>Underlined</u> and <s>Strikethrough</s></p>`,
})

Inline Styles

Apply inline styles for colors, fonts, and spacing:

PaginationPlus.configure({
  headerLeft: `<h1 style="color: #2563eb; font-size: 18px;">Title</h1>`,
  headerRight: `<span style="color: blue; font-weight: 600;">Page {page}</span>`,
  footerLeft: `<p style="font-size: 12px; color: #6b7280;">Footer Text</p>`,
})

Styling Tips

Consistent Spacing

Use CSS margins and padding for consistent spacing:

headerLeft: `<p style="margin: 0; padding: 0;">Title</p>`,

Color Schemes

Match your document’s color scheme:

headerLeft: `<h1 style="color: #2563eb;">Title</h1>`,
footerRight: `<span style="color: #6b7280;">Page {page}</span>`,

Font Sizes

Use appropriate font sizes for hierarchy:

headerLeft: `<h1 style="font-size: 18px;">Main Title</h1>
<p style="font-size: 12px;">Subtitle</p>`,

Important Notes

• Use inline styles for best compatibility
• Avoid external CSS classes (not supported)
• Test with simple styles first, then add complexity

Related Topics

• Multiline Support - Combine rich text with multiline content
• Complete Examples - See styled examples in action