imposition planche

assets/css/portfolio.css

@@ -80,7 +80,7 @@
   height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2);
   top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
   left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
- z-index: -1;
+ /* z-index: -1; */
 }
 
 
@@ -94,7 +94,7 @@
 
 .portfolio-spread figure{
   position: absolute;
-  z-index: -1;
+  /* z-index: -1; */
   width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
   height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
   top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
@@ -231,7 +231,7 @@ break-before: right;
 
 
 
-/* ------ DOUBLE PAGE ------- */ 
+/* ------ DOUBLE PAGE (SUPPRIMER) ------- */ 
 
 .spread{
   position: absolute;

assets/css/print.css

@@ -12,6 +12,11 @@
     --running-bottom: 6mm;
     --running-left: 19px;
     --running-left-bottom: 55px;
+
+    bleed: 0mm;
+
+    /* bleed: 6mm;
+    marks: crop */
   }
 
   @page:left {

assets/css/typesetting.css

@@ -1,6 +1,6 @@
 :root{
     --bg-type: rgba(232, 232, 5, 0.36);
-    --bg-type: transparent;
+    /* --bg-type: transparent; */
 }
 
 /* (print-break:) */

assets/js/plugins/imposition.js

@@ -49,6 +49,86 @@ class Booklet extends Paged.Handler {
             }
 
 
+            /* SPREAD (PLANCHE) ------------------------------------------------*/
+            window.addEventListener("beforeprint", () => {
+                if (!window.enableSpread) return;
+                injectSpreadCSS();
+            });
+
+            window.addEventListener("afterprint", () => {
+                window.enableSpread = false;
+                let s = document.getElementById("spread-planche-style");
+                if (s) s.remove();
+            });
+
+            function injectSpreadCSS() {
+                let format = document.querySelector(".pagedjs_page");
+
+                let width = getCSSCustomProp("--pagedjs-width", format);
+                let numbers = width.match(/[0-9]+/g).map(n => +n);
+                width = parseInt(numbers[0]);
+
+                let height = getCSSCustomProp("--pagedjs-height", format);
+                numbers = height.match(/[0-9]+/g).map(n => +n);
+                height = numbers.reduce((a, b) => a + b);
+
+                let bleedNum = parseInt(getCSSCustomProp("--pagedjs-bleed-top", format));
+
+                let spread     = width * 2 + bleedNum * 2;
+                let spreadHalf = width + bleedNum;
+
+                let styleSpread = document.createElement("style");
+                styleSpread.id = "spread-planche-style";
+                styleSpread.textContent = `
+                    @media print {
+                        @page { size: ${spread}mm ${height}mm; }
+                        .pagedjs_pages { width: auto; }
+                    }
+                    @media screen {
+                        .pagedjs_pages { max-width: calc(var(--pagedjs-width) * 2); }
+                    }
+                    .pagedjs_pages {
+                        display: flex !important;
+                        flex-wrap: wrap;
+                        transform: none !important;
+                        height: 100% !important;
+                        min-height: 100%;
+                        max-height: 100%;
+                        overflow: visible;
+                    }
+                    .pagedjs_page {
+                        margin: 0; padding: 0;
+                        max-height: 100%; min-height: 100%; height: 100% !important;
+                    }
+                    .pagedjs_sheet {
+                        margin: 0; padding: 0;
+                        max-height: 100%; min-height: 100%; height: 100% !important;
+                    }
+                    body { --pagedjs-bleed-right-left: 0mm; margin: 0; }
+                    .pagedjs_left_page {
+                        z-index: 20;
+                        width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width)) !important;
+                    }
+                    .pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop { border-color: transparent; }
+                    .pagedjs_right_page,
+                    .pagedjs_right_page .pagedjs_sheet {
+                        width: calc(var(--pagedjs-bleed-right-right) + var(--pagedjs-pagebox-width)) !important;
+                    }
+                    .pagedjs_right_page .pagedjs_sheet {
+                        grid-template-columns: [bleed-left] var(--pagedjs-bleed-right-left) [sheet-center] 1fr [bleed-right] var(--pagedjs-bleed-right-right);
+                    }
+                    .pagedjs_right_page .pagedjs_bleed-left { display: none; }
+                    .pagedjs_right_page .pagedjs_bleed-top .pagedjs_marks-crop:nth-child(1),
+                    .pagedjs_right_page .pagedjs_bleed-bottom .pagedjs_marks-crop:nth-child(1) { width: 0 !important; }
+                    .pagedjs_first_page { margin-left: 0; }
+                    .pagedjs_page:nth-of-type(even) { break-after: always; }
+                    .pagedjs_page, .pagedjs_sheet { width: ${spreadHalf - 0.1}mm !important; }
+                    .pagedjs_page:nth-of-type(1) { margin-left: ${spreadHalf}mm !important; }
+                `;
+                document.head.appendChild(styleSpread);
+            }
+            /* ----------------------------------------------------------------*/
+
             // Bouton pour activer/désactiver l'imposition
             const imposeButton = document.querySelector("#imposition-toggle");
             let styleElement; // Variable pour stocker l'élément <style>

assets/pagedjs/interface-header.css

@@ -329,6 +329,7 @@ form {
 #label-black-toggle,
 #button-print,
 #button-print-spread,
+#button-print-planche,
 #quality-toggle {
   border: 1px solid var(--color-interface-header);
   border-radius: 2px;
@@ -350,6 +351,7 @@ form {
 #label-black-toggle:hover,
 #button-print:hover,
 #button-print-spread:hover,
+#button-print-planche:hover,
 #quality-toggle:hover  {
   background-color: #000;
   color: #FFF;

assets/pagedjs/interface.html

@@ -58,5 +58,8 @@
         <button class="reset-this" id="button-print-spread" data-ready="false" data-text="Print Spread">
             Exporter le PDF imposé
         </button>
+        <button class="reset-this" id="button-print-planche" data-ready="false" data-text="Print Planche">
+            Exporter le PDF en planche
+        </button>
     </div>
 </div>

assets/pagedjs/interface.js

@@ -182,7 +182,13 @@ function  interfaceEvents(){
             window.enableBooklet = true;
             window.print();
         });
-    
+
+        window.enableSpread = false;
+        document.querySelector("#button-print-planche").addEventListener("click", (e) => {
+            window.enableSpread = true;
+            window.print();
+        });
+
 }
 
 

content/2_josefa-ntjam-portfolio/chapitre.txt

@@ -2,7 +2,7 @@ Title: Swell of spæc(i)es
 
 ----
 
-Maquette: false
+Maquette: true
 
 ----
 
@@ -30,7 +30,7 @@ Bio:
 
 ----
 
-Text: [{"content":{"text":"<p>Dans la vidéo<em> swell of spæc(i)es</em> (2024) Josèfa Ntjam s'attache à réécrire les mythes Dogons et Huaorani entre l'espace sidéral et l'espace aquatique.</p><p>Au lieu d'une origine de la vie et des espèces, Josèfa Ntjam présente une non origine des espèces. Non pas un point d'origine qu'on pourrait identifier mais une boucle, une reprise, un cycle de transformations et de renouveaux qu'elle décrit comme «&nbsp;un processus alchimique en perpétuelle agitation, qui allie les genèses ancestrales avec les nouvelles technologies de génération d'image&nbsp;».</p><p>Dans cette boucle, Amma, une divinité créatrice chez les Dogons, jette un fossile dans l'espace qui brise les astéroïdes et crée des étoiles de plancton bioluminescentes. Les étoiles sont ensuite avalées par un serpent astral et se déposent à l'intérieur de son ventre où elles se transforment en fossile. De la bouche du serpent émerge une planète fossile où Nommo, un génie ancestral des eaux dans les mythes dogons, crée une vie marine. Au sein de cette vie marine évolue une pieuvre qui se transforme en Amma, recommençant à nouveau le cycle.</p><p>Pour réaliser les images de cette vidéo, Josèfa Ntjam a utilisé une IA qui a été alimentée avec un ensemble de données que l'artiste a assemblé elle-même&nbsp;: des modèles 3D de vie marine, des images de statues d'Afrique de l’Ouest conservées dans des collections occidentales, des photographies de figures du mouvement de libération du Cameroun (UPC) contre les troupes coloniales françaises (Elisabeth Djouka, Marthe Ekemeyong Moumie et le grand-père de Josèfa Ntjam). Les modèles de génération automatisée d'images et les outils de modélisation permettent de naviguer visuellement entre les dimensions aquatiques et sidérales que convoque le récit.</p><p>Si Josèfa Ntjam se sert de l'IA c'est aussi parce qu'à ses yeux elle apporte de nouvelles manières de relier les histoires de domination coloniale et d'extraction des ressources à des récits d'émancipation. L'artiste s'en sert comme d'une ressource pour hybrider les différentes formes de récits, pour circuler entre plusieurs logiques. <em>swell of spæc(i)es</em> se construit autour d'un point commun que Josèfa Ntjam repère entre les mythes et le fonctionnement de l'IA&nbsp;: comme les mythes, l’IA est itérative, elle répète et fait varier, générant des versions infinies à partir des mêmes éléments de base. En ce sens, l'IA permet aux figures et aux histoires de continuer à se transformer sans jamais se figer.</p>"},"id":"c4d22afc-4b74-4ed0-ade0-aafad5afa943","isHidden":false,"type":"text"},{"content":{"image":["file://klmhzzutaed4eedv"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"95989f65-41c4-49c1-94bd-ad4075594862","isHidden":false,"type":"image"},{"content":{"image":["file://38s0tp9shhjt28vi"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"e2ab4e0f-d4eb-454a-a220-45b63057907f","isHidden":false,"type":"image"},{"content":{"image":["file://n0qr1iwapi7owqx4"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"efbab0c5-80b4-4874-b829-a8d0d8c9f058","isHidden":false,"type":"image"},{"content":{"image":["file://j1w3o8yx1osda2qx"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"edcc7a6a-1cd2-41ce-add5-26144848917f","isHidden":false,"type":"image"}]
+Text: [{"content":{"text":"<p>Introduction d’Elsa Boyer</p>"},"id":"6bd931eb-3721-4ccf-9367-0bfe5eb408d3","isHidden":false,"type":"description"},{"content":{"text":"<p>Dans la vidéo<em> swell of spæc(i)es</em> (2024), Josèfa Ntjam s’attache à réécrire les mythes dogons et huaorani entre l’espace sidéral et l’espace aquatique.</p><p>Au lieu d’une origine de la vie et des espèces, Josèfa Ntjam présente une non-origine des espèces. Non pas un point d’origine qu’on pourrait identifier, mais une boucle, une reprise, un cycle de transformations et de renouveaux qu’elle décrit comme «&nbsp;un processus alchimique en perpétuelle agitation, qui allie les genèses ancestrales avec les nouvelles technologies de génération d’image&nbsp;».</p><p>Dans cette boucle, Amma, une divinité créatrice chez les Dogons, jette un fossile dans l’espace qui brise les astéroïdes et crée des étoiles de plancton bioluminescentes. Les étoiles sont ensuite avalées par un serpent astral et se déposent à l’intérieur de son ventre où elles se transforment en fossile. De la bouche du serpent émerge une planète fossile où Nommo, un génie ancestral de l’eau dans les mythes dogons, crée une vie marine. Au sein de cette vie marine évolue une pieuvre qui se transforme en Amma, recommençant le cycle.</p><p>Pour réaliser les images de cette vidéo, Josèfa Ntjam a utilisé une IA, alimentée avec un ensemble de données que l’artiste a assemblé elle-même&nbsp;: des modèles 3D de vie marine, des images de statues d’Afrique de l’Ouest conservées dans des collections occidentales, des photographies de figures du mouvement de libération du Cameroun (UPC) contre les troupes coloniales françaises (Elisabeth Djouka, Marthe Ekemeyong Moumie et le grand-père de Josèfa Ntjam). Les modèles de génération automatisée d’images et les outils de modélisation permettent de naviguer visuellement entre les dimensions aquatiques et sidérales que convoque le récit.</p><p>Si Josèfa Ntjam se sert de l’IA, c’est aussi parce qu’à ses yeux elle apporte de nouvelles manières de relier les histoires de domination coloniale et d’extraction des ressources à des récits d’émancipation. L’artiste s’en sert comme d’une ressource pour hybrider les différentes formes de récits, pour circuler entre plusieurs logiques. <em>swell of spæc(i)es</em> se construit autour d’un point commun que Josèfa Ntjam repère entre les mythes et le fonctionnement de l’IA&nbsp;: comme les mythes, l’IA est itérative, elle répète et fait varier, générant des versions infinies à partir des mêmes éléments de base. En ce sens, l’IA permet aux figures et aux histoires de continuer à se transformer sans jamais se figer.</p>"},"id":"c4d22afc-4b74-4ed0-ade0-aafad5afa943","isHidden":false,"type":"text"},{"content":{"image":["file://klmhzzutaed4eedv"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"95989f65-41c4-49c1-94bd-ad4075594862","isHidden":false,"type":"image"},{"content":{"image":["file://38s0tp9shhjt28vi"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"e2ab4e0f-d4eb-454a-a220-45b63057907f","isHidden":false,"type":"image"},{"content":{"image":["file://n0qr1iwapi7owqx4"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"efbab0c5-80b4-4874-b829-a8d0d8c9f058","isHidden":false,"type":"image"},{"content":{"image":["file://j1w3o8yx1osda2qx"],"imagered":[],"imagegreen":[],"imageblue":[],"alt":"","caption":"","taille":"","classes":"portfolio-spread"},"id":"edcc7a6a-1cd2-41ce-add5-26144848917f","isHidden":false,"type":"image"}]
 
 ----
 

site/snippets/head.php

@@ -43,6 +43,7 @@
       "assets/js/plugins/decor-subtitles.js",
       "assets/js/plugins/portfolio.js",
       "assets/js/plugins/toc.js",
+      "assets/js/plugins/imposition.js",
       "assets/js/handlers.js",
       '@auto'
     ]) ?>