CSS and inline styling ignored in PDF generation

Aspose.Words Product Family
1

Hi,
I am using Aspose.Words version 23.8.0 and attempting to generate a PDF from HTML. This seems to be working well, except that a lot of styling is ignored. I have the following style block in my HTML:

    <style>
    	.co-logo { display:inline-block; position:relative; }
        .doc-type { float:right; font-size:40px; }
        .section-heading { background-color:#3699FF; border-radius:10px; height:50px; line-height:50px; vertical-align:center; }
        .section-heading-text { font-size:25px; color:#FFFFFF; margin-left:10px; }
        .proj-details-cell { width:25%; vertical-align:top; word-wrap: break-word; }
    </style>

Some of this is getting picked up (e.g. font-size) but most of it isn’t being applied. Does HTML to PDF in Aspose.Words not support basic styling such as margins and alignment?
Thanks

2

@joncitrus Could you please attach full HTML document that will allow us to reproduce the problem.
Please also note, Aspose.Words is designed to work with MS Word documents at first. While loading HTML document, it is converted to Aspose.Words DOM and due to differences in HTML documents and MS Word documents object models it is not always possible to provide 100% fidelity after processing HTML document. In most cases Aspose.Words mimics MS Word behavior when work with HTML documents.

3

@alexey.noskov Thanks for the reply. The full HTML is as follows:

 <style>
	.co-logo { display:inline-block; position:relative; }
    .doc-type { float:right; font-size:40px; }
    .section-heading { background-color:#3699FF; border-radius:10px; height:50px; line-height:50px; vertical-align:center; }
    .section-heading-text { font-size:25px; color:#FFFFFF; margin-left:10px; }
    .proj-details-cell { width:25%; vertical-align:top; word-wrap: break-word; }
</style>
<div>
<span class="co-logo"><img src="/Logos/20230815144826_RA3BIM.jpg" style="max-height:100px;max-width:500px;" /></span>
<span class="doc-type">RAMS</span>
</div>
<br />
<br />
<div class="section-heading">
<span class="section-heading-text">Project details</span>
</div>
<br />
<br />
<table style="width:100%;"><tr>
<td class="proj-details-cell"><b>Project / client name:</b></td>
<td class="proj-details-cell">Zebra / 00G</td>
<td class="proj-details-cell"><b>Start date:</b></td>
<td class="proj-details-cell">09 October 2023</td>
</tr><tr>
<td class="proj-details-cell"><b>Project reference:</b></td>
<td class="proj-details-cell">Z12</td>
<td class="proj-details-cell"><b>End date:</b></td>
<td class="proj-details-cell">12 October 2023</td>
</tr><tr>
<td class="proj-details-cell"><b>Version number:</b></td>
<td class="proj-details-cell">1.2</td>
<td class="proj-details-cell"><b>Created by:</b></td>
<td class="proj-details-cell">Owain McGrath</td>
</tr></table>
<table style="width:100%;"><tr>
<td class="proj-details-cell"><b>Project description:</b></td>
<td class="proj-details-cell" style="width:75%;">Does it have the correct stripes pattern?</td>
</tr></table>
<br /><br /><hr />
<table style="width:100%;"><tr>
<td colspan=2 class="proj-details-cell"><b>Contact details</b></td>
<td colspan=2 class="proj-details-cell"><b>Nearest hospital</b></td>
</tr><tr>
<td class="proj-details-cell"><b>Full name:</b></td>
<td class="proj-details-cell">Sherry Sens</td>
<td class="proj-details-cell"><b>Name:</b></td>
<td class="proj-details-cell">Desert Palm</td>
</tr><tr>
<td class="proj-details-cell"><b>Phone number:</b></td>
<td class="proj-details-cell">07895 555 666</td>
<td class="proj-details-cell"><b>Address:</b></td>
<td rowspan=6 class="proj-details-cell">12 Palm Drive<br> Las Vegas<br> LV129865<br> United States</td>
</tr><tr>
<td class="proj-details-cell"><b>Email:</b></td>
<td class="proj-details-cell">billsupreme@emergencycontact.co.uk</td>
</tr><tr>
<td class="proj-details-cell"><b>Project address:</b></td>
<td rowspan=6 class="proj-details-cell">91<br> Glade Terrace<br> Gloucester<br> GL1 7YT<br> UK</td>
</tr></table>
<br /><br /><hr />
<table style="width:100%;"><tr>
<td colspan=2 class="proj-details-cell"><b>Site manager details</b></td>
<td colspan=2 class="proj-details-cell"><b>Site supervisor details</b></td>
</tr><tr>
<td class="proj-details-cell"><b>Site manager:</b></td>
<td class="proj-details-cell">Ted Dibiase</td>
<td class="proj-details-cell"><b>Site supervisor:</b></td>
<td class="proj-details-cell">Jenna Birch</td>
</tr><tr>
<td class="proj-details-cell"><b>Phone number:</b></td>
<td class="proj-details-cell">0121 456999</td>
<td class="proj-details-cell"><b>Phone number:</b></td>
<td class="proj-details-cell"></td>
</tr><tr>
<td class="proj-details-cell"><b>Email:</b></td>
<td class="proj-details-cell">ted@rich.com</td>
<td class="proj-details-cell"><b>Email:</b></td>
<td class="proj-details-cell"></td>
</tr><tr>
</tr></table>
4

@joncitrus Thank you for additional information. I have checked your HTML document conversion on my side using Aspose.Words and MS Word. The results of conversion are almost identical:
ms.pdf (40.8 KB)
out.pdf (60.2 KB)
The result look almost identical.

5

@alexey.noskov Thanks again for the reply. It seems the styling issues are actually down to Word - opening the raw HTML there doesn’t show the same alignment, border-radius etc. as in a browser.

I have managed to get something working better using Aspose.Pdf, so it looks like asking my company to buy a licence for that is the way forward.

6

@joncitrus You can also try using Aspose.HTML to convert HTML to PDF. Aspose.HTML is designed to work with HTML documents.