Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Page breaks are added in unintended places when page margins are specified. #1574

Closed
lazex opened this issue Feb 22, 2022 · 1 comment
Closed

Page breaks are added in unintended places when page margins are specified. #1574

lazex opened this issue Feb 22, 2022 · 1 comment
Labels
bug Existing features not working as expected
Milestone
54.2

Comments

@lazex
Copy link

lazex commented Feb 22, 2022

My HTML is the following.

<!doctype html>
<meta charset="utf-8" />

<style>
	@page {
		size: A4;
		/*margin: 3cm;*/
	}

	body {
		font-size: 20pt;
	}

	#s1 {
		page-break-before: always;
		font-size: 16pt;
	}
</style>

<section id="s0">
	<h1>1111</h1>
</section>
<section id="s1">
	<ul>
		<li>
			<div>ITEM1</div>
			<ul>
				<li>
					<div>ITEM1-1</div>
				</li>
				<li>
					<div>ITEM1-2</div>
				</li>
				<li>
					<div>ITEM1-2</div>
				</li>
			</ul>
		</li>
		<li>
			<div>ITEM2</div>
		</li>
		<li>
			<div>ITEM3</div>
		</li>
		<li>
			<div>ITEM4</div>
			<ul>
				<li>
					<div>ITEM4-1</div>
					<ul>
						<li>
							<div>ITEM4-1-1</div>
						</li>
						<li>
							<div>ITEM4-1-2</div>
						</li>
						<li>
							<div>ITEM4-1-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-2</div>
					<ul>
						<li>
							<div>ITEM4-2-1</div>
						</li>
						<li>
							<div>ITEM4-2-2</div>
						</li>
						<li>
							<div>ITEM4-2-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-3</div>
					<ul>
						<li>
							<div>ITEM4-3-1</div>
						</li>
						<li>
							<div>ITEM4-3-2</div>
						</li>
						<li>
							<div>ITEM4-3-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-4</div>
					<ul>
						<li>
							<div>ITEM4-4-1</div>
						</li>
						<li>
							<div>ITEM4-4-2</div>
						</li>
						<li>
							<div>ITEM4-4-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-5</div>
					<ul>
						<li>
							<div>ITEM4-5-1</div>
						</li>
						<li>
							<div>ITEM4-5-2</div>
						</li>
						<li>
							<div>ITEM4-5-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-6</div>
					<ul>
						<li>
							<div>ITEM4-6-1</div>
						</li>
						<li>
							<div>ITEM4-6-2</div>
						</li>
						<li>
							<div>ITEM4-6-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-7</div>
					<ul>
						<li>
							<div>ITEM4-7-1</div>
						</li>
						<li>
							<div>ITEM4-7-2</div>
						</li>
						<li>
							<div>ITEM4-7-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-8</div>
					<ul>
						<li>
							<div>ITEM4-8-1</div>
						</li>
						<li>
							<div>ITEM4-8-2</div>
						</li>
						<li>
							<div>ITEM4-8-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-9</div>
					<ul>
						<li>
							<div>ITEM4-9-1</div>
						</li>
						<li>
							<div>ITEM4-9-2</div>
						</li>
						<li>
							<div>ITEM4-9-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-10</div>
					<ul>
						<li>
							<div>ITEM4-10-1</div>
						</li>
						<li>
							<div>ITEM4-10-2</div>
						</li>
						<li>
							<div>ITEM4-10-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-11</div>
					<ul>
						<li>
							<div>ITEM4-11-1</div>
						</li>
						<li>
							<div>ITEM4-11-2</div>
						</li>
						<li>
							<div>ITEM4-11-3</div>
						</li>
					</ul>
				</li>
				<li>
					<div>ITEM4-12</div>
					<ul>
						<li>
							<div>ITEM4-12-1</div>
						</li>
						<li>
							<div>ITEM4-12-2</div>
						</li>
						<li>
							<div>ITEM4-12-3</div>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</section>

Generated PDF file is

margin-off

Uncomment and add margin to the page.

@page {
	size: A4;
	margin: 3cm;
}

Generated PDF file is

margin-on

An unintended page break has been added after item3.

Workaround

If I add an element with a margin greater than the page margin, no page break will be added.

<!doctype html>
<meta charset="utf-8" />

<style>
	@page {
		size: A4;
		margin: 3cm;
	}

	body {
		font-size: 20pt;
	}

	#s1 {
		page-break-before: always;
		font-size: 16pt;
	}

	.margin {
		margin: 0 0 3.01cm 0;
	}
</style>

<section id="s0">
	<h1>1111</h1>
</section>
<section id="s1">
	<div class="margin"></div>
	<ul>...</ul>
</section>

margin-extra

If I change 3.01cm to 3cm (same as page margin), a page break will be added.

I could avoid adding page breaks, but it would create an extra margin.
To remove the extra margin, add negative margin to next element.

.margin + * {
	margin-top: -3.01cm;
}

margin-workaround

Version

# weasyprint --version
WeasyPrint version 54.1
@liZe
Copy link
Member

liZe commented Feb 22, 2022

Thanks for this bug report! The bug has already been fixed by 9b0a672 and will be included in version 54.2.

@liZe liZe closed this as completed Feb 22, 2022
@liZe liZe added this to the 54.2 milestone Feb 22, 2022
@liZe liZe added the bug Existing features not working as expected label Feb 22, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
54.2
Development

No branches or pull requests
2 participants
@liZe @lazex