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.

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

Fix column balance when children are not inline #686

Closed
JohannesMunk opened this issue Sep 14, 2018 · 7 comments

Comments

4 participants
@JohannesMunk
Copy link

commented Sep 14, 2018

Hello WP-Team! Sorry for being the source of so many issues at the moment. But I have found another one, that seems harder to circumvent.

There is a problem in getting the height in a multi-column layout right. It is chosen so high, that a 3 column layout breaks down to an unbalanced 2 column layout!

2018-09-14 10_26_26-avscrollview

<html lang="de">
 <head>
  <meta charset="utf-8" />
  <title>wp-column-balance-test</title>
  <style>
		body {
			font-size: 9pt !important;
			font-family: DejaVu Sans, sans-serif;
		}
		.legalInfoPrefix {
			margin-top: 0.5em;
			border: 1px solid blue;
			column-count: 3;
			-webkit-column-count: 3;
		}
		.legal {
			margin-top: 0;
			margin-bottom: 0.5em;
			break-inside: auto;
		}

		h3 {
			font-size: 1.0em;
			margin: 0;
			padding: 0;
		}
		@media print {
			@page {
				size: A4;
				margin: 0;
			}
		}
	</style>
 </head>
<body>
 <div id="full">
   <div class='legalInfoPrefix'>
	<h3>Title 1</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
	<h3>Title 2</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
	<h3>Title 3</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    </p>
	<h3>Title 4</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
    </p>
	<h3>Title 5</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
    </p>
  </div>
   <div class='legalInfoPrefix'>
	<h3>Title 1</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
	<h3>Title 2</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
	<h3>Title 3</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehend
    </p>
	<h3>Title 4</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehend
    </p>
	<h3>Title 5</h3>
    <p class='legal'>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
    </p>
  </div>
 </div>
</body>
</html>

wp-column-balance-test.html.pdf

Any ideas? Thx a lot in advance!

@liZe liZe added the bug label Sep 17, 2018

@liZe

This comment has been minimized.

Copy link
Member

commented Sep 17, 2018

Current column balancing is pretty stupid and should be rewritten. It assumes that children are unbreakable, that's what gives erratic rendering. The best solution is probably to implement fragmentation (part of #36) and use fragmentation points.

@Tontyna

This comment has been minimized.

Copy link
Contributor

commented Sep 17, 2018

Oh yes, the whole layout code is a hotchpotch and needs a redesign

@JohannesMunk

This comment has been minimized.

Copy link
Author

commented Sep 17, 2018

Ok! Except for manually putting each heading into a specific "column"-container side by side, without any automatic column-layout, do you see a way for me to cheat, until you have reworked the layout code? Manually restricting the height of the legalInfoPrefix container leads to a mostly invisible fourth column as overflow..

@ramonski

This comment has been minimized.

Copy link

commented Sep 17, 2018

Not sure if this is a valid workaround, I did not test it yet:

Define <div class="row"></div> with a fixed height. Each paragraph inside there is defined as a column and floats to the left.

I'm not sure how this will affect page breaks and you probably need to do a clear: left after each row. Also see #36

I'm using bootstrap for the reports and added recently this print CSS because WP does not yet support flex-box layouts: https://github.com/senaite/senaite.impress/blob/master/src/senaite/impress/static/css/bootstrap-print.css

Columns seem to work with this column definition pretty well, but as I said, the page breaks need to be considered.

@liZe

This comment has been minimized.

Copy link
Member

commented Sep 17, 2018

Another awful hack is to only have inline boxes in columns. You can use:

h3 {
  display: inline-block;
  width: 100%;
}
p {
  display: inline;
}

Of course, it works for your example but may have to be adapted for more complex content.

@JohannesMunk

This comment has been minimized.

Copy link
Author

commented Sep 17, 2018

@liZe: That works like a charm and is a suitable workaround for what we need right now! Thank you!

@ramonski: Unfortunately I dont know the heights of my elements upfront. Sure I could make an educated guess - approximating by the number of characters etc.. and then round up a lot.. but liZes suggestion was the easier solution here. Will keep the float left approach in mind, though. Thank you too.

@liZe liZe changed the title Column balance Fix column balance when children are not inline Sep 17, 2018

@liZe liZe added this to the 48 milestone Jun 28, 2019

@liZe

This comment has been minimized.

Copy link
Member

commented Jul 3, 2019

We now use the real layout to balance columns. It's slower, but the result is much better!

See #878.

@liZe liZe closed this Jul 3, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.