79277464

Date: 2024-12-13 07:15:07
Score: 0.5
Natty:
Report link

I ultimately wrote an extremely simple js implementation heavily inspired by @Lars' answer above.

First, as Lars pointed out, my existing markup is inconvenient for this task because I am interested in measuring the length of the text of certain lines, but each line of text is only enclosed in p tags which are block-level. So I first changed my markup to enclose each line in a span, and apply the indent to the span rather than to the paragraph:

<p><span class="line indent">You juggler, you cankerblossom,</span></p>
<p><span class="line">You thief of love! What, have you come by night</span></p>

Then I wrote a simple javascript function to go through every line on the page, and if it has the indent class, update its left padding to equal to the width of the prior line.

Array.from(document.getElementsByClassName("line")).reduce(
    (prior, current) => {
        if (current.classList.contains("indent")) {
            current.style.paddingLeft = prior.offsetWidth + "px";
        }; 
        return current;
    }
);

I'm kind of abusing the first parameter of reduce here as a way to get the previous line without having to access it by its index, but since I only care about the side effects and not the ultimate return value, it works out ok.

Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @Lars'
  • Self-answer (0.5):
  • Low reputation (0.5):
Posted by: thecommexokid