I have a heading with the heading number in a span. I'm using display:table; for the heading and display:table-cell; for the number to get the heading number separated as a block on the left side of the heading text. This works without any problem, but as soon as I use prince-page-group:start; in the heading CSS, for exampe to hide the page number on pages with h1 @page:first no longer has any effect.

The attachment contains a sample.

I know that with browsers putting headings into divs can lead to problems with CSS counters, but is something smilar also true if display:table; is used (a heading inside a "virtual table")? This would be a pitty since display:table and display:table-cell are a very easy way to get nicely separated heading numbers.

Thanks,
Michael

1. Test.html‎ 9.1 kB

I wouldn't mix up structural and visual styling in this case. Just put every page-group inside a section-element and you're fine. You might also want to use counters instead of hardcoded chapter-numbering.

1. Test.html‎ 9.5 kB
2. Test.pdf‎ 43.6 kB

Thanks for the tip!

Unfortunatey I can't easily wrap h1 and below in sections because the document is generated by a MarkDown processor. I also don't/can't use CSS counters (to explain why is a bit out of scope).

So there is still the question if this is a bug or if it is within the CSS spec.

Edit:
I also saw, that using display: inline-table; for h1 "turns off" counter-reset: page;

Edited 20 Apr 2015 by mn4367

I tried your original test document, and I can't see the problem? eg. if I apply "background: red" in @page:first then it applies as expected. Am I missing something?

On the first page yes, but it also should apply to the page with the second h1 element because of prince-page-group: start;, shouldn't it?

I'm testing with the latest alpha build on OS X (prince-20150210-macosx.tar.gz).

Maybe I'm missing something?

Oh right, sorry, I see what you mean.

We will need to investigate the interaction between tables and prince-page-group. In the meantime, perhaps you could achieve the desired layout with floats instead? eg. apply some left margin to the heading, then apply "float: left" and some negative left margin to the number span, or something like that?

Thanks!

Yes, I know that I could use float and negative margins but the nice thing about using display:table; is that no matter how wide the span for the number is, there is always a constant width between the number and the text.

I didn't try if I can achive the same result with floats and negative margins, I suspect that I can't.

If the number is right aligned with the float, and has some right margin, then there will always be a fixed gap between the float and the text on the right, but the number will start at a different position on the left, like a list item marker, eg.

   1. Heading
  33. Heading
 444. Heading

This really would be easier if you could make small changes to the markup.

Perhaps you could adjust the DOM with JavaScript?

Yes it would be easier, unfortunately my use case doesn't allow that . Normally I'll have something like this:

<h1><span>Number</span> Content of the heading</h1>

The problem is that Number and Content of the heading can have almost arbitrary content. And the number has to be left aligned. This is why I choose display:table; and display:table-cell;. Another nice thing with this approach is that the content of the heading will be correctly left aligned if it spans multiple lines. And it also doesn't matter how many spaces are between the span and the content of the heading.

I think I'll have to dust off my compiler and modify my pre-processor to wrap headings or everything which belongs to headings into <section> elements .

Nevertheless it would be nice if display:*; wouldn't interfere with prince-page-group (if this is in line with the CSS spec, otherwise this behaviour perhaps is a case for documentation).

Thanks for looking at it!
Michael

If you don't want to modify your compiler, you could write some JavaScript that gets applied by Prince to grab the h1 elements and add some extra wrapper elements around the text content.

We will investigate the prince-page-group issue. Tables can introduce anonymous boxes which might be confusing things here.

I was just kidding, I'm developing software and the compiler is in daily use ...

Thanks very much!
Michael

Are there any news on that?