Log in / Register

Forum › Bugs

Columns NOT Balancing Correctly

scott_w
When I have a <section> that goes to two columns and it is relatively short, a paragraph or two, the columns are not balancing as I would expect them to. For instance the first column will be three lines deeper then the second column, which I would expect that at least one of the lines from the first column would be added to the second leaving the columns only one line off. I have even seen examples where the first column is two lines off, which would be equal if one line from the first column was brought over to the second column.

So what I discovered is that if I have the font-size specified at the paragraph level for the <section> then this problem persists, but if I also place the same font size at a block level, say the <body> then the problem goes away and I get balanced columns. I have included the HTML file with the CSS. When the CSS looks like this (border and colors added for clarity): 

<style>
     body{
     }
     section{
          column-count:2;
          column-gap:1.25em;
          margin-bottom:1em;
          border:1pt solid rgb(225, 211, 157);
          padding:.5em .75em .75em .75em;
          background-color:rgb(245, 240, 221);
     }
     section p{
          font-size:9pt;
          line-height:1.33em;
     }
</style>


The columns do not balance as would be expected with the above CSS.

When you add font-size to the <body> like below then the columns balance:

<style>
     body{
          font-size:9pt;
     }
     section{
          column-count:2;
          column-gap:1.25em;
          margin-bottom:1em;
          border:1pt solid rgb(225, 211, 157);
          padding:.5em .75em .75em .75em;
          background-color:rgb(245, 240, 221);
     }
     section p{
          font-size:9pt;
          line-height:1.33em;
     }
</style>


I have also attached two PDF's showing you the results that I am getting. The PDF titled, "column-balance-bug-NO-extra-font-size" has five two column sections. Sections 1 and 4 have balancing issues. And section 3 is the only section that is perfectly balanced.

The PDF titled, "column-balance-bug-plus-extra-font-size" has all the columns balanced correctly, with two of them balanced perfectly. Section 1 is balanced perfectly when in the previous example it was off by three lines. And section 3 is one line off when it was perfectly balanced before.

Overall the second PDF has better line endings as well as better column balancing, the only difference is that even though the <p> tag has its font-size set to 9pt., you have to also put that same font-size on the <body>.

Now of course you will get the same results if just have the font size on the <body> but I needed to insure with the example that nothing about the font-size was changing between examples.

Also it is worth noting that if you set a larger font-size on the <body> and then a smaller on the paragraphs it still does NOT balance the columns correctly. But if you set the <body> to a smaller font-size then the paragraphs it does balance correctly.

We very often set the body to a given font-size and then when we switch to the two column sections or asides we change the font and its size, usually to smaller, and it is at that point that the column balancing begins to get thrown off.





  1. column-balance-bug-NO-extra-font-size.pdf‎ 45.0 kB
  2. column-balance-bug-plus-extra-font-size.pdf‎ 45.0 kB
  3. column-balance-bug.html‎ 3.3 kB
mikeday
The section element has padding defined using em units, which are relative to font-size. So changing the font-size on the body will adjust the padding around the section, changing the available space and affecting line-breaking and column-balancing.

You can see this by changing the font-size, then loading both PDF files and flipping back and forth between them to see how the boxes change shape and position slightly.

If exact column balancing is important then you may also wish to apply "widows: 1; orphans 1", as the default value is 2 which will make Prince try to avoid leaving the first or last line of a paragraph before or after a break.
scott_w
Even when I make the adjustments you suggested I am still seeing the same issues. I have attached two PDF's, the first one labeled option 1 uses the following CSS.

<style>
	body{
	}
	section{
		column-count:2;
		column-gap:1.25em;
		margin-bottom:1em;
		border:1pt solid rgb(225, 211, 157);
		padding:6pt 9pt 9pt 9pt;
		background-color:rgb(245, 240, 221);
		widows:1;
		orphans:1;
	}
	section p{
		font-size:9pt;
		line-height:1.33em;
	}
</style>


For option 2 I just added the "font-size:9pt" to the body, it looks like this:

<style>
	body{
		font-size:9pt;
	}
	section{
		column-count:2;
		column-gap:1.25em;
		margin-bottom:1em;
		border:1pt solid rgb(225, 211, 157);
		padding:6pt 9pt 9pt 9pt;
		background-color:rgb(245, 240, 221);
		widows:1;
		orphans:1;
	}
	section p{
		font-size:9pt;
		line-height:1.33em;
	}
</style>


In theory it appears that when the two column balancing begins it is using the font-size that is inherited on the element that the columns are applied to, which in this case is the <section> element. Because the inherited point size is larger on the <section> element then its content point size, which is set at 9 point, it begins its calculations for balancing using the wrong font-size, and then when the correct font size for the contents become apparent the box size, driving by the line break, is already created and the smaller point size fills up less space then the calculations planned on and you get the very odd balancing act. I also think that is why this problem persists whenever the point size on the <section> is increased, but goes away when the point size on the <section> is less then the point size of its contents. (Of course this balancing is also tied to the line-height as well as the point size, but the point size appears to be the major offender.)

If you increase the point size on the <body> element in my example to 24 point you will see what I mean about how it appears to adversely effect the balancing of the columns because of the persistent line break issues as compared to smaller point size like 6 point. (I have included PDF's of these tests as well.)

Now to further proove that there is something in the font size, compare the line breaks in the "column-balance-option-2" and the "column-balance-option-TEST-6pt" PDF(s). You will see that even though the values set on the paragraphs in <section> are exactly the same that the one that started with the <body> set at 6 point versus the one set with the <body> at 9 point delivers very different line breaks and thereby column balancing.

Now if you go to the extreme and set the point size on the <body> to 100 you can see how the point size on the block element effects the balancing regardless of the contents point size inside that element.

Obviously we are not doing something this extreme, the content in the two column <section>(s) were 1 pt size smaller then the <body>.



  1. column-balance-option-1.pdf‎ 45.0 kB
  2. column-balance-option-2.pdf‎ 45.0 kB
  3. column-balance-option-TEST-24pt.pdf‎ 45.0 kB
  4. column-balance-option-TEST-6pt.pdf‎ 45.0 kB
mikeday
Yes I think you have it exactly right: the column balancing is using the element line-height during the balancing process. Technically we could do it some other way, but this is the way it was implemented at the time.

Is it okay if you specify the same line-height on the section element?
scott_w
So I think all my tests and your feedback indicates that the balancing of the columns is based upon the line-height set on the black element the columns are applied to and not on the line-height that the children paragraphs and headings might have. Point size differences can exaggerate the problems by changing the line endings as does column widths set in relative values such as "em" instead of a fixed value like points.

So if the line-height on the block element the columns are applied to is larger then the line-height of the contentment to be balanced we are going to experience issues, especially with shorter content, where the number of lines in the first column can be two or more greater then the lines in the second column, but if the line-height is the same for block and content elements then we get columns that are balanced, e.g., with no more then a single line difference in a two column format.

Is this correct? My tests seem to prove this out but just want to make sure so when we are making adjustments to the CSS to get the best results I am doing it with some confidence that this is how the balancing was designed.
mikeday
Yes, this is correct.