subtitles symbols

maquette-tests/assets/css/01_var.css

@@ -6,6 +6,10 @@
      --font: 'Routed Gothic', sans-serif;
 
 
+
+     --font-title: 'OCR-X';
+
+
     /* --font: 'HAL Timezone', serif; */
     --mono: 'Selectric Mono', monospace;
     --mono: 'Ivory Mono', monospace;
@@ -17,6 +21,8 @@
 
     --font-notes: 'Selectric Mono', monospace;
     --font-notes: 'Baskemo Sans', monospace;
+    --font-notes: 'OCR-X';
+
     
 
 
@@ -53,4 +59,11 @@
     --gap: 8px;
 
 
+    --sign-size: 16px;
+      --sign-baseline: 18px;
+    --sign-spacing: 0.4rem;
+    --sign-color: var(--red);
+  
+
+
 }

maquette-tests/assets/css/03_layout.css

@@ -7,13 +7,13 @@
     bleed: 6mm;
     marks: crop;
 
-    margin-left: 33mm;
+
-    margin-right: 11mm;
 
   }
 
   @page:left {
-
+    margin-left: 18mm;
+    margin-right: 26mm;
 
     @top-left {
       content: element(decor);
@@ -47,9 +47,8 @@
   }
 
   @page:right {
-    /* margin-left: 18mm;
+       margin-left: 26mm;
-    margin-right: 26mm; */
+    margin-right: 18mm;
-
 
     @top-left {
       content: element(type);

maquette-tests/assets/css/chapter-header.css

@@ -2,11 +2,21 @@
 
 .chapter-header {
   position: relative;
+  font-family: var(--font-title);
+  font-size: 36px;
+  line-height: 1;
+  break-after: page;
+
+  
 }
 
 
+.chapter-header .bio{
+  display: none;
+}
 
-.chapter-header p {
+
+/* .chapter-header p {
   text-indent: 0px !important;
 }
 
@@ -20,14 +30,7 @@
 
 
 .chapter-header .hgroup{
-  /* margin-top: var(--gap);
-    border-left: var(--unit) solid var(--grey);
-     border-left: var(--unit) solid var(--grey);
-    padding-left:  var(--gap);
 
-
-     display: flex;
-     flex-direction: column; */
      margin-left: 15%;
 
 }
@@ -49,24 +52,7 @@
     margin-top: calc(var(--baseline)*6);
        margin-bottom: calc(var(--baseline)*2);
 
-   /* background-color: black;
-   color: white;
 
-  font-family: var(--mono);
-  font-size: var(--fs-nav);
-  text-align: center;
- 
-  font-size: var(--fs-nav);
-  line-height: 1;
-  padding: 4px 1ch;
-   font-weight: normal;
-
-  height: var(--unit);
-   margin-bottom: 0; */
-
-   /* display: inline-block;
-   margin-inline: auto;
-   margin-top: calc(var(--baseline)*1); */
  
 }
 
@@ -76,16 +62,4 @@
 
 .chapter-header{
    margin-bottom: calc(var(--baseline)*1);
-}
+} */
-
-.chapter-header:after{
-  /* content: "";
-  display: block;
-  margin-top: var(--gap);
-
-
-  border-top: 2px dashed var(--grey);
-
-  margin-bottom: calc(var(--baseline)*1); */
-
-}

maquette-tests/assets/css/subtitles.css

@@ -0,0 +1,62 @@
+h3, h4{
+    break-after: avoid;
+}
+h3, h4{
+    font-weight: normal;
+   margin-top: calc(var(--baseline)*0.5);
+    margin-bottom: calc(var(--baseline)*0.5);
+    font-size: var(--font-size);
+    position: relative;
+   font-size: var(--sign-size);
+     color: var(--sign-color);
+}
+
+
+.h3-before,
+.h3-after{
+
+    letter-spacing:var(--sign-spacing);
+    font-size: var(--sign-size);
+        color: var(--sign-color);
+        line-height: var(--sign-baseline);
+}
+
+.h3-before{
+    padding-right: 0.75ch;
+}
+
+.h3-after{
+    padding-left: 0.75ch;
+}
+
+.decor-h3{
+     font-size: var(--sign-size);
+     color: var(--sign-color);
+     letter-spacing: var(--sign-spacing);
+     line-height: var(--sign-baseline);
+     position: absolute;     
+}
+
+
+
+
+.decor-h3_small{
+    left: -16mm;
+}
+
+
+ .decor-h3_small div{
+        position: relative;
+        top: calc(var(--baseline)*-2);
+}
+
+.decor-h3_big{
+    right: -22mm;
+    text-align: right;
+}
+
+
+ .decor-h3_big div{
+        position: relative;
+        top: calc(var(--baseline)*-5);
+}

maquette-tests/assets/css/text.css

@@ -17,60 +17,6 @@ p + p{
  
 }
 
-p::before{
- /* content: ">";
- position: absolute;
- left: 0;
- font-family: var(--mono);
- font-weight: normal;
- font-size: var(--fs-nav); */
-
- /* display: block;
- width: var(--unit);
- height: var(--unit);
- background-color: var(--grey);
- top: 2px;
- display: flex;
- align-items: center; */
- /* justify-content: center; */
-}
-
-
-
-
-
-h3, h4{
-    break-after: avoid;
-}
-h3, h4{
-    font-weight: normal;
-    /* font-size: 14px; */
-    font-family: var(--font-subtitle);
-  /* font-family: var(--font-subtitle);
-  font-size: var(--fs-subtitle);
-  background-color: var(--grey);
-  font-size: var(--fs-nav);
-  line-height: 1;
-  padding: 4px 1ch;
-  min-height: var(--unit);
-  margin-top: calc(var(--baseline)*1.5);
-   margin-bottom: calc(var(--baseline)*0.5);
-  font-weight: normal; */
-  /* padding-left: 1.5ch; */
-   margin-top: calc(var(--baseline)*1.5);
-    margin-bottom: calc(var(--baseline)*0.5);
-    padding-left: 30%;
-}
-
-h3::before,
-h3::after{
-    /* content: "+------------------------------------------------+";
-    display: block;
-        position: relative;
-    left: -1.5ch;
-    width: calc(100% + 1.5ch); */
-}
-
 
 
 h4{

maquette-tests/assets/fonts/OCR-X/stylesheet.css

@@ -1,13 +1,54 @@
 @font-face {
-    font-family: "OCR X";
+    font-family: 'OCR-X';
-    src: url("OCR-XTrial-VariableVF.ttf") format("truetype");
+    src: url('OCR-X-Bold.woff2') format('woff2'),
-    font-weight: 10 220;
+        url('OCR-X-Bold.woff') format('woff');
+    font-weight: bold;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
-    font-family: "OCR X";
+    font-family: 'OCR-X';
-    src: url("OCR-XTrial-VariableVF.woff2") format("woff2");
+    src: url('OCR-X-Black.woff2') format('woff2'),
-    font-weight: 10 220;
+        url('OCR-X-Black.woff') format('woff');
+    font-weight: 900;
     font-style: normal;
+    font-display: swap;
 }
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Light.woff2') format('woff2'),
+        url('OCR-X-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Regular.woff2') format('woff2'),
+        url('OCR-X-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Medium.woff2') format('woff2'),
+        url('OCR-X-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'OCR-X';
+    src: url('OCR-X-Thin.woff2') format('woff2'),
+        url('OCR-X-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+

maquette-tests/assets/fonts/OCR-X_trial/stylesheet.css

@@ -0,0 +1,13 @@
+@font-face {
+    font-family: "OCR X";
+    src: url("OCR-XTrial-VariableVF.ttf") format("truetype");
+    font-weight: 10 220;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: "OCR X";
+    src: url("OCR-XTrial-VariableVF.woff2") format("woff2");
+    font-weight: 10 220;
+    font-style: normal;
+  }

maquette-tests/csspageweaver/manifest.json

@@ -29,9 +29,11 @@
         "assets/css/chapter-header.css",
         "assets/css/item-decor.css",
         "assets/css/notes.css",
-        "assets/css/text.css"
+        "assets/css/text.css",
+        "assets/css/subtitles.css"
     ],
     "hook": [
+        "/js/items-decor.js"
         
     ]
 }

maquette-tests/index.html

@@ -27,6 +27,8 @@
     <link rel="stylesheet" type="text/css" href="/assets/fonts/BaskemoSans/stylesheet.css">
     <link rel="stylesheet" type="text/css" href="/assets/fonts/Bilzig/stylesheet.css">
     <link rel="stylesheet" type="text/css" href="/assets/fonts/DecorRound/stylesheet.css">
+        <link rel="stylesheet" type="text/css" href="/assets/fonts/OCR-X/stylesheet.css">
+
 
 </head>
 
@@ -221,7 +223,35 @@
             fond : un dialecte hybride qui n’autorise que l’élaboration d’idées
             aussi précises qu’elles s’avèrent uniformes<a href="#fn10" class="footnote-ref" id="fnref10"
                 role="doc-noteref"><sup>10</sup></a>.</p>
-        <h3>La langage est un champ de bataille</h3>
+
+                <!-- <div class="decor-h3">
+                    <div>+</div>
+                    <div>++</div>
+                    <div>+++</div>
+                     <div>++</div>
+                     <div>+</div>
+                </div> -->
+
+                 <div class="decor-h3 decor-h3_small">
+                    <div>=</div>
+                    <div>==</div>
+                    <div>===</div>
+                     <div>==</div>
+                     <div>=</div>
+                </div>
+
+        <h3><span class="h3-before">===</span>La langage est un champ de bataille<span class="h3-after">====</sapn></h3>
+
+            <div class="decor-h3 decor-h3_big">
+                    <div>=</div>
+                    <div>==</div>
+                    <div>===</div>
+                    <div>====</div>
+                    <div>===</div>
+                     <div>==</div>
+                     <div>=</div>
+                </div>
+
         <p>Si les LLM apparaissent comme de nouveaux acteurs sociolinguistiques,
             leurs usages, nombreux et divers, cristallisent aussi une forme de lutte
             culturelle. Cette conflictualité se donne à voir sur les réseaux sociaux

maquette-tests/js/items-decor.js

@@ -1,24 +1,62 @@
 import { Handler } from '/csspageweaver/lib/paged.esm.js';
 
 
-export default class myCustomHandler2 extends Handler {
+export default class itemsDecor extends Handler {
     constructor(chunker, polisher, caller) {
         super(chunker, polisher, caller);
+        this.symbol = "=";
       }
 
+    createDecor(symbol, sizes, sizeClass) {
+      const div = document.createElement("div");
+      div.className = `decor-h3 ${sizeClass}`;
+      sizes.forEach(n => {
+        const line = document.createElement("div");
+        line.textContent = symbol.repeat(n);
+        div.appendChild(line);
+      });
+      return div;
+    }
 
     afterPageLayout(pageElement, page, breakToken) {
-      let pageArea = pageElement.querySelector(".pagedjs_area");
+      const symbol = this.symbol;
-      let pageAreaTop = pageArea.getBoundingClientRect().top;
+      const isLeft = pageElement.classList.contains("pagedjs_left_page");
-      let items = pageElement.querySelectorAll("p, h3, h4, .inline-note");
+      const smallSizes = [1, 2, 3, 2, 1];
-      items.forEach(function (item) {
+      const bigSizes   = [1, 2, 3, 4, 3, 2, 1];
-        let topOffset = item.getBoundingClientRect().top - pageAreaTop;
+
-        let decor = document.createElement("div");
+      let subtitles = pageElement.querySelectorAll("h3");
-        decor.classList.add("item-decor");
+      subtitles.forEach(subtitle => {
-        decor.style.top = topOffset + "px";
+        if (!subtitle.querySelector(".h3-before")) {
-        decor.textContent = pageElement.classList.contains("pagedjs_left_page") ? "<" : ">";
+          const spanBefore = document.createElement("span");
-        pageArea.appendChild(decor);
+          spanBefore.className = "h3-before";
+          spanBefore.textContent = symbol.repeat(3);
+          subtitle.insertBefore(spanBefore, subtitle.firstChild);
+        }
+
+        let spanAfter = subtitle.querySelector(".h3-after");
+        if (!spanAfter) {
+          spanAfter = document.createElement("span");
+          spanAfter.className = "h3-after";
+          subtitle.appendChild(spanAfter);
+        }
+
+        spanAfter.textContent = "";
+        const baseHeight = subtitle.offsetHeight;
+        let count = 0;
+        // Pour compléter la ligne: ajoute le symbole dans le span en vérifiant la hauteur du titre, si l'ajout d'un symbole augmente la hauteur du titre, alors on enleve un symbole
+        while (count < 300) {
+          count++;
+          spanAfter.textContent = symbol.repeat(count);
+          if (subtitle.offsetHeight > baseHeight) {
+            spanAfter.textContent = symbol.repeat(count - 1);
+            break;
+          }
+        }
+
+        const firstDecor  = this.createDecor(symbol, isLeft ? smallSizes : bigSizes,   isLeft ? "decor-h3_small" : "decor-h3_big");
+        const secondDecor = this.createDecor(symbol, isLeft ? bigSizes   : smallSizes, isLeft ? "decor-h3_big"   : "decor-h3_small");
+        subtitle.parentNode.insertBefore(firstDecor, subtitle);
+        subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
       });
     }
 }
-