Formatting Issues

How to Format SharePoint Image Captions with HTML and CSS

Natalie Taylor Sep 27, 2026 869 views

Question details

Users need to apply custom styling such as italics and font colors to image captions in SharePoint without compromising the page's accessibility.

How to Format SharePoint Image Captions Using HTML and CSS

Product: Microsoft SharePoint
Device & OS: not provided
Scenario: Adding custom-styled text captions to images on modern SharePoint pages to improve visual presentation and screen reader compatibility.
Observed behavior: Native SharePoint Text and Image web parts lack advanced caption-formatting options, text overlays disappear on small screens, and embedding text inside images violates accessibility standards.

Before you start

Ensure you have SharePoint Administrator or Site Collection Administrator permissions, as deploying custom web parts or enabling custom scripts requires high-level administrative access.

Solution 1Recommended

Deploy an SPFx Script Editor Web Part

This is the most secure and recommended approach, allowing you to inject custom HTML and CSS into modern SharePoint pages without compromising tenant security settings.

Modern SharePoint natively restricts custom script injection for security reasons. By deploying a SharePoint Framework (SPFx) Script Editor web part, administrators can safely allow users to add custom HTML tags and inline CSS for image captions.

Once deployed, this web part behaves like the classic Script Editor, giving you full control over text styling, font colors, and italics while maintaining accessibility.

Obtain the SPFx Script Editor package

Download a trusted open-source SPFx Script Editor web part package (.sppkg) from the official Microsoft SharePoint GitHub repository or a verified developer.

Upload to the App Catalog

Navigate to your SharePoint Tenant App Catalog and upload the .sppkg file to make it available across your organization's sites.

Add the web part to your page

Go to the modern SharePoint page where you want the image. Click the '+' icon to add a new web part and select the newly deployed 'Script Editor' web part.

Insert HTML and CSS

Click 'Edit markup' on the web part and paste your custom HTML image tag along with `<figcaption>` or styled `<div>` tags containing your desired CSS (e.g., `font-style: italic; color: #333;`).

Best Practice: Using SPFx is preferred by Microsoft because it avoids the need to globally enable custom scripts, keeping your SharePoint environment secure.

Solution 2

Embed an ASPX File Using Custom Scripts

Use this workaround if an SPFx solution cannot be deployed. It involves hosting an HTML/ASPX file in a document library and embedding it.

Free Microsoft Office alternative

Create and Format Documents Seamlessly with WPS Office

While SharePoint handles your team's intranet and web content, preparing the actual documents, images, and reports often happens on your desktop. WPS Office is a powerful, lightweight, and free alternative to Microsoft Office that lets you perfectly format your Word, Excel, and PowerPoint files before securely uploading them to SharePoint.

1. Download WPS Office: Visit the official WPS website and download the free desktop application for your operating system.
2. Format your documents: Open your documents in WPS Writer to easily insert images, apply custom caption styles, and adjust layouts.
3. Save and upload to SharePoint: Save your work in standard .docx or .pdf formats and upload them directly to your SharePoint Document Libraries.

Fully compatible with Microsoft Office formats (.docx, .xlsx, .pptx).Advanced image and caption formatting tools built directly into the word processor.Free, lightweight, and incredibly fast to install on Windows, Mac, and Linux.Familiar user interface ensuring a zero learning curve for Microsoft Office users.

microsoft office alternative - wps office

Frequently Asked Questions

Why can't I just use the native SharePoint Text web part for custom captions?

The modern SharePoint Text web part operates as a rich text editor with strict limitations on the underlying HTML. It automatically strips out custom HTML tags, inline CSS properties, and complex styling classes to maintain responsive design and security.

Are text overlays on SharePoint images accessible?

Using the built-in text overlay feature is not recommended for accessibility. Screen readers may struggle to interpret overlay text correctly, and visually, the text often disappears or becomes illegible when the image scales down on smaller screens.

Does the Markdown web part support HTML and CSS styling for captions?

No. While the Markdown web part allows for standard markdown syntax, it does not support rendering complex inline CSS or raw HTML tags, providing no significant functional advantage over the standard Text web part for advanced caption styling.

Document & File Issues