Solved: Unpredictable distance unit is OneDrive DPF Conver...

bdensmore · ‎05-24-2020

All,

Thanks for the help in advance. Here's the issue:

I'm creating forms through PowerApps which eventually need to be printed in on paper in PDF format. I'm 95% of the way, and have a flow that goes data -> html -> PDF using the OneDriver PDF converter. However, when I do this, the distance measurements I've used in the header style sheet result in unpredictable distances. For example:

hr { width: 1in} results in a horizontal rule width of 1.31 inches on the resulting PDF.

hr { width: 5in} results in a horizontal rule width of 6.34 inches on the resulting PDF.

The discrepancy isn't even linear.

Using the hr selector was my attempt to brute force solve the problem, but without a linear expansion, it is too much, and solving the same problem with height is making my head spin just thinking about it.

Importantly, the resulting HTML page created just prior to the PDF looks perfect. I've also tried converting all the distances to "pt".

So, ultimately, the question is: how to I apply the correct length to elements in the resulting PDF?

Thank you again.

Jay-Encodian · ‎05-25-2020

Hey @bdensmore

Here is the comparison..

I've updated the HTML... see below:

A little more work on the fixed TD widths and font sizing and you may have a workable solution with OneDrive... though make sure to use an dataUri for the image rather than a URL (for Onedrive).

There is a free SKU available on the Encodian connector, may help.

Here is the fixed up HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title>Title Words</title>
<style type="text/css">
* {color: black; font-family:"Times New Roman", serif; font-size: 14.5pt;}
table, tbody { border: solid black; border-width: 0px; border-collapse: collapse;
vertical-align: bottom; overflow: visible;}
h1 { font-weight: bold; text-align: center; margin: 0px;}
div { border: solid black; border-width: 1px; border-collapse: collapse; margin-bottom: 1in; padding: 0.1in;}
#a { height: 2.75in; margin-top: 1in;}
#b { height: 4in;}
p { margin-top: 0.5in;}
span { float: right; position: relative;}

hr { width: 1in;} /* Horizonal Rule standing out in code */

.sign { height: 0.6in; border: solid black; border-width: 0px 0px 1px 0px; border-collapse: collapse;}
.spacer { height: 0.7in; width: 0.65in;}
img { max-height: 100%; max-width: 100%;}
</style>
</head>
<body>
<div id="a">
<h1>Title Words</h1>
<p>Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words </p>
</div>
<div id="b">
<h1>ACKNOWLEDGMENT</h1>
<p>Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words</p>
<table>
<tr>
<td class="sign" width="300px"></td>
<td class="spacer"></td>
<td class="sign" width="300px"></td>
</tr>
<tr>
<td>SUBJECT (please sign)</td>
<td></td>
<td>DATE/TIME</td>
</tr>
<hr> <!-- horizontal rule standing out in code-->
<tr>
<td class="sign"><img src="https://encodiancdnprod.blob.core.windows.net/logos/icons%2F32x32w.png"><span>542</span></td>
<td class="spacer"></td>
<td class="sign"></td>
</tr>
<tr>
<td>Witness (please sign) <span>#</span></td>
<td></td>
<td>DATE/TIME</td>
</tr>
</table>
</div>
</body>
</html>

HTH

Jay

View solution in original post

Jay-Encodian · ‎05-25-2020

Hi @bdensmore

Can you share the HTML so we can review?

Ultimately, the Onedrive's HTML / CSS / JS support just isn't that good, so it's either a case of trying differing approaches until a solution can be sought or use one of the third party tools, such as Encodian, Plumsail, Muhimbi, etc.

HTH

Jay

bdensmore · ‎05-25-2020

Jay,

See the code below. This form is pretty simple, the whole html being only 63 lines. I'm sure there are a few places I could simplify, but the html looks and prints (I know paper, blah) perfect. In the resulting PDF, not a single measurement is as described in the code.

I did have one idea, which is to measure everything in px, under the assumption that px width in the pdf is fixed - the borders seemed to work ok. I hadn't tried it previous because as a measurement, it is relative to the output environment. In this case, however, the output is always the Microsoft converter. So if the output is stable, the next question is if px is a more stable measurement...

As for the third party connectors, Plumsail's PDF filler is perfect, but I can't get a third party connection headquartered in Russia through my company, nor do I have access to any funding.

I'm still trying to avoid brute forcing it through trial and error, as this is just one of many forms I'm converting to app based.

<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Title Words</title>
<style type="text/css">
 * {color: black; font-family:"Times New Roman", serif; font-size: 14.5pt;}
body { width: 8in;}
table, tbody { border: solid black; border-width: 0px; border-collapse: collapse;
				vertical-align: bottom; overflow: visible;
				width: 7.8in;}

 h1 { font-weight: bold; text-align: center; margin: 0px;}

 div { border: solid black; border-width: 1px; border-collapse: collapse;
		width: 7.8in;
		margin-bottom: 1in; padding: 0.1in;}
 #a { height: 2.75in; margin-top: 1in;}
 #b { height: 4in;}
 p { margin-top: 0.5in;}
 span { float: right; position: relative;}

