blockauote

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) ;

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;
+}
+
+
+

maquette-tests/assets/css/item-decor.css

@@ -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;
-}

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{

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;
-}

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"
     ]
 }
 

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`;
+      });
+    }
+
+     
+}

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 half = this.totalPages / 2;
-      const isFirstHalf = numPage <= half;
+    //   const isFirstHalf = numPage <= half;
-      console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié");
+    //   console.log(numPage, isFirstHalf ? "première moitié" : "deuxième moitié");
 
       const area = pageElement.querySelector(".pagedjs_area");
       if (area) {