I’m trying to make a script to implement hanging punctuation. I have managed to identify the type line boxes that start with a quote glyph but I can’t find the way to move these lines individually, tried negative marginLeft and xposition but line box object seems not to be affected by them. Can’t find any examples in the documentation that alters properties of individual lines, any ideas on how to implement this? Many thanks!

Looking at this for left aligned paragraphs so i would be able optically align the paragraph by just offsetting lines starting with selected glyphs

Pseudo-elements in CSS can select the first letter, and the first line. But there is no general mechanism to select lines.

You can use the Boxtracking API to find the content on the line. From there, you can go back and make changes to the document, e.g. adding a span element around such content. Then you could style the span element. But it's a risky road as your changes may influence line-breaking.

Edited 29 Dec 2024 by howcome

Thanks, this is what I have so far, not sure how to add the span around the line element, tried few different things but I can't find the way to do it.

As my paragraphs are not justified I guess that line content remains the same, it would be just a minor offset to the left in selected lines

Many thanks!

/**
 * Looks inside all the p elements, browses all the LINE elements within the p element,
 * and selects the first letter of the TEXT element within the LINE.
 */
function setFirstLetterHanging_postLayout() {
   var elements = document.querySelectorAll("p");
   for(var i=0; i<elements.length; i++) {                    // loop through elements
      var thiselement = elements[i];
      var fboxes = elements[i].getPrinceBoxes();
      for (var j=0; j<fboxes.length; j++) {                  // loop through boxes
         var thisbox = fboxes[j];
         for (var k=0; k<thisbox.children.length; k++) {     // loop through lines
            var thisline = thisbox.children[k];
            for (var l=0; l<thisline.children.length; l++) {  //loop through texts
               var thistext = thisline.children[l];
               //consoleLog(thistext.text);
               var firstLetter = thistext.text[0];
               if (firstLetter === 'A') {
                  consoleLog(thistext.text);
               }
            }
         }
      }
   }
}

function setFirstLetterHanging() {
   schedule(setFirstLetterHanging_postLayout);
}

I've added a simple example where opening quote marks are moved outside the box by way of a negative text-indent value:

https://css4.pub/2024/boxtracking/#hanging-punctuation

This is not a general solution for hanging punctuation, but it will address this common use case.

Edited 1 Jan 2025 by howcome

Thanks! Looks great, super elegant solution so the width is an automatically measured. how I could tag with a span element those first elements in a line using the Box Tracking API in javascript? I am still trying to figure out how to modify/insert content at the line level. Thanks again!