HTML to DOCX conversion doesn't preserve image alignment

Aspose.Words Product Family
,
1

When converting HTML to DOCX, horizontal image alignment accomplished via CSS is not retained. Below is the source HTML document and screenshots of the HTML as displayed in a browser and as converted to DOCX file are attached. The images that are left and right aligned in the source HTML document are always center aligned in the resulting DOCX. I have reproduced this with Aspose.Words for Java v21.6 as well the online converter at Convert HTML To WORD Online.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Aspose alignment issue</title>
<style>
.image {
	display: table;
	clear: both;
	text-align: center;
}
.image.image-style-align-center {
	margin-left: auto;
	margin-right: auto;
}
.image.image-style-block-align-left {
	margin-left: 0;
	margin-right: auto;
}
.image.image-style-block-align-right {
	margin-right: 0;
	margin-left: auto;
}
</style>
</head>
<body>
	<figure class="image image-style-block-align-left">
		<img src="https://docs.aspose.com/cells/images/Aspose-image-for-open-graph.jpg" width="400" height="400">
	</figure>
	<figure class="image image-style-align-center">
		<img src="https://docs.aspose.com/cells/images/Aspose-image-for-open-graph.jpg" width="400" height="400">
	</figure>
	<figure class="image image-style-block-align-right">
		<img src="https://docs.aspose.com/cells/images/Aspose-image-for-open-graph.jpg" width="400" height="400">
	</figure>
</body>
</html>

aspose-alignment-issue-browser.jpg (201.2 KB)

aspose-alignment-issue-word.jpg (355.7 KB)

2

@rgabbard You should note that Aspose.Words is designed to work with MS Word documents. And MS Word documents and HTML documents object models are quite different. This makes it not always possible to provide 100% fidelity after conversion one format to another. In most cases Aspose.Words mimics MS Word behavior when work with HTML documents. Here are output DOCX documents produced by
Aspose.Words: out.docx (20.5 KB)
MS Word: ms.docx (12.6 KB)

As you can see MS Word also does not preserve the image position. To get the expected output you can use paragraph alignment in your HTML:

<html>
<body>
	<p style="text-align:left">
		<img src="https://docs.aspose.com/cells/images/Aspose-image-for-open-graph.jpg" width="400" height="400">
	</p>
	<p style="text-align:center">
		<img src="https://docs.aspose.com/cells/images/Aspose-image-for-open-graph.jpg" width="400" height="400">
	</p>
	<p style="text-align:right">
		<img src="https://docs.aspose.com/cells/images/Aspose-image-for-open-graph.jpg" width="400" height="400">
	</p>
</body>
</html>
3

The same issue occurs in Aspose.PDF converting the HTML to PDF which can be demonstrated using the online converter at Convert HTML To PDF Online. However, if I convert the HTML file provided using Adobe Acrobat, the images are aligned correctly as the attached PDFs demonstrate.

converted-using-adobe-acrobat.pdf (59.9 KB)
converted-using-aspose-pdf.pdf (15.7 KB)

4

@rgabbard Please try using Aspose.HTML, which is designed to work with HTML documents.

5

The Aspose.Words and Aspose.PDF products for which have purchased a license are also supposed to work with HTML documents (e.g. converting HTML to DOCX and PDF) per the product documentation.

6

Unlike Aspose.Words, Aspose.HTML doesn’t appear to support images embedded via base64 encoding when converting to PDF. The HTML example below and the attached PDF output from HTML Converter - Convert HTML to PDF, DOCX, images online for free demonstrates this…

<!DOCTYPE html>
<html>
	<head>
		<title>Aspose.HTML base64 img issue</title>
	</head>
	<body>
		<p>
			A red dot base64 encoded img...
		</p>
		<div>
			<img src="data:image/png;base64,%20iVBORw0KGgoAAAANSUhEUgAAAAUA%20AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO%209TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
		</div>
	</body>
</html>

aspose-html-base64-img-issue.pdf (5.6 KB)

7

@rgabbard As I have mentioned Aspose.Words is designed to work with MS Word documents and mimics MS Word behavior when work with HTML documents.
Regarding Aspose.PDF it would be better to post separate topic in the appropriate support forum. My colleagues from Aspose.PDF will help you shortly.
Regarding Aspose.HTML please contact the appropriate team in Aspose.HTML forum.