<ol> elements should not be deleted when empty
See src/modules/paged-media/lists.js
ln 21-23:
// Keeping lines 18-20 for context
if (list.hasChildNodes()) {
list.start = list.firstElementChild.dataset.itemNum;
}
else {
list.parentNode.removeChild(list);
}
When a <ol>
is empty, it is removed from the layout. This includes splitted parts of the <ol>
if they are empty (even if the original is not).
It seems that this behaviour has been set in order to remove empty <ol>
elements at the end of pages (see 66be03f7).
I think this should not be the case for a few reasons:
- The
<ol>
's rendering is already done, which means that following elements may already have been pushed to the next page anyway, resulting in blank spaces; - If the
<ol>
is splitted in a way that makes the first part empty, it will remove it (I guess it was the intended behaviour). As a side effect, this will also remove any:before
pseudo-element the original<ol>
was meant to have, since it is applied to the first splitted part (such a configuration can happen if you define a:before
pseudo-element without aposition
attribute, or with aposition
set torelative
, etc.); - I guess it is also true for
:after
pseudo element if the last part is empty, but I didn't test this exact configuration; - It also means that we lose the
margin-top
,padding-top
, etc.; - This is inconsistent with the
<ul>
element, which is not removed even if empty; - It will also remove non-splitted but empty
<ol>
elements; - PagedJs is not supposed (?) to remove empty elements of any kind. We should be able to define empty elements if we want to, and not having their corresponding styles/pseudo-elements disappear;
-
<ol>
elements can be empty, according to the spec.
Of course, it would be great to know why this change has been made in the first place. Maybe it was relevant back then but not anymore, or maybe there is something I don't know.
Anyway, I made a merge request (tools/pagedjs!153).
In the following image you can see the expected behaviour (with ln 21-23 removed).
But currently, the <ol>
's splitted part 1 is removed. The :before
pseudo-element is removed with it. However, since the layout was made before the deletion, the first <li>
is still at page 2, leaving a blank space at the end of page 1.
(Please keep in mind that if I want to avoid having my pseudo-element in the previous page, I still can:
- Set
break-inside: avoid
to the<ol>
; - Set a
margin-top
to the<ol>
andposition: absolute
to the:before
.
I obviously didn't do it in the example.)