Julie/decor-6-expe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support double line in subtitles

Browse source
This commit is contained in:
Julie Blanc 2026-03-15 11:30:36 +01:00
parent 9340553c0b
commit 15aaf441cd
4 changed files with 93 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

10
maquette-tests/assets/css/subtitles.css
View file

@ -21,6 +21,11 @@ h3, h4{
line-height: var(--sign-baseline);
}
.h3-line {
display: flex;
justify-content: flex-end;
}
.h3-before{
padding-right: 0.75ch;
}
@ -29,6 +34,11 @@ h3, h4{
padding-left: 0.75ch;
}
.h3-text{
background-color: yellow;
flex-grow: 2;
}
.decor-h3{
font-size: var(--sign-size);
color: var(--sign-color);

17
maquette-tests/assets/css/text.css
View file

@ -9,14 +9,29 @@
}
.container-following-note + p,
p + p{
text-indent: 30%;
/* text-indent: 30%; */
position: relative;
/* text-indent: -6ch; */
}
p::before{
content: ".............";
font-size: var(--sign-size);
color: var(--sign-color);
letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline);
position: relative;
top: -3px;
/* position: absolute;
left: 0; */
}
h4{

29
maquette-tests/index.html
View file

@ -224,33 +224,12 @@
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>
<!-- <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>La langage est un champ de bataille</h3>
<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

90
maquette-tests/js/items-decor.js
View file

@ -18,43 +18,79 @@ export default class itemsDecor extends Handler {
return div;
}
createLine(symbol, nodes) {
const line = document.createElement("span");
line.className = "h3-line";
const spanBefore = document.createElement("span");
spanBefore.className = "h3-before";
spanBefore.textContent = symbol.repeat(3);
line.appendChild(spanBefore);
const spanText = document.createElement("span");
spanText.className = "h3-text";
nodes.forEach(node => spanText.appendChild(node));
line.appendChild(spanText);
const spanAfter = document.createElement("span");
spanAfter.className = "h3-after";
spanAfter.textContent = "";
line.appendChild(spanAfter);
return line;
}
afterPageLayout(pageElement, page, breakToken) {
const symbol = this.symbol;
const isLeft = pageElement.classList.contains("pagedjs_left_page");
const smallSizes = [1, 2, 3, 2, 1];
const bigSizes = [1, 2, 3, 4, 3, 2, 1];
let subtitles = pageElement.querySelectorAll("h3");
subtitles.forEach(subtitle => {
if (!subtitle.querySelector(".h3-before")) {
const spanBefore = document.createElement("span");
spanBefore.className = "h3-before";
spanBefore.textContent = symbol.repeat(3);
subtitle.insertBefore(spanBefore, subtitle.firstChild);
}
pageElement.querySelectorAll("h3").forEach(subtitle => {
if (subtitle.querySelector(".h3-line")) return;
let spanAfter = subtitle.querySelector(".h3-after");
if (!spanAfter) {
spanAfter = document.createElement("span");
spanAfter.className = "h3-after";
subtitle.appendChild(spanAfter);
}
const children = Array.from(subtitle.childNodes);
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;
// Découper en segments à chaque <br>
const segments = [];
let current = [];
children.forEach(node => {
if (node.nodeName === "BR") {
segments.push(current);
current = [];
} else {
current.push(node);
}
}
});
segments.push(current);
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");
// Reconstruire le h3 avec des .h3-line
subtitle.innerHTML = "";
segments.forEach(nodes => {
const line = this.createLine(symbol, nodes);
subtitle.appendChild(line);
const spanAfter = line.querySelector(".h3-after");
const baseHeight = line.offsetHeight;
let count = 0;
while (count < 300) {
count++;
spanAfter.textContent = symbol.repeat(count);
if (line.offsetHeight > baseHeight) {
spanAfter.textContent = symbol.repeat(count - 1);
break;
}
}
});
let firstDecor, secondDecor;
if (isLeft) {
firstDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
secondDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
} else {
firstDecor = this.createDecor(symbol, bigSizes, "decor-h3_big");
secondDecor = this.createDecor(symbol, smallSizes, "decor-h3_small");
}
subtitle.parentNode.insertBefore(firstDecor, subtitle);
subtitle.parentNode.insertBefore(secondDecor, subtitle.nextSibling);
});