Closed ebengtso closed 1 month ago
I think you could implement this with css counters, not even sure you'd need to do anything but specify the appropriate classes in your theme to do this.
This approach is quite good, but not perfect . It cannot be sure that in all circumstances the paragraphs will be aligned to the left, thus the numbering will not always be aligned
`p.editor-paragraph::before { content: counter(item) " "; / margin-left: -30px; / / direction: rtl; / position: absolute; font-weight: bold; / margin-right: 10px; / / align-content: end; / text-align: right; / margin-right: 20px; / / display: block; / min-width: 35px; font-size: smaller; transform: translateX(-40px); }
.editor-paragraph { counter-increment: item; }`
For permanent link, I can create a scroll function, and scroll to the indexed paragraph. Like this:
function scrollTo(number) { // Get all elements with the class 'my-element' const elements = document.querySelectorAll('.editor-paragraph'); var counter = 0; if(elements.length>=number) elements[number].scrollIntoView({ behavior: 'smooth', block: 'center' }); }
Here a screenshot of this solution:
I think we can close the issue for now, due to the workaround
Description
Display paragraph numbers on the left side of the page. It should be automatically numbered starting from 1. Only nodes "paragraphs" should be considered as paragraphs. Headings are nodes to be excluded, or other specific nodes.
paragraphs should be indexed. In this way, they can be linked.
Impact
Professional text editors will make use of this functionality. Scholars also need such functionality.