search

vivliostyle / vivliostyle.js

📖 The power of CSS typesetting, right at your fingertips.
https://vivliostyle.org
GNU Affero General Public License v3.0
603 stars 52 forks source link

Empty pseudo element leads to an empty page #1144

Closed depth42 closed 1 year ago

depth42 commented 1 year ago

Describe the bug If an HTML element receives e pseudo-element whose content is an empty string, Vivliostyle nevertheless creates an empty page for it.

To Reproduce Paginate the attached very simple test document with Vivliostyle v2.23.0

Expected behavior The first page should not be empty. (As a reference, PrinceXML does not create an empty in this case)

*Desktop:

Note: It is interesting, that the bug still occurs if I remove the id="header" attribute from the first div. The CSS rule for the pseudo-element should then be totally inactive, but the bug still occurs. The bug only disappears, if I remove the ids from both divs. This seems as if the CSS cascading is broken there as well.

empty-page-bug.html.zip

MurakamiShinyu commented 1 year ago

I think this is not a bug. The ::before pseudo element is treated as like a span element inserted before the first non-pseudo child element. As a result, the document structure becomes as like:

  <body>
    <div id="header">
      <span><!-- ::before pseudo --></span>
      <div id="toc"><!-- page: tableofcontents -->
        <ul>
          <li><a href="#chapter">Chapter</a></li>
        </ul>
      </div>
    </div>
  </body>

The page property which starts the new named page causes a forced page break. This page break occurs between the ::before pseudo element of <div id="header"> and the <div id="toc"> element. I think this is a correct behavior.