Idea: Use linear-gradient for each line

[InvisibleUp]

I've noticed that the performance of WaspLine is a bit slow with large pages, due to how it has to create a <span> element with custom styling for every single character, and then iterate through all of those whenever the user updates a setting.

Here's a page that showcases a neat alternative. It applies a rainbow gradient to the entire block of text by using the following CSS rules:

p {
	position: relative;
	background: #000;
	color: #fff;
	mix-blend-mode: lighten;
}
p::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(to right, #FA5858, #FE9A2E, #F3F781, #82FA58, #2EFE9A, #2ECCFA, #5858FA, #BE81F7, #F5A9F2);
	pointer-events: none;
	mix-blend-mode: multiply;
}

This adds a background element to each paragraph element containing a rainbow, and then sets the blending mode so that the text color falls through to the background.

If we could just make a span for each line, then we could set a single CSS class for each line (like .waspline-1-left for the first color on the left side, etc.) and change only the CSS when the user wants to update the colors or the gradient size, resulting in some serious speedup.

[corollari]

Great idea, I've been also wanting to modify the code used by js-line-detector to work correctly with superscripts and underscripts, so this change seems like the perfect opportunity to incorporate both changes.
Edit: One way I thought this could work by using a wider threshold for line separation than the current one, which is really strict. What this would mean is that it would not trigger a line change unless a letter/word is 100% lower than the previous one.