Julie/walter-boente_book-collection
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

paragraphe 2 colonnes

Browse source
This commit is contained in:
Julie Blanc 2026-04-15 11:08:34 +02:00
parent 79b2753fdb
commit a51a86aa6f
6 changed files with 29 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

22
js/snapToBaseline.js
View file

@ -24,11 +24,17 @@ export default class snapToBaseline extends Handler {
const area = node.closest('.pagedjs_area');
if (area) {
const areaRect = area.getBoundingClientRect();
const nodeRect = node.getBoundingClientRect();
const relativeTop = nodeRect.top - areaRect.top;
// getClientRects()[0] = premier fragment (colonne 1 si le paragraphe
// s'étend sur 2 colonnes). getBoundingClientRect().top retournerait
// le minimum des deux tops, soit le haut de la colonne 2 — incorrect.
const firstRect = node.getClientRects()[0];
if (!firstRect) return node;
const relativeTop = firstRect.top - areaRect.top;
const modulo = relativeTop % this.baseline;
if (modulo !== 0) {
node.style.paddingTop = (this.baseline - modulo) + 'px';
node.style.color = "green";
}
}
return node;
@ -43,11 +49,17 @@ export default class snapToBaseline extends Handler {
const paragraphs = pageElement.querySelectorAll('p');
paragraphs.forEach((node) => {
const nodeRect = node.getBoundingClientRect();
if (nodeRect.bottom < areaRect.bottom - this.baseline) return;
if (!shouldSnap(node)) return;
const relativeTop = nodeRect.top - areaRect.top;
const firstRect = node.getClientRects()[0];
if (!firstRect) return;
// firstRect.bottom = bas du premier fragment (colonne 1 pour un paragraphe
// qui s'étend sur 2 colonnes). Cela permet de cibler correctement les
// paragraphes dont la première partie touche le bas de la colonne.
if (firstRect.bottom < areaRect.bottom - this.baseline) return;
const relativeTop = firstRect.top - areaRect.top;
const modulo = relativeTop % this.baseline;
if (modulo !== 0) {
node.style.paddingTop = (this.baseline - modulo) + 'px';