3

My HTML document is formatted to have its content printed. Each printed page is framed inside a table.

The document also has headings laid out on the pages (h1...h5).

The problem is when a a sub-heading (at level h2..h5) is continued on the next printed page (i.e.: table).

This is what I get:

1.     (1.)
1.1.   (1.1.)
1.2.   (1.2.)
1.2.1. (1.2.1.)
1.3.   (1.3.)
---------------- page break (i.e.: new table)
1.1.   (1.4.)
2.     (2.)
2.1.   (2.1.)
2.1.1. (2.1.1)
2.1.2. (2.1.2)

As you can see, the H2 element is out in the weeds when referenced in the next table. Specifically, it is "1.1" when I want it to be "1.4".

Here's my html/css:

    <HTML>
     <HEAD>
      <STYLE>
       .initHeadingCounters
        {
        counter-reset: headingCounter1 headingCounter2 headingCounter3 headingCounter4 headingCounter5;
        }

       .counter_h1
        {
        counter-reset: headingCounter2 headingCounter3 headingCounter4 headingCounter5;
        }
       .counter_h1:before
        {
        counter-increment: headingCounter1;
        content: counter(headingCounter1) ". ";
        }

       .counter_h2
        {
        counter-reset: headingCounter3 headingCounter4 headingCounter5;
        }
       .counter_h2:before
        {
        counter-increment: headingCounter2;
        content: counter(headingCounter1) "." counter(headingCounter2) ". ";
        }

       .counter_h3
        {
        counter-reset: headingCounter4 headingCounter5;
        }
       .counter_h3:before
        {
        counter-increment: headingCounter3;
        content: counter(headingCounter1) "." counter(headingCounter2) "." counter(headingCounter3) ". ";
        }

       .counter_h4
        {
        counter-reset: headingCounter5;
        }
       .counter_h4:before
        {
        counter-increment: headingCounter4;
        content: counter(headingCounter1) "." counter(headingCounter2) "." counter(headingCounter3) "." counter(headingCounter4) ". ";
        }
      </STYLE>
     </HEAD>

     <BODY>
      <DIV Class="initHeadingCounters">

      <TABLE>
       <TR>
        <TD>
         <H1 Class="counter_h1">(1)</H1>
          <H2 Class="counter_h2">(1.1)</H2>
           <H2 Class="counter_h2">(1.2)</H2>
           <H3 Class="counter_h3">(1.2.1)</H3>
          <H2 Class="counter_h2">(1.3)</H2>
        </TD>
       </TR>
      </TABLE>

      <TABLE>
       <TR>
        <TD>
          <H2 Class="counter_h2">(1.4)</H2>
         <H1 Class="counter_h1">(2)</H1>
          <H2 Class="counter_h2">(2.1)</H2>
           <H3 Class="counter_h3">(2.1.1)</H3>
           <H3 Class="counter_h3">(2.1.2)</H3>
        </TD>
       </TR>
      </TABLE>

     </DIV>
    </BODY>
   </HTML>
Mahonri Moriancumer
  • 5,993
  • 2
  • 18
  • 28
  • 1
    This is interesting, not sure if you can avoid it. It's explained in item 12.4.1 Nested counters and scope https://www.w3.org/TR/CSS2/generate.html#counters – rafaelcastrocouto Mar 13 '18 at 21:26
  • 1
    @rafaelcastrocouto, Thanks... You may be right; that it can't be avoided. Just hoping for a css miracle worker who might... – Mahonri Moriancumer Mar 13 '18 at 21:31
  • 1
    Interesting problem. I had hopes that you could avoid the inner nested `counter-reset` properties, by writing something like `counter-increment: headingCounter3 -counter(headingCounter3)` instead, or some variant with `calc`, but none of that works. Sorry! – Mr Lister Mar 14 '18 at 08:15
  • @MrLister, I went down that same calc road as you did, with the same lack of success. Thanks for your pursuit. – Mahonri Moriancumer Mar 14 '18 at 17:47

0 Answers0