Splitting.lines!

README.md

@@ -103,6 +103,20 @@ _Output:_
 
 ---
 
+# Splitting.lines(el)
+
+Splits an element by words, if not already done so, and adds an extra `--line-index` variable to each `.word`. The parent element also gets a `--line-total` var.
+
+_Does not update automatically on resize._ You'll need to attach your own event listeners _with debouncing_ for when the element's line width may have changed. Simply call `Splitting.lines` again on the element and the indexes will be updated.
+
+### Example
+
+```js
+Splitting.lines("p[data-splitting]");
+```
+
+---
+
 # Splitting.fromString(str, opts)
 
 Split a string and receive back the HTML as a string for splitting before hitting the DOM. Useful for frameworks like Vue where you may be splitting a dynamic value.

splitting.js

@@ -171,6 +171,35 @@ Splitting.chars = function(els) {
   });
 };
 
+/**
+ * # Splitting.lines
+ * Index each word by line. Does not automatically update on resize, so retrigger `Splitting.lines` again _with debouncing_ when the element's line width may have changed.
+ * @param {*} els
+ */
+Splitting.lines = function(els) {
+  return Splitting.words(els).map(function(s) {
+    var lines = [],
+      lineIndex = -1,
+      top,
+      lastTop = 0;
+
+    s.words.map(function(w) {
+      top = w.offsetTop;
+      if (top > lastTop) {
+        lineIndex++;
+        lastTop = top;
+      }
+      lines[lineIndex] = lines[lineIndex] || [];
+      lines[lineIndex].push(w);
+      w.style.setProperty("--line-index", lineIndex);
+    });
+
+    s.lines = lines;
+    s.el.style.setProperty("--line-total", lines.length);
+    return s;
+  });
+};
+
 /**
  * # Splitting.fromString
  * Splits a string and returns the processed HTML with elements and CSS Vars.

src/splitting.js

@@ -165,6 +165,35 @@ Splitting.chars = function(els) {
   });
 };
 
+/**
+ * # Splitting.lines
+ * Index each word by line. Does not automatically update on resize, so retrigger `Splitting.lines` again _with debouncing_ when the element's line width may have changed.
+ * @param {*} els
+ */
+Splitting.lines = function(els) {
+  return Splitting.words(els).map(function(s) {
+    var lines = [],
+      lineIndex = -1,
+      top,
+      lastTop = 0;
+
+    s.words.map(function(w) {
+      top = w.offsetTop;
+      if (top > lastTop) {
+        lineIndex++;
+        lastTop = top;
+      }
+      lines[lineIndex] = lines[lineIndex] || [];
+      lines[lineIndex].push(w);
+      w.style.setProperty("--line-index", lineIndex);
+    });
+
+    s.lines = lines;
+    s.el.style.setProperty("--line-total", lines.length);
+    return s;
+  });
+};
+
 /**
  * # Splitting.fromString
  * Splits a string and returns the processed HTML with elements and CSS Vars.