Log in / Register

Forum › Bugs

Intentional page-break and column-span leads to multiple unintentional page breaks

John
Hello,

I have a simple multi-column layout with one outer and multiple inner containers. The outer container has the column-count property applied, so all the inner containers and their content flow in two columns. Most of the inner containers have one H1, which spans over both columns.

When I add a page break before one of the inner containers now, I will not only get the intentional page break before the container, but also another one after the H1 with the column-span property applied:

<!doctype HTML>
<html>

	<head>
		<title>Column Span Test</title>
		<style type="text/css">

			.outerContainer {
				column-count: 2;
			}

			.innerContainer > h1 {
				column-span: all;
			}

			.innerContainer.third {
				page-break-before: always;
			}
		</style>
	</head>

	<body>
		<div class="outerContainer">
			<div class="innerContainer first">
				<h1>First</h1>
				<div class="content">
					my first content
				</div>
			</div>

			<div class="innerContainer second">
				<div class="content">
					my second content
				</div>
			</div>

			<div class="innerContainer third">
				<h1>Third</h1>
				<div class="content">
					my third content
				</div>
			</div>

			<div class="innerContainer fourth">
				<h1>Fourth</h1>
				<div class="content">
					my fourth content
				</div>
			</div>					
		</div>
	</body>
</html>


If I add more elements with column-span: all applied, i.e. more headlines, even more page breaks will be added. Is this intended behaviour? Or is it a bug? If so, can it be fixed or is there a workaround?

Note that some of the containers do not have a H1 and should flow immediately after the previous container has ended. For this reason the column-count property is applied to the outer container and not to the inner containers individually.

Greetings,
John
  1. column-span-h1.html‎ 0.8 kB
  2. output_with_H1_colspan.pdf‎ 18.4 kB
  3. output_without_H1_colspan.pdf‎ 18.1 kB
John
Hello,

can somebody confirm this bug or is it a problem with my setup? Am I doing something wrong here? If I can do something to help like testing, please don't bother asking.

Thanks in advance,
John

Edited by John

mikeday
This could be a bug, perhaps you can work around it by applying the page-break-before to the h1 element instead of the containing div?
John
Hello Mike,

yes this works. However, one needs to be careful because this may lead to side effects such as the TOC being off a page, when chapters have large margin/paddings. So one chapter starts on page 2, but the H1 appears on page 3. Linking to this chapter will give you the wrong page number, from a visual point of view.

Greetings,
John

John
Hello Mike,

do you need additional information or test cases to confirm, that this is a bug? Working around this behaviour is getting tedious... :)

Greetings,
John
John
Hello again,

after simplifying our HTML structure we have been running some tests again, eventually reproducing described behaviour above. However, we have nailed down the problem now. Consider this example:

<!doctype HTML>
<html>
<head>
<title>column span test</title>

<style>
	article {
		column-count: 2;
	}

	section {
		page-break-before: always;		
	}

	.column-span-all {
		column-span: all;
		background-color: #ccc;
	}
</style>

</head>

<body>

	introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction introduction 

	<article>

		<section>

		some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 

			<div class="column-span-all">
			highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 highlighted text 1 
			</div>

		some text 2 some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2	some text 2

			<div class="column-span-all">
			more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 more highlighted text 2 
			</div>

		some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3 some text 3
		</section>

		<section>
			next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section next section 
		</section>

	</article>
</body>

</html>


  • The "column-count" property is set for the <article> element.
  • Usually various <section> elements appear as children in the article element. They all should not be separated but flow as you would expect it in a two-column layout. Unless we want to manually add a break, as it is defined here.
  • If in one of the <section> elements there is an element with the "column-span" property set to "all", this will induce a page break before and after this element.

It appears as if the <article> (or <section>) element is internally somehow closed before the element with "column-span" set to "all" and reopened afterwards, provoking the additional page breaks.

Is this intended behaviour, I guess not? Can you look into this or at least tell me, if this is easy to fix or when it will be fixed? Do you need support in testing?

If this is not intended, this is a pretty serious bug, because documents with articles and sections, as well as nested sections are becoming more and more common.

Greetings,
John
  1. column-span-test.pdf‎ 12.9 kB ‎
    the output file
  2. column_span_test.html‎ 6.5 kB ‎
    the test html file

Edited by John

hallvord
Hi John, excellent demos - thank you! I've taken the liberty of adding them to a GitHub repository I've started, with miscellaneous random tests from the forum. This is going to be useful both to verify a fix when the developers get to this, and to make sure it doesn't regress again later on.

https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/column-count-column-span-and-page-breaks-001.htm
https://github.com/yeslogic/miscellaneous-testcases/blob/master/layout/column-count-column-span-and-page-breaks-002.htm

It certainly looks like a bug to me, and I hope it gets fixed :)

Announcement: repos for tests/utils

John
Hello hallvord,

thanks for your reply, finally somebody who can confirm this behaviour :) I wasn't aware of this repository, thanks for adding our test case.

greetings,
John
hallvord
This is a brand new repository, I've just started filling it with bits of miscellany that gets posted here. Feel free to do pull requests if you come across issues :D

Announcement: repos for tests/utils