Log in / Register

Forum › Bugs

Why is the "margin" property of elements surrounding elements spanned over all columns ignored?

John
Hello again,

I have the following very simple HTML document:
<!DOCTYPE HTML>
<html>
  <head>
    <style type="text/css" media="all">

      body {
        margin: 0;
        padding: 0;
      }

      article {
        column-count: 2;
      }

      h1 {
        margin: 0;
        column-span: all;
      }

      p {
        margin: 5cm 0 20cm 0;
        background-color: lightblue;
      }

      div.blocked-content {
        background-color: green;
        column-span: all;
      }
    </style>

    
  </head>
  <body>
    <article>
        <h1>First headline</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata...</p>
        <div class="blocked-content">
          image / table / figure...
        </div>
    </article>

  </body>
</html>

The <article> element has the propery "column-count: 2" set. Both the "H1" as well as the "div.blocked-content" have the "column-span: all" set. Only the <p> in between is rendered in two columns. The <p> element has also "margin" defined: 5cm to the top, 20cm to the bottom.
However, it appears as if the margin is ignored due to the surrounding elements having "column-span: all" set. Is this intended behaviour?

I have attached the input, as well as the output document.

Greetings,
John
  1. output.pdf‎ 22.8 kB ‎
    output file
  2. result.html‎ 0.9 kB ‎
    input file

Edited by John

markbrown
No, that's not the intended behaviour. Thanks for the bug report; we will look into this issue.

Edit: on second thought, perhaps this is the intended behaviour. The rationale for ignoring or collapsing margins at the top of columns would be to ensure that, in the case a margin is used between paragraphs, content lines up across the columns irrespective of whether there are new paragraphs at the start of some columns.

In CSS there's no way to select paragraphs based on whether they are laid out at the top of a column, so I think this common use case would not otherwise be possible.

Edited by markbrown

John
Edit: on second thought, perhaps this is the intended behaviour. The rationale for ignoring or collapsing margins at the top of columns would be to ensure that, in the case a margin is used between paragraphs, content lines up across the columns irrespective of whether there are new paragraphs at the start of some columns.


That makes sense. Thanks for the clarification. I will discuss this with my colleagues and come back to you.

Greetings,
John
markbrown
I will discuss this with my colleagues and come back to you.


I have done likewise :-)

The conclusion is that it's intended that margins are truncated for most columns, but there are supposed to be exceptions such as after a forced break. I've added it to my TODO list to implement these exceptions properly.

Please keep the examples coming, as they are very helpful!
John
Hello Mark,

it's also helpful for us to understand how the layout process actually works. As there is no best practice documentation on how to write "CSS for Prince", we are doing this now in order to avoid the problems we are experiencing. I hope this way we can resolve most issues, so we can keep using PrinceXML.

Thanks for the clarifications, we will provide more examples/questions for sure. Stay tuned.

Greetings,
John