Pagedown: Adding line numbers to margin for templates meant to be edited/ reviewed

[brentthorne]

Is there a way to add a line number count in the left margin with paged.js? This would be very useful for templates made where documents need to be reviewed such as journal manuscripts, legal documents, government documents, etc..

I've tried combing through paged.js resources but haven't been able to find anything as of yet.

[RLesur]

TBH, I have no idea how to do that.
Maybe @fchasen or @JulieBlanc have some tips?
I am going to ask to the Paged.js community on the dedicated mattermost channel.

[brentthorne]

That would be wonderful thank you!

[julientaq]

Hey @brentthorne and @RLesur (thanks to have connected us to here :D)

There is no way, with css, to count all line today, so you need a bit of hacking.

What i do, when i work with a baseline, is to number the lines on the whole page. it's a bit overkill, but it's pretty useful to design book with this: https://gist.github.com/julientaq/08d636a7a2b5f2824025256de0fca467 to have an example of how it works.

The problem is that it will works only if your content run on the same baseline (and header or change of font can easily screw everything up)

The other option is to count elements instead of lines. It's more reliable, but a bit less acurate (also, i would assume that you prefer to check for error in the context of paragraph, and not just a word)

this is how i would do it (im in the country this week, so i cant test, but here is my first shot)

body {
    counter-reset: element;
}

p, h1, h2, h3, h4, h5, h6 , blockquote, pre {
    counter-increment: element;
}

p::before, h1::before, h2::before, h3::before, h4::before, h5::before, h6 ::before, blockquote::before, pre::before {
        content: counter(element);
        position: absolute;
        left: -4ch;
        color: red;
    }

Let's keep talking when i get home next week, i've a couple of ideas :D

[RLesur]

Thanks a lot @julientaq! (sorry, I did not know your GH handler).

The baseline idea is really interesting. As you mention, this may be quite hard to manage well :thinking:

For now, I haven't tried to implement baselines in any pagedown templates because of the headers and blocks of codes. This is a pro feature and only pro designers like you can easily handle that :smile:

Element counters are also extremely interesting and maybe they could be sufficient. What do you think of that @brentthorne?

I will be on holidays next week and be back in August. I let you discuss with @brentthorne here or in the pagedmedia mattermost. Thanks again for your support, Julien!

[brentthorne]

Here is an example of how the css looks when applied to the current template I am working on. Unfortunately I am already using css counters so it seems to interfere with that. Here is the pdf output of my template. Maybe @RLesur has some input on formatting for the numbered sections right from knitr so I can removed this, I would also need the same for figure and table labelling as currently the document provides Figure: 1. and the style guide for the journal requires Figure 1.

Also I know that there are to be line numbers there needs to be a number for every line (based on the guidelines of most journal publications that I have looked at) as the reviewers need to reference specific lines in their comments back to the author during peer review.

I think finding a way to number each line (although terribly challenging and certainly not within my pay grade) would be essential to continuing to grow the paged.js template options in academia specifically.

[RLesur]

Thanks for the experiment. This is very instructive.
Okay, IMO we should try to do something with the baseline approach described by @julientaq
This won't be an easy task.

[julientaq]

I think finding a way to number each line (although terribly challenging and certainly not within my pay grade) would be essential to continuing to grow the paged.js template options in academia specifically.

This is half true :dancer: Because the pdf should not be the place where edits or comments happen. We have better tools to do that today, especially within journals and peer review process. (this is exactly what we're working on at Coko: building tools to define new and collaborative publishing workflows).

That said, we still have people who want to print to read and work on a document, and i got a couple idea. As paged.js can run javascript at almost anytime in the process of paginating content:

First shoot, the easy one:

• create a .number element as a first-child of any element of the whole book. It would use a specific css counter and won't interfere with what you already have in your css (but it's still not counting lines.)

And, the complex algorythmic one: when pages are set up,

1. for each block level element of the page, get the computed values for lineheight and height
2. divide the height per lineheight to know the total number of lines for each element
3. starting by the first element of the page, add an element that will include the line numbering as a string,
4. do the same for each element of the page, following the numbering from the last number used.
5. loop the code for each page.

I would restart the numbering per page to avoid 4 digit numbers in a doc. (and it's easier to do :sunglasses: ) but we could change that later.

With this, you could have a line numbering that wouldn't be affected by any other css, or any weird baseline. If you want, we can discuss a bit more if that would help you or if you'd need something more specific.

@RLesur how does your numbering are made with knitr?

again, throwing this from the alps without having digged much, but i think that could work

[brentthorne]

Here is my first attempt at this. Just know that I have never used JS before this so hopefully I haven't made it too messy. https://jsfiddle.net/brentthorne/Lesk0n3o/7/

It does what @julientaq mentioned for computing the number of lines per element. What needs work is the implamentation of adding (or just skipping) specific element such an img or div with class figure. Feel free to let me know what you think!

[brentthorne]

So I have spent a little more time on this and have figured out a way to solve for the figures and other divs which appear in the document. Here is the new version of what I have come up with so far: https://jsfiddle.net/brentthorne/m4w3r7bh/

The next step is to implement this into the paged.js template. I think I would be adding the .margin div from my example into the @top-left of the paged document.

Again, I'm only about 3 days into using JS or jquery so I look forward to any feedback on how to improve this.

Thanks!