From 79b2753fdbf3da30da2b5d90d977a612e3334362 Mon Sep 17 00:00:00 2001 From: Julie Blanc Date: Tue, 14 Apr 2026 18:18:10 +0200 Subject: [PATCH] baseline & toc --- .vscode/settings.json | 3 + css/modules/_layout.scss | 2 +- css/modules/_text.scss | 2 + css/modules/_toc.scss | 47 ++++++ css/modules/_var.scss | 4 - css/style.css | 40 ++++- css/style.css.map | 2 +- css/style.scss | 3 +- csspageweaver/manifest.json | 4 + .../plugins/tableOfContent/.gitignore | 1 + .../plugins/tableOfContent/README.md | 90 ++++++++++++ .../plugins/tableOfContent/config.json | 9 ++ .../plugins/tableOfContent/tableOfContent.css | 13 ++ .../plugins/tableOfContent/tableOfContent.js | 139 ++++++++++++++++++ index.html | 3 + js/snapToBaseline.js | 39 ++++- 16 files changed, 385 insertions(+), 16 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 css/modules/_toc.scss create mode 100644 csspageweaver/plugins/tableOfContent/.gitignore create mode 100755 csspageweaver/plugins/tableOfContent/README.md create mode 100644 csspageweaver/plugins/tableOfContent/config.json create mode 100644 csspageweaver/plugins/tableOfContent/tableOfContent.css create mode 100644 csspageweaver/plugins/tableOfContent/tableOfContent.js diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/modules/_layout.scss b/css/modules/_layout.scss index 6ef1b63..6299012 100644 --- a/css/modules/_layout.scss +++ b/css/modules/_layout.scss @@ -1,7 +1,7 @@ $width: 176mm; $height: 240mm; $top: 6mm; -$bottom: 18mm; +$bottom: 20mm; $inside: 12mm; $outside: 6mm; $content-h: calc($height - $top - $bottom - 1mm); diff --git a/css/modules/_text.scss b/css/modules/_text.scss index 2e9b39c..881e549 100644 --- a/css/modules/_text.scss +++ b/css/modules/_text.scss @@ -32,6 +32,8 @@ p, li{ hyphenate-limit-lines: 2; hyphenate-limit-zone: 8%; word-spacing: -0.004em; + widows: 2; + orphans: 2; } diff --git a/css/modules/_toc.scss b/css/modules/_toc.scss new file mode 100644 index 0000000..2bdaeb7 --- /dev/null +++ b/css/modules/_toc.scss @@ -0,0 +1,47 @@ +#toc_container{ + + break-before: page; + break-after: page; + // color: red; + + ul{ + list-style-type: none; + color: black; + } + + .toc-element-level-1{ + margin-top: calc(var(--baseline)*1); + margin-bottom: calc(var(--baseline)*0.5); + font-size: 1.2rem; + line-height: 1.2; + } + + .toc-element-level-2{ + font-weight: bold; + margin-top: calc(var(--baseline)*0.5); + margin-bottom: calc(var(--baseline)*0.5); + } + + .toc-element-level-3{ + text-indent: 5mm; + + } + + .toc-element-level-4{ + text-indent: 10mm; + + } + + .toc-element-level-5{ + text-indent: 15mm; + + } + + .toc-element-level-6{ + text-indent: 20mm; + + } + + + +} \ No newline at end of file diff --git a/css/modules/_var.scss b/css/modules/_var.scss index a6dacfd..0007669 100644 --- a/css/modules/_var.scss +++ b/css/modules/_var.scss @@ -5,12 +5,8 @@ --font-sans: 'Basis Grotesque Pro', sans-serif; --font-size: 12px; --fs-small: 9.8px; - --baseline: 18px; - --indent: 26px; - - --fs-num: 12px; } diff --git a/css/style.css b/css/style.css index f2b4610..c36e050 100644 --- a/css/style.css +++ b/css/style.css @@ -35,7 +35,7 @@ body { @page { size: 176mm 240mm; margin-top: 6mm; - margin-bottom: 18mm; + margin-bottom: 20mm; } @page :left { margin-left: 6mm; @@ -296,6 +296,8 @@ p, li { hyphenate-limit-lines: 2; hyphenate-limit-zone: 8%; word-spacing: -0.004em; + widows: 2; + orphans: 2; } .wrapper-indent > p:first-of-type { @@ -358,7 +360,7 @@ ol[type="1"].ol-clone { #section__content h1 { -moz-column-span: all; column-span: all; - height: 215mm; + height: 213mm; } #section__content h2::before, #section__content h3::before, #section__content h4::before, #section__content h5::before, #section__content h6::before { content: attr(data-counter); @@ -517,4 +519,38 @@ ol[type="1"].ol-clone { line-height: 1; position: relative; top: -4px; +} + +#toc_container { + -moz-column-break-before: page; + break-before: page; + -moz-column-break-after: page; + break-after: page; +} +#toc_container ul { + list-style-type: none; + color: black; +} +#toc_container .toc-element-level-1 { + margin-top: calc(var(--baseline) * 1); + margin-bottom: calc(var(--baseline) * 0.5); + font-size: 1.2rem; + line-height: 1.2; +} +#toc_container .toc-element-level-2 { + font-weight: bold; + margin-top: calc(var(--baseline) * 0.5); + margin-bottom: calc(var(--baseline) * 0.5); +} +#toc_container .toc-element-level-3 { + text-indent: 5mm; +} +#toc_container .toc-element-level-4 { + text-indent: 10mm; +} +#toc_container .toc-element-level-5 { + text-indent: 15mm; +} +#toc_container .toc-element-level-6 { + text-indent: 20mm; }/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map index 381a77f..5e0a6ac 100644 --- a/css/style.css.map +++ b/css/style.css.map @@ -1 +1 @@ -{"version":3,"sources":["style.css","modules/_var.scss","modules/_init.scss","modules/_layout.scss","modules/_text.scss","modules/_num-paragraph.scss","modules/_titles.scss","modules/_list-of-abbr.scss","modules/_followingNotes.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file +{"version":3,"sources":["style.css","modules/_var.scss","modules/_init.scss","modules/_layout.scss","modules/_text.scss","modules/_num-paragraph.scss","modules/_titles.scss","modules/_list-of-abbr.scss","modules/_followingNotes.scss","modules/_toc.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index 0e45476..97acc4c 100644 --- a/css/style.scss +++ b/css/style.scss @@ -7,4 +7,5 @@ @import 'modules/titles'; // @import 'modules/footnotes'; @import 'modules/list-of-abbr'; -@import 'modules/followingNotes'; \ No newline at end of file +@import 'modules/followingNotes'; +// @import 'modules/toc'; \ No newline at end of file diff --git a/csspageweaver/manifest.json b/csspageweaver/manifest.json index 8a63ff6..91dec05 100644 --- a/csspageweaver/manifest.json +++ b/csspageweaver/manifest.json @@ -20,6 +20,10 @@ "followingNotes": { "selector": ".inline-note", "reset": ".chapter" + }, + "tableOfContent": { + "tocContainer": "#toc_container", + "tocTitles": ["#section__content h1", "#section__content h2", "h3", "h4", "h5", "h6"] } }, "hook": [ diff --git a/csspageweaver/plugins/tableOfContent/.gitignore b/csspageweaver/plugins/tableOfContent/.gitignore new file mode 100644 index 0000000..496ee2c --- /dev/null +++ b/csspageweaver/plugins/tableOfContent/.gitignore @@ -0,0 +1 @@ +.DS_Store \ No newline at end of file diff --git a/csspageweaver/plugins/tableOfContent/README.md b/csspageweaver/plugins/tableOfContent/README.md new file mode 100755 index 0000000..66c4cb9 --- /dev/null +++ b/csspageweaver/plugins/tableOfContent/README.md @@ -0,0 +1,90 @@ +--- +name: tableOfContent +tags: recommended, stable +description: A script to generate a table of content. +--- + +# Table of content + +A script to generate a table of content. + +See pagedjs.org post: [Build a Table of Contents from your HTML](https://pagedjs.org/post/toc/) + +**tags**: recommended, stable + +## Parameters + +The plugin contain also a minimal stylesheet to add the corresponding page numbers with paged.js and add some style to the toc list. + +In `manifest.json`, you can modify/add some parameters: + +```json + "plugins":{ + "tableOfContent" + }, + "pluginsParameters":{ + "tableOfContent": { + "tocContainer": "#toc_container", + "tocTitles": ["h1", "h2"] + } + }, + ``` + +- `tocElement` → define the id element where the toc list will be create (by default: `#toc`) +- `titleElements` → array of the title element you want in the toc list. You can add as many as you want and the elements can be classes like `.title-1` or `.my-content h1:not(.unlisted)`. (by default: `["h1", "h2"]`) +- `beforePageNumber` (optional) → if you want to add some text before the page number ("page ", "p. ", ...) +- `position` → put the page number before or after the toc element, create `::before` or `::after` pseudo-element (by default: `after`) + + +## Stylesheet + +This plugin have a minimal stylesheet + +```CSS +#list-toc-generated{ + --before-page: ""; +} +``` + +`--before-page` refers to the text before the page number ("page ", "p. ", ...), you can change it directly here or in the config.json + + +If the page number is positionned after the toc element (`"position": "after"` in config.json), this style apply: + +```CSS +.toc-element a.toc-page-after::after{ + content: var(--before-page) target-counter(attr(href), page); /* This line create the page number */ + float: right; /* put number at the right of the page */ +} +``` + +If the page number is positionned before the toc element (`"position": "before"` in config.json), this style apply: + +```CSS +.toc-element a.toc-page-before::before{ + content: var(--before-page) target-counter(attr(href), page); + margin-right: 1ch; /* space after number */ +} + +``` + + + +## How to install + +### Download + +1. Download the ZIP archive via Code > Download ZIP. +2. Unzip the archive. +3. Rename the extracted folder by removing the branch name suffix: `tableOfContent-main` → `tableOfContent` +4. Move the folder into the `csspageweaver/plugins/` directory. +5. Add the required parameters to `manifest.json` (see above). + + +### Git clone + +1. Use git clone +2. Move the folder into the `csspageweaver/plugins/` directory. +3. Add the required parameters to `manifest.json` (see above). + + diff --git a/csspageweaver/plugins/tableOfContent/config.json b/csspageweaver/plugins/tableOfContent/config.json new file mode 100644 index 0000000..1da040a --- /dev/null +++ b/csspageweaver/plugins/tableOfContent/config.json @@ -0,0 +1,9 @@ +{ + "name": "Table of content", + "description": "A script to generate a table of content", + "author": ["Julie Blanc", "Julien Taquet"], + "licence": "MIT", + "version": "1.0", + "hook": "tableOfContent.js", + "stylesheet": "tableOfContent.css" +} \ No newline at end of file diff --git a/csspageweaver/plugins/tableOfContent/tableOfContent.css b/csspageweaver/plugins/tableOfContent/tableOfContent.css new file mode 100644 index 0000000..4ef2426 --- /dev/null +++ b/csspageweaver/plugins/tableOfContent/tableOfContent.css @@ -0,0 +1,13 @@ +#list-toc-generated{ + --before-page: ""; +} + +.toc-element a.toc-page-after::after{ + content: var(--before-page) target-counter(attr(href), page); + float: right; /* put number at the right of the page */ +} + +.toc-element a.toc-page-before::before{ + content: var(--before-page) target-counter(attr(href), page); + margin-right: 1ch; /* space after number */ +} \ No newline at end of file diff --git a/csspageweaver/plugins/tableOfContent/tableOfContent.js b/csspageweaver/plugins/tableOfContent/tableOfContent.js new file mode 100644 index 0000000..3eb2d85 --- /dev/null +++ b/csspageweaver/plugins/tableOfContent/tableOfContent.js @@ -0,0 +1,139 @@ +/** + * @name Table of content + * @author Julie Blanc + * @see { @link https://gitlab.com/csspageweaver/plugins/table_of_content/ } + */ + +import { Handler } from '/csspageweaver/lib/paged.esm.js'; + +export default class tableOfContent extends Handler { + + constructor(chunker, polisher, caller) { + super(chunker, polisher, caller); + this.tocContainer = cssPageWeaver.features.tableOfContent.parameters?.tocContainer || "#toc_container"; + this.tocTitles = cssPageWeaver.features.tableOfContent.parameters?.tocTitles || ["h1", "h2"]; + this.beforePageNumber = cssPageWeaver.features.tableOfContent.parameters?.beforePageNumber; + this.position = cssPageWeaver.features.tableOfContent.parameters?.position; + } + + beforeParsed(content) { + createToc({ + content: content, + container: this.tocContainer, + titleElements: this.tocTitles, + position: this.position + }); + + + + } + + afterParsed(parsed) { + const tocLinks = parsed.querySelectorAll('.toc-element a'); + tocLinks.forEach(link => { + const id = link.getAttribute('href')?.slice(1); + if (!id) return; + const heading = parsed.querySelector('#' + CSS.escape(id)); + if (!heading) return; + const counter = heading.getAttribute('data-counter'); + if (!counter) return; + const span = document.createElement('span'); + span.className = 'toc-counter'; + span.textContent = counter; + link.prepend(span); + }); + } +} + + + +function createToc(config) { + + const content = config.content; + const tocElement = config.container; + const titleElements = config.titleElements; + + let tocElementDiv = content.querySelector(tocElement) + if(!tocElementDiv) return console.warn('couldn’t start the toc') + tocElementDiv.innerHTML = '' + let tocUl = document.createElement('ul') + tocUl.id = 'list-toc-generated' + + + if(config.before){ + tocUl.style.setProperty('--before-page', '"' + config.before + '"'); + } + + + tocElementDiv.appendChild(tocUl) + + // add class to all title elements + let tocElementNbr = 0 + for (var i = 0; i < titleElements.length; i++) { + let titleHierarchy = i + 1 + let titleElement = content.querySelectorAll(titleElements[i]) + + titleElement.forEach(function (element) { + // check if shouldbe shown + if ( + !element.classList.contains('toc-ignore') || + !element.classList.contains('toc-ignore') + ) { + // add classes to the element + element.classList.add('title-element') + element.setAttribute('data-title-level', titleHierarchy) + + // add an id if doesn't exist + tocElementNbr++ + + if (element.id == '') { + element.id = 'title-element-' + tocElementNbr + } + let newIdElement = element.id + } + }) + } + + // create toc list + let tocElements = content.querySelectorAll('.title-element') + + for (var i = 0; i < tocElements.length; i++) { + let tocElement = tocElements[i] + + let tocNewLi = document.createElement('li') + + // Add class for the hierarcy of toc + tocNewLi.classList.add('toc-element') + tocNewLi.classList.add('toc-element-level-' + tocElement.dataset.titleLevel) + + let classes = [ + ...(tocElement.className ? tocElement.className.split(' ') : []), + ...(tocElement.closest('section')?.className ? tocElement.closest('section')?.className.split(' ') : []), + ]; + + classes.forEach((meta) => { + if (!meta || meta === 'title-element') return; + tocNewLi.classList.add(`toc-${meta}`); + }); + + //get the exisiting class + // Keep class of title elements + let classTocElement = tocElement.classList + for (var n = 0; n < classTocElement.length; n++) { + if (classTocElement[n] != 'title-element') { + tocNewLi.classList.add(classTocElement[n]) + } + } + + if(config.position && config.position === "before"){ + tocNewLi.innerHTML = + '' + tocElement.innerHTML + ''; + }else{ + tocNewLi.innerHTML = + '' + tocElement.innerHTML + ''; + } + + + tocUl.appendChild(tocNewLi) + } +} diff --git a/index.html b/index.html index 63881f9..f0dfb33 100644 --- a/index.html +++ b/index.html @@ -42,6 +42,9 @@ +
+
+ diff --git a/js/snapToBaseline.js b/js/snapToBaseline.js index 605e735..c73b464 100644 --- a/js/snapToBaseline.js +++ b/js/snapToBaseline.js @@ -8,13 +8,19 @@ export default class snapToBaseline extends Handler { beforeParsed(content){ this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim()); - // console.log("========================================"); - // console.log("baseline = " + this.baseline); + + content.querySelectorAll('blockquote').forEach((bq) => { + const prev = bq.previousElementSibling; + if (!prev || prev.nodeName !== 'P') { + bq.style.color = 'red'; + } + }); } renderNode(node, sourceNode){ if (node.nodeName === 'P') { this.baseline = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--baseline').trim()); + if (!shouldSnap(node)) return node; const area = node.closest('.pagedjs_area'); if (area) { const areaRect = area.getBoundingClientRect(); @@ -22,18 +28,37 @@ export default class snapToBaseline extends Handler { const relativeTop = nodeRect.top - areaRect.top; const modulo = relativeTop % this.baseline; if (modulo !== 0) { - let newPadding = this.baseline - modulo; - node.style.paddingTop = newPadding + 'px'; + node.style.paddingTop = (this.baseline - modulo) + 'px'; } } return node; } } - + afterPageLayout(pageElement, page, breakToken){ + const area = pageElement.querySelector('.pagedjs_area'); + if (!area) return; + + const areaRect = area.getBoundingClientRect(); + const paragraphs = pageElement.querySelectorAll('p'); + + paragraphs.forEach((node) => { + const nodeRect = node.getBoundingClientRect(); + if (nodeRect.bottom < areaRect.bottom - this.baseline) return; + if (!shouldSnap(node)) return; + + const relativeTop = nodeRect.top - areaRect.top; + const modulo = relativeTop % this.baseline; + if (modulo !== 0) { + node.style.paddingTop = (this.baseline - modulo) + 'px'; + } + }); + + } - - } +function shouldSnap(node) { + return !node.closest('blockquote'); +}