hr { width: 1in;} /* Horizonal Rule standing out in code */

 .sign { height: 0.7in; border: solid black; border-width: 0px 0px 1px 0px; border-collapse: collapse;}
 .spacer { height: 0.7in; width: 0.75in;}
 img { max-height: 100%; max-width: 100%;}
</style>
</head>
<body>
<div id="a">
	<h1>Title Words</h1>
	<p>Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words </p>
	</div>
<div id="b">
	<h1>ACKNOWLEDGMENT</h1>
	<p>Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words</p>
	<table>
		<tr>
			<td class="sign" width="3.75in"></td>
			<td class="spacer"></td>
			<td class="sign" width="2.0in"></td>
		</tr>
		<tr>
			<td>SUBJECT (please sign)</td>
			<td></td>
			<td>DATE/TIME</td>
		</tr>
		<hr> <!-- horizontal rule standing out in code-->
		<tr>
			<td class="sign"><img src="testImage.jpg"><span>542</span></td>
			<td class="spacer"></td>
			<td class="sign"></td>
		</tr>
		<tr>
			<td>Witness (please sign) <span>#</span></td>
			<td></td>
			<td>DATE/TIME</td>
		</tr>
	</table>
</div>
</body>
</html>

Jay-Encodian · ‎05-25-2020

Hey @bdensmore

Here is the comparison..

I've updated the HTML... see below:

A little more work on the fixed TD widths and font sizing and you may have a workable solution with OneDrive... though make sure to use an dataUri for the image rather than a URL (for Onedrive).

There is a free SKU available on the Encodian connector, may help.

Here is the fixed up HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> 
<title>Title Words</title>
<style type="text/css">
* {color: black; font-family:"Times New Roman", serif; font-size: 14.5pt;}
table, tbody { border: solid black; border-width: 0px; border-collapse: collapse;
vertical-align: bottom; overflow: visible;}
h1 { font-weight: bold; text-align: center; margin: 0px;}
div { border: solid black; border-width: 1px; border-collapse: collapse; margin-bottom: 1in; padding: 0.1in;}
#a { height: 2.75in; margin-top: 1in;}
#b { height: 4in;}
p { margin-top: 0.5in;}
span { float: right; position: relative;}

hr { width: 1in;} /* Horizonal Rule standing out in code */

.sign { height: 0.6in; border: solid black; border-width: 0px 0px 1px 0px; border-collapse: collapse;}
.spacer { height: 0.7in; width: 0.65in;}
img { max-height: 100%; max-width: 100%;}
</style>
</head>
<body>
<div id="a">
<h1>Title Words</h1>
<p>Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words </p>
</div>
<div id="b">
<h1>ACKNOWLEDGMENT</h1>
<p>Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words Filler words</p>
<table>
<tr>
<td class="sign" width="300px"></td>
<td class="spacer"></td>
<td class="sign" width="300px"></td>
</tr>
<tr>
<td>SUBJECT (please sign)</td>
<td></td>
<td>DATE/TIME</td>
</tr>
<hr> <!-- horizontal rule standing out in code-->
<tr>
<td class="sign"><img src="https://encodiancdnprod.blob.core.windows.net/logos/icons%2F32x32w.png"><span>542</span></td>
<td class="spacer"></td>
<td class="sign"></td>
</tr>
<tr>
<td>Witness (please sign) <span>#</span></td>
<td></td>
<td>DATE/TIME</td>
</tr>
</table>
</div>
</body>
</html>

HTH

Jay

bdensmore · ‎05-25-2020

@Jay-Encodian

Not surprisingly, the Encodian version looks perfect. I just don't have the funding nor the ability to ship the data outside of our Microsoft client.

Jay-Encodian · ‎05-25-2020

Hey @bdensmore

I was still updating the previous post... clicked save to soon.

It's much closer in OneDrive.

Encodian provide a free SKU which may help

Cheers Jay

bdensmore · ‎05-25-2020

What I'm seeing is px is in fact a more stable measurement, thanks for the help!

I'm at home today, when I get in tomorrow, I'll try 2 <hr> tags of different px length and see if the increase is linear!

bdensmore · ‎05-26-2020

So, I did some testing to finalize it. Using CSS "px" is a fairly stable, not perfect, measurement, equal to 1/72 of an inch. @Jay-Encodian was right.

It seems px is translated to pt in the conversion.

Unpredictable distance unit is OneDrive DPF Converter Flow

Helpful resources

Community will be READ ONLY July 16th, 5p PDT -July 22nd

Summer of Solutions | Week 4 Results | Winners will be posted on July 24th

Check Out | 2024 Release Wave 2 Plans for Microsoft Dynamics 365 and Microsoft Power Platform

Updates to Transitions in the Power Platform Communities