I have sidenotes floated to the margin using -prince-float-reference they generally work great. When the sidenote references are too close prince stack them nicely but I would like to add a little bit of extra space either top or bottom so the sidenotes can be easily identified. I add some margin-top and bottom which works great until the note is at the very end or the very top of the page.

I read that prince does not know the position of the element referenced to the page but I was wondering how could I solve this issue which is basically removing the margin-top or margin-botton when the sidenote is at start or end of the page.

Many thanks!

Happy to hear you are using sidenotes.

Indeed, margin/padding set on sidenotes will always apply.

Are you top- or bottom-floating your sidenotes?

If so, one could potentially make the "margin-alt" property apply. Currently it only applies to page floats, not to sidenotes. If it did, would it solve your problem?

Edited 29 Dec 2024 by howcome

Thanks, sidenotes are floating next to the index so it only happens in unusual cases when the index is at the last/first line or sidenotes have been pushed because the are a few close by. I finally managed to get it working by doing some calculations so when the sidetone is close to the upper/bottom margin the margin top/bottom is removed

// Post layout call to fix sidenote margins
function fixSidenoteMargins(lowestY, uppermostY) {
   schedule(fixSidenoteMargins_postlayout,[lowestY,uppermostY]);
}

// function to fix sidenote top and bottom margins
function fixSidenoteMargins_postlayout(fixSidenote_args) {
   var lowestYThreshold = fixSidenote_args[0];
   var uppermostYThreshold = topt(fixSidenote_args[1]);
   // convert to points
   lowestYThreshold = convertToPoints(lowestYThreshold);
   uppermostYThreshold = convertToPoints(uppermostYThreshold);
   // Find all span elements with class "sidenote-lua" or "sidenote-fn"
   var elements = document.querySelectorAll("span.sidenote-lua, span.sidenote-fn");
   for(var i=0; i<elements.length; i++) { 
       var boxes = elements[i].getPrinceBoxes();
       if (boxes.length > 0) {
            if (DEBUG) {
               console.log("tagname: ", elements[i].className, " id: ", elements[i].id);
               console.log("  x: ", uni(boxes[0].x));
               console.log("  y: ", uni(boxes[0].y));
               console.log("  width: ", uni(boxes[0].w));
               console.log("  height: ", uni(boxes[0].h));
               console.log("  page: ", boxes[0].pageNum);
               console.log("  margin bottom: ", uni(boxes[0].marginBottom));
               console.log("  uppermost y: ", uni(uppermostY));
               console.log("  lowest y: ", uni(lowestY));
            }
           var uppermostY = boxes[0].y;
           var lowestY = boxes[0].y - boxes[0].h;

           if (lowestY <= lowestYThreshold) {
               boxes[0].element.style.marginBottom = "0";
               console.log("page: ", boxes[0].pageNum, " id: ", elements[i].id);
               console.log("margin bottom set to 0 due to lowestY being", uni(lowestYThreshold), "or less");
               if (DEBUG) {
                  boxes[0].element.style.color="red";
               }
           }
           if (uppermostY >= uppermostYThreshold) {
               boxes[0].element.style.marginTop = "0";
               console.log("page: ", boxes[0].pageNum, " id: ", elements[i].id);
               console.log("margin top set to 0 due to uppermostY being", uni(uppermostYThreshold), "or more");
               if (DEBUG) {
                  boxes[0].element.style.color="red";
               }
           }   
       }
   }
}

Good work! Given that your sidenotes are attached to their anchoring point, I don't see an easy automatic solution.

Thanks! it is working well now, it could be improved by reading the page size and top/bottom margins within the javascript but I couldn't find a way to do this in the documentation, is that possible?

No, not possible. I have wished for this, too.