From f255ad673323a925625c527d92580bccb766e29a Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Mon, 16 Mar 2026 14:52:34 +0100 Subject: [PATCH] blockauote --- maquette-tests/assets/css/03_layout.css | 4 ++ maquette-tests/assets/css/blockquote.css | 47 ++++++++++++++++++++++ maquette-tests/assets/css/item-decor.css | 16 -------- maquette-tests/assets/css/running-page.css | 3 +- maquette-tests/assets/css/text.css | 35 +++------------- maquette-tests/csspageweaver/manifest.json | 6 +-- maquette-tests/js/decor-blockquote.js | 33 +++++++++++++++ maquette-tests/js/decor-num-pages.js | 6 +-- 8 files changed, 97 insertions(+), 53 deletions(-) create mode 100644 maquette-tests/assets/css/blockquote.css delete mode 100644 maquette-tests/assets/css/item-decor.css create mode 100644 maquette-tests/js/decor-blockquote.js diff --git a/maquette-tests/assets/css/03_layout.css b/maquette-tests/assets/css/03_layout.css index af75700..1aa5455 100644 --- a/maquette-tests/assets/css/03_layout.css +++ b/maquette-tests/assets/css/03_layout.css @@ -196,6 +196,10 @@ position: running(decor); } +.pagedjs_area{ + position: relative; +} + .pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{ content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; diff --git a/maquette-tests/assets/css/blockquote.css b/maquette-tests/assets/css/blockquote.css new file mode 100644 index 0000000..5945193 --- /dev/null +++ b/maquette-tests/assets/css/blockquote.css @@ -0,0 +1,47 @@ + +blockquote{ + /* padding-left: 3ch; */ + + margin-top: calc(var(--baseline)*1); + margin-bottom: calc(var(--baseline)*1); + padding-left: calc(var(--unit)*0.75); + padding-right: calc(var(--unit)*0.75); + + +} + + +blockquote p::before{ + display: none; +} + + +.before-blockquote_container, +.after-blockquote_container{ + position: absolute; + overflow: hidden; +} + +.before-blockquote_container{ + left: 0px; +} + +.after-blockquote_container{ + right: -10px; +} + +.after-blockquote, +.before-blockquote{ + font-size: var(--sign-size); + color: var(--sign-color); + letter-spacing: var(--sign-spacing); + line-height: var(--sign-baseline); + word-break: break-all; + width: calc(var(--unit)*0.5 + 4px); + overflow-wrap: anywhere; + position: relative; + top: -3px; +} + + + diff --git a/maquette-tests/assets/css/item-decor.css b/maquette-tests/assets/css/item-decor.css deleted file mode 100644 index fe7bcf5..0000000 --- a/maquette-tests/assets/css/item-decor.css +++ /dev/null @@ -1,16 +0,0 @@ -.item-decor{ - font-family: var(--sans); - font-weight: 400; - font-size: 12px; - position: absolute; - - -} - -.pagedjs_left_page .item-decor{ - left: -12mm; -} - -.pagedjs_right_page .item-decor{ - right: -12mm; -} \ No newline at end of file diff --git a/maquette-tests/assets/css/running-page.css b/maquette-tests/assets/css/running-page.css index c43cedf..9450eb4 100644 --- a/maquette-tests/assets/css/running-page.css +++ b/maquette-tests/assets/css/running-page.css @@ -24,7 +24,6 @@ padding-left: 11px; padding-right: 6px; display: flex; - /* background-color: yellow; */ } .running-page .symbols{ @@ -34,7 +33,7 @@ .running-page .dots{ position: relative; top: -5px; - left: -10px; + left: -5px; } .pagedjs_right_page .running-page_container .running-page{ diff --git a/maquette-tests/assets/css/text.css b/maquette-tests/assets/css/text.css index cb094dd..6d50845 100644 --- a/maquette-tests/assets/css/text.css +++ b/maquette-tests/assets/css/text.css @@ -14,13 +14,14 @@ p::before{ - content: "............"; + content: "..........."; font-size: var(--sign-size); color: var(--sign-color); letter-spacing: var(--sign-spacing); line-height: var(--sign-baseline); position: relative; top: -3px; + padding-right: 8px; /* position: absolute; left: 0; */ } @@ -32,41 +33,17 @@ p::before{ -blockquote p{ - /* font-family: var(--mono); */ -} - -blockquote{ - padding-left: 3ch; - /* font-style: italic; */ - - margin-top: calc(var(--baseline)*0.5); - margin-bottom: calc(var(--baseline)*0.5); - - -} - -blockquote::before{ - content: "> > > > > > > > > >"; - display: block; - width: 1ch; - position: absolute; - left: 0; - font-family: var(--mono); - font-size: var(--fs-nav); - font-style: normal; -} + -.chapter > :first-child{ + +/* .chapter > :first-child{ margin-top: 0px; } -.pagedjs_area{ - position: relative; -} + */ diff --git a/maquette-tests/csspageweaver/manifest.json b/maquette-tests/csspageweaver/manifest.json index d7c14fb..a54b3d2 100644 --- a/maquette-tests/csspageweaver/manifest.json +++ b/maquette-tests/csspageweaver/manifest.json @@ -27,7 +27,7 @@ "assets/css/02_body.css", "assets/css/03_layout.css", "assets/css/chapter-header.css", - "assets/css/item-decor.css", + "assets/css/blockquote.css", "assets/css/notes.css", "assets/css/text.css", "assets/css/subtitles.css", @@ -35,8 +35,8 @@ ], "hook": [ "/js/decor-subtitles.js", - "/js/decor-num-pages.js" - + "/js/decor-num-pages.js", + "/js/decor-blockquote.js" ] } diff --git a/maquette-tests/js/decor-blockquote.js b/maquette-tests/js/decor-blockquote.js new file mode 100644 index 0000000..ac0f5f2 --- /dev/null +++ b/maquette-tests/js/decor-blockquote.js @@ -0,0 +1,33 @@ +import { Handler } from '/csspageweaver/lib/paged.esm.js'; + + +export default class itemsDecor extends Handler { + constructor(chunker, polisher, caller) { + super(chunker, polisher, caller); + this.symbol = "."; + } + afterPageLayout(pageElement, page, breakToken) { + let blockquotes = pageElement.querySelectorAll("blockquote"); + blockquotes.forEach((blockquote) => { + const container = document.createElement("div"); + container.className = "before-blockquote_container"; + const inner = document.createElement("div"); + inner.className = "before-blockquote"; + inner.textContent = this.symbol.repeat(300); + container.appendChild(inner); + blockquote.insertBefore(container, blockquote.firstChild); + container.style.height = `${blockquote.offsetHeight}px`; + + const containerAfter = document.createElement("div"); + containerAfter.className = "after-blockquote_container"; + const innerAfter = document.createElement("div"); + innerAfter.className = "after-blockquote"; + innerAfter.textContent = this.symbol.repeat(300); + containerAfter.appendChild(innerAfter); + blockquote.insertBefore(containerAfter, container.nextSibling); + containerAfter.style.height = `${blockquote.offsetHeight}px`; + }); + } + + +} diff --git a/maquette-tests/js/decor-num-pages.js b/maquette-tests/js/decor-num-pages.js index 97e61cc..380cbd9 100644 --- a/maquette-tests/js/decor-num-pages.js +++ b/maquette-tests/js/decor-num-pages.js @@ -10,9 +10,9 @@ export default class itemsDecor extends Handler { afterPageLayout(pageElement, page, breakToken) { const numPage = parseInt(pageElement.dataset.pageNumber); - const half = this.totalPages / 2; - const isFirstHalf = numPage <= half; - console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié"); + // const half = this.totalPages / 2; + // const isFirstHalf = numPage <= half; + // console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié"); const area = pageElement.querySelector(".pagedjs_area"); if (area) {