Table layouts are not preserved, text boxes get combined in odd ways

[rolandpoulter]

Maybe this is a configuration issue with decktape or one of the dependencies. I can't get it to preserve my table layouts and it causes text to be misaligned so that it doesn't line up with the rows or columns anymore.

I would expect every cell of a table to never combine text with any other text, except for other text is in the same cell.

[astefanutti]

What presentation framework do you use? I wonder whether it could be related to #151. Chromium had layout issues with printing until recently. It would be worth that you test it again when #261 lands, as it contains an Chromium upgrade that has printing support with the LayoutNG engine.

[rolandpoulter]

I am using impress.js

[rolandpoulter]

I've noticed other layout issues that look similar to #151 but I have been able to successfully mitigate them but wrapping the misplaced elements (usually images, or sometimes tables) with a div and using relative/absolute positioning instead of margins

[rolandpoulter]

There is also another issue that I've been getting when I have slides that contain tables. The error does not occur unless a table is present. After you build the pdf and open in acrobat it will show an alert dialog that says:

"Cannot extract the embedded font 'AAAAAA+[FONT NAME]'. Some characters may not display or print correctly."

I've been able to clear that error out manually by selecting all the text in the pdf and reseting the font to what it was before but from the system fonts and saving the pdf.

It is very odd. I was trying to figure out what was causing the error above and it appears whenever I have a slide that has a table or an element with display:table

[rolandpoulter]

I tested #261 and it is working better but it is still combining similar elements.

This behavior isn't just happening with tables also lists or <ul> it is merging together all the list items into one editable text block, instead of one for each list item. The same behavior is happening on table cells clearly but not in a consistent way. I will try to prepare some screenshots.

[rolandpoulter]

decktape -s 1920x1080 -p 1050 --chrome-arg='--disable-web-security' --chrome-arg='--ignore-certificate-errors' --slides='1' impress http://localhost:3000#pdf ./pitch.pdf

import React from 'react';

export default function Slide0Bug(props) {
	return (
		<>
			<div
				id="zero"
				className="step slide"
				data-x="-2000"
				data-y="-2000"
				data-z="-2000"
				data-scale="1"
				data-rotate="0"
				data-rotate-x="0"
				data-rotate-y="0"
				data-autoplay="0"
				style={{
					backgroundColor: 'transparent',
				}}
			>
				<ul style={{ float: 'left' }}>
					<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
					<li>Nullam aliquam lacinia arcu</li>
					<li>Nullam dictum, velit cursus suscipit pretium, turpis leo congue velit, a ornare ipsum odio nec tortor</li>
					<li>Phasellus non tortor blandit, imperdiet sapien in, interdum dolor</li>
					<li>Donec a bibendum orci</li>
				</ul>
				<div
					style={{ float: 'right', width: 550, marginTop: 20 }}
				>
					<table style={{ width: '100%', fontSize: 16 }}>
						<tr>
							<td><span>Lorem ipsum dolor sit amet</span></td>
							<td><span>1234</span></td>
							<td><span>4321</span></td>
							<td><span>Aenean ut metus</span></td>
						</tr>
						<tr>
							<td colspan="4" style={{ height: 10 }}>
								<p></p>
							</td>
						</tr>
						<tr>
							<td><span>Vestibulum mauris sem</span></td>
							<td><span>12.3 Donec</span></td>
							<td><span>32.1 Donec</span></td>
							<td><span>66.6%</span></td>
						</tr>
						<tr>
							<td colspan="4" style={{ paddingBottom: 20 }}>
								<span>(Praesent ut laoreet lacus)</span>
							</td>
						</tr>
						<tr>
							<td><span>Curabitur ac nunc lorem</span></td>
							<td><span>6 Etiam</span></td>
							<td><span>6 Etiam</span></td>
							<td><span>--</span></td>
						</tr>
						<tr>
							<td colspan="4" style={{ paddingBottom: 20 }}>
								<span>(Praesent ut laoreet lacus)</span>
							</td>
						</tr>
						<tr>
							<td><span>Fusce euismod elementum posuere</span></td>
							<td><span>--</span></td>
							<td><span>12,345</span></td>
							<td><span>--</span></td>
						</tr>
						<tr>
							<td colspan="4" style={{ paddingBottom: 20 }}>
								<span>(Praesent ut laoreet lacus)</span>
							</td>
						</tr>
						<tr>
							<td><span>Total:</span></td>
							<td><span>12.3 Donec</span></td>
							<td><span>32.1 Donec</span></td>
							<td><span>66.6%</span></td>
						</tr>
					</table>
				</div>

				<div
					style={{
						width: 1150,
						position: 'relative',
						left: -40,
						top: 60,
					}}
				>
					<table
						style={{
							width: '100%',
						}}
					>
						<tr>
							<td><span></span></td>
							<td><span>Pellentesque habitant morbi</span></td>
							<td><span>Praesent ut laoreet lacus</span></td>
							<td><span>Proin augue justo,</span></td>
							<td><span>Vestibulum aliquet neque</span></td>
						</tr>
						<tr>
							<td></td>
							<td><span>Donec nunc felis</span></td>
							<td><span>Morbi at congue ante</span></td>
							<td><span>Etiam euismod libero</span></td>
							<td><span>Duis condimentum</span></td>
						</tr>
						<tr>
							<td colspan="5" style={{ height: 10 }}>
								<p></p>
							</td>
						</tr>
						<tr>
							<td><span>Nullam:</span></td>
							<td><p>21 Donec</p></td>
							<td><p>12 Donec</p></td>
							<td><p>1.2 Donec</p></td>
							<td><p>43,210</p></td>
						</tr>
						<tr>
							<td><span style={{ marginTop: -10 }}>Praesent ut laoreet<br/> Etiam:</span></td>
							<td><p>$32.1 Etiam</p></td>
							<td><p>$12.3 Etiam</p></td>
							<td><p>$321 Donec</p></td>
							<td><p>$12 Donec</p></td>
						</tr>
					</table>
				</div>
			</div>
		</>
	);
};

From web:

From pdf:

See how the text boxes in the PDF have been combined.