Zotfile — Adding colours to underlines

Davidal

I posted this in the recommended Zotfile thread, but I will remove it and place it here. The Zotfile thread is too vast, and queries get lost easily there. I think it's better to have a specific thread.

REPOST

1) Adding Underline Annotation colors
2) Extracting highlight's note before, not after the highlight

1) Recently through the help of the people on this forum I managed to add colour to my highlights in extracted annotations. Great! However, the underlines are still monotone. I suspect the changes will be made in "extensions.zotfile.pdfExtraction.formatAnnotationUnderline" since the changes for highlights were made in "extensions.zotfile.pdfExtraction.formatAnnotationHighlight". I just don't know the code needed for the job.

2) In Acrobat you can make a sticky note or highlight for example. Another method is making the highlight, after that you click the highlight and you are offered with "Make a note to highlight". It's a sticky note pretty much, only directly attached to the highlight. I find this method very good as I can highlight a chunk of text and label with a description. However there are a few issues with the annotation extraction. Please see screenshot below...
https://www.dropbox.com/s/77olap6q023aecd/zotfile.PNG?dl=0

In the blue box, we see a sticky note and a highlight. Is there any way to reduce the distance? This way I won't know at first glance they belong together. In the actual pdf I have it as close as possible.

In the red box, we see a highlight with a direct note. The distance is not too bad here, one line less would probably be handier, but this is not bad either. The problem is that it is underneath. I need it to title it. Can I change it in the code somehow? Thanks!

bwiernik

I doubt Joscha (the Zotfile developer) will have time to implement this, but I’m sure he would accept a pull request with code that does it. You can find where to start with the Zotfile code by searching for color_category on Zotfile’s GitHub page.

Davidal

It's the same as the description on Zotfile website. I did mess about with it already and couldn't get it to work. I have 0.1% knowledge of CSS and HTML.

This is the default value for extensions.zotfile.pdfExtraction.formatAnnotationUnderline:

"%(content)" (%(cite))

https://www.dropbox.com/s/njihjmgb3562rpr/1stcode.PNG?dl=0


If we could morph that with this code somehow, I feel it could work.

https://www.dropbox.com/s/0xtnlmt5w6tn9va/htmlcode.PNG?dl=0

Note: I had to edit the 2nd code as a link, it was displaying the code the same as the one above even though it's completely different. Just a weird day....

Right so, eventually I had to make a link for the 1st code as well. As the forum reacts to the html code no matter what I do; tried to enclose it into [code][/code], [quote][/quote]. Nothing works (sigh).


I tried several variations but unsuccessful, as I don't have HTML fundamentals

Color_category is pretty much interchangeable with color, only that color_category is more simplified as far as I understand it. Wildcards I suspect are the same, so I care for %(content).

So just this bit style="background-color needs to be changed to suit underline and not highlight. I had searched for code and discovered only border-bottom. I'd placed it in prior to posting but no avail. I am sure I had the code wrong anyway.

Davidal

I can't post the second code properly here, it displays simplified version the same as the above code. What the....

bwiernik

It probably requires a change to the Zotfile JavaScript.

Peter Gotterbarm

1) Adding Underline Annotation colors is simple html:

<p><span style="border-bottom: 1px solid %(color)">"%(content)"</span>(%(cite)</p>

2) Extracting highlight's note before, not after the highlight:
I cannot help you with the order how annotations are extracted.
But the original code adds an additional line breack after any extracted note. In your example they are sometimes before and sometimes after the related highlights, which messes up the view.
You can easily remove this line break, but then all the spaces will be the same, which is probably also not the intended result.
But your picture gave me the idea to create a coloured frame around the notes, which could create a better overview:. Try it out:

<div style="outline: 3px %(color) solid; padding: 0 5px 0px 5px"><p> %(content) (<a href="%(uri)">note on p.%(page)</a>)</p></div>

The same with an additional line break after the note:

<div style="outline: 3px %(color) solid; padding: 0 5px 0px 5px"><p> %(content) (<a href="%(uri)">note on p.%(page)</a>)</p></div><br>

... Exactly the same beside the last html-tag.

I hope this helps and the answer was not too late.

(The codes are entered to the Config Editor in Zotero -> extensions.zotfile.pdfExtraction.formatAnnotation )

Davidal

@Peter Gotterbarm

Oh yes! Amazing job! With a great reply like that it's never too late haha. I messed around with the break and it's a great feature to have handy by, but decided to use it without the break because the note becomes too long. Besides that new feature outline you added is so awesome that it doesn't even need the break.

I reshuffled the code a little and now I have the Citation always in the beginning so my eyes can follow the structure and find information more easily and less dissonantly.

<p> (%(cite)) <span style="background-color:%(color);">"%(content)"</span></p>

<div style="outline: 3px %(color) solid; padding: 0 5px 0px 5px"><p> (<a href="%(uri)">note on p.%(page)</a>) %(content)</p></div>

<p>(%(cite)) <span style="border-bottom: 1px solid %(color)"> "%(content)"</span></p>

Here's a view...
https://www.dropbox.com/s/von3rdmjtg64uxe/Assorted.PNG?dl=0

As opposed to....
https://www.dropbox.com/s/h9zetf0vv96l0kz/old.PNG?dl=0