fix: Page breaks not made between some inline elements such as images

- fix #1319 - fix #1051
vivliostyle · May 22, 2024 · 4380055 · 4380055
1 parent a98aa88
commit 4380055
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 28 deletions.
diff --git a/packages/core/src/vivliostyle/base.ts b/packages/core/src/vivliostyle/base.ts
@@ -702,3 +702,16 @@ export class SimpleEventTarget {
   }
 }
 export type EventTarget = SimpleEventTarget;
+
+export const mediaTags = {
+  audio: true,
+  canvas: true,
+  embed: true,
+  iframe: true,
+  img: true,
+  math: true,
+  object: true,
+  picture: true,
+  svg: true,
+  video: true,
+};
diff --git a/packages/core/src/vivliostyle/layout.ts b/packages/core/src/vivliostyle/layout.ts
@@ -319,13 +319,6 @@ export function calculatePseudoElementHeight(
   return height;
 }
 
-export const mediaTags = {
-  img: true,
-  svg: true,
-  audio: true,
-  video: true,
-};
-
 /**
  * Represents a constraint on layout
  */
@@ -378,7 +371,7 @@ export class BoxBreakPosition
     }
     if (!this.alreadyEvaluated) {
       this.breakNodeContext = column.findBoxBreakPosition(this, penalty > 0);
-      this.alreadyEvaluated = true;
+      this.alreadyEvaluated = !!this.breakNodeContext || penalty > 0;
     }
     return this.breakNodeContext;
   }
@@ -1800,7 +1793,7 @@ export class Column extends VtreeImpl.Container implements Layout.Column {
     }
     return (
       checkPoints[0].sourceNode == checkPoints[1].sourceNode &&
-      mediaTags[(checkPoints[0].sourceNode as Element).localName]
+      Base.mediaTags[(checkPoints[0].sourceNode as Element).localName]
     );
   }
 
@@ -2092,12 +2085,14 @@ export class Column extends VtreeImpl.Container implements Layout.Column {
           // Skip special
           seekRange = !haveStart;
         } else if (
+          !element.firstChild ||
+          Base.mediaTags[element.localName] ||
           /^r(uby|[bt]c?)$/.test(element.localName) ||
           LayoutHelper.isSpecialInlineDisplay(
             this.clientLayout.getElementComputedStyle(element).display,
           )
         ) {
-          // ruby, inline-block, etc.
+          // img, ruby, inline-block, etc.
           seekRange = !haveStart;
           if (seekRange) {
             if (element.localName === "ruby" && node.firstChild) {
@@ -2106,8 +2101,8 @@ export class Column extends VtreeImpl.Container implements Layout.Column {
             }
             range.setStartBefore(node);
             haveStart = true;
-            lastGood = node;
           }
+          lastGood = node;
           if (node.contains(end)) {
             endNotReached = false;
           }
@@ -3037,7 +3032,7 @@ export class Column extends VtreeImpl.Container implements Layout.Column {
                 }
               }
               const viewTag = (nodeContext.viewNode as Element).localName;
-              if (mediaTags[viewTag]) {
+              if (Base.mediaTags[viewTag]) {
                 // elements that have inherent content
                 // check if a forced break must occur before the block.
                 if (needForcedBreak()) {
@@ -3208,7 +3203,7 @@ export class Column extends VtreeImpl.Container implements Layout.Column {
                 nodeContext.breakBefore,
               );
               const viewTag = (nodeContext.viewNode as Element).localName;
-              if (mediaTags[viewTag]) {
+              if (Base.mediaTags[viewTag]) {
                 // elements that have inherent content
                 // check if a forced break must occur before the block.
                 if (Break.isForcedBreakValue(breakAtTheEdge)) {

diff --git a/packages/core/src/vivliostyle/text-polyfill.ts b/packages/core/src/vivliostyle/text-polyfill.ts
@@ -295,19 +295,6 @@ function normalizeLang(lang: string): string | null {
   return null;
 }
 
-const embeddedContentTags = {
-  audio: true,
-  canvas: true,
-  embed: true,
-  iframe: true,
-  img: true,
-  math: true,
-  object: true,
-  picture: true,
-  svg: true,
-  video: true,
-};
-
 class TextSpacingPolyfill {
   getPolyfilledInheritedProps() {
     return ["hanging-punctuation", "text-autospace", "text-spacing-trim"];
@@ -639,7 +626,7 @@ class TextSpacingPolyfill {
             (prevP.display && !/^(inline|ruby)\b/.test(prevP.display)) ||
             (prevP.viewNode?.nodeType === 1 &&
               ((prevP.viewNode as Element).localName === "br" ||
-                embeddedContentTags[(prevP.viewNode as Element).localName]))
+                Base.mediaTags[(prevP.viewNode as Element).localName]))
           ) {
             break;
           }
@@ -670,7 +657,7 @@ class TextSpacingPolyfill {
             (nextP.display && !/^(inline|ruby)\b/.test(nextP.display)) ||
             (nextP.viewNode?.nodeType === 1 &&
               ((nextP.viewNode as Element).localName === "br" ||
-                embeddedContentTags[(nextP.viewNode as Element).localName]))
+                Base.mediaTags[(nextP.viewNode as Element).localName]))
           ) {
             if (
               next === checkPoints.length - 1 &&