Log in / Register

Forum › How do I...?

How to convert html to 2 column page pdf.

jameel
Hi,
I have a html content with some Images and tables that I want to convert to pdf (and word, if possible) in a 2 column format as shown in http://www.princexml.com/howcome/2007/nlm/sample/bmj_sample.pdf

what's the procedure to do this using prince xml?

Does princexml support the css3 borders to produce rounded borders?


Thanks

Edited by jameel

mikeday
You can create columns using markup like this:
<body>
  <h1>Heading</h1>
  <div style="columns: 2">
      ... body text goes here ...
  </div>

jameel
Thanks for the quick reply.

Does princexml support the css3 borders to produce rounded borders?
mikeday
Yes, you can use the border-radius properties.
jameel
The border-radius does not seem to work for me, the html code is below and attached picture show what I see in chrome and what's generated by PDF. Am I missing something?

Thanks

<html>
<body>
<style type="text/css">
.circle {
border-radius: 50%;
border: 1px dashed;
width: 50px;
height: 50px;
text-align: center;
}
</style>
<table border="1">
<tbody>
	<tr>
		<td align="center"><div class="circle">AAA</div></td>
		<td align="center"><div class="circle">BBB</div></td>
		<td align="center"><div class="circle">CCC</div></td>
		<td align="center"><div class="circle">DDD</div></td>
		<td align="center"><div class="circle">EEE</div></td>
		<td align="center"><div class="circle">VVV</div></td>
	</tr>
</tbody>
</table>

</body>
</html>
  1. chromeVSprincexml.jpg‎ 67.0 kB

Edited by mikeday

mikeday
In Prince the border shorthand property overwrites border-radius. The browsers do this differently, and we will probably change Prince behaviour in future. For now, it is necessary to specify the border-radius after the border shorthand property.
jameel
Thanks for your response. I tried to put the border-radius after the border shorthand, but still does not work
<html>
<body>
<style type="text/css">
.circle {
width: 50px;
height: 50px;
text-align: center;
border: 1px dashed;
border-radius: 50%;
}
</style>
<table border="1">
<tbody>
	<tr>
		<td align="center"><div class="circle">AAA</div></td>
		<td align="center"><div class="circle">BBB</div></td>
		<td align="center"><div class="circle">CCC</div></td>
		<td align="center"><div class="circle">DDD</div></td>
		<td align="center"><div class="circle">EEE</div></td>
		<td align="center"><div class="circle">VVV</div></td>
	</tr>
</tbody>
</table>

</body>
</html>



I even tried expanding out the short hand (see below) but no luck...can you share some example with border-radius that works?


<html>
<body>
<style type="text/css">
.circle {
width: 50px;
height: 50px;
text-align: center;
border-style:solid;
border-width:2px;
border-radius: 50%;
}
</style>
<table border="1">
<tbody>
	<tr>
		<td align="center"><div class="circle">AAA</div></td>
		<td align="center"><div class="circle">BBB</div></td>
		<td align="center"><div class="circle">CCC</div></td>
		<td align="center"><div class="circle">DDD</div></td>
		<td align="center"><div class="circle">EEE</div></td>
		<td align="center"><div class="circle">VVV</div></td>
	</tr>
</tbody>
</table>

</body>
</html>
mikeday
Prince does not support percentages on border-radius. If you use an absolute length like 5mm then it will work. Sorry for the inconvenience.
jameel
Thanks that worked. I love your awesome support :)
mikeday
These issues with border-radius have been fixed in Prince 10, available now. :)