starchy 0.1.0 → 0.1.1

package/README.md

@@ -37,6 +37,7 @@ the whole range and lets the page show it where the layout shifts:
 | Overlap | In-flow sibling elements overlap each other. |
 | Escapes container | An element sticks out of its parent's box. |
 | Clipped text | Text is cut off by `overflow: hidden`. |
+| Wrapped link | A link or button label of 5 words or fewer breaks onto 2+ lines. Links inside running text and headings are skipped. |
 | Tiny text | Text is below `--min-font` (default 12px). |
 
 ## Install
@@ -104,7 +105,8 @@ open test-report/report.html
 - **Some content isn't inspected.** Shadow DOM and iframes are skipped.
   Auto-rotating carousels and other animated elements need `--ignore`.
 - **Inline text reflow is ignored on purpose.** It changes at almost every
-  pixel. Text is checked through the clipped-text and tiny-text rules instead.
+  pixel. Text is checked through the clipped-text, wrapped-link and tiny-text rules
+  instead.
 - **Chromium only for now.**
 
 ## Project layout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "starchy",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Keep your layout crisp at every width. Finds every screen width where a page's layout changes, and flags the ones that are bugs.",
   "homepage": "https://starchy.dev",
   "repository": {

package/src/analyze.js

@@ -104,7 +104,7 @@ function issueRanges(first, transitions, min, last) {
     const atEnd = last && last.issues.find((y) => y.key === o.issue.key);
     done.push({ ...o, issue: atEnd || o.issue, to: min });
   }
-  const rank = { 'page-overflow': 0, overlap: 1, 'container-overflow': 2, 'text-clipped': 3, 'tiny-text': 4 };
+  const rank = { 'page-overflow': 0, overlap: 1, 'container-overflow': 2, 'text-clipped': 3, 'link-wrapped': 4, 'tiny-text': 5 };
   return done.sort((a, b) => rank[a.issue.kind] - rank[b.issue.kind] || b.from - a.from);
 }
 

package/src/fingerprint.js

@@ -207,6 +207,28 @@ function fingerprint(opts) {
     }
   }
 
+  // 6. short link/button labels broken onto 2+ lines. Skips links in running text and
+  //    headings, and only counts wrapping inside one text node, so <br>/block lines pass.
+  for (const el of document.body.querySelectorAll('a[href], button, [role="button"]')) {
+    if (ignored.length && ignored.some((ig) => ig.contains(el))) continue;
+    const text = el.textContent.trim().replace(/\s+/g, ' ');
+    if (!text || text.split(' ').length > 5 || el.closest('h1, h2, h3, h4, h5, h6')) continue;
+    const cs = getComputedStyle(el);
+    if (cs.visibility !== 'visible' || el.getClientRects().length === 0) continue;
+    if (cs.display === 'inline' && el.parentElement && el.parentElement.textContent.trim().replace(/\s+/g, ' ') !== text) continue;
+    let lines = 0;
+    const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    for (let n; (n = walker.nextNode());) {
+      if (!n.textContent.trim()) continue;
+      const range = document.createRange();
+      range.selectNodeContents(n);
+      const tops = Array.from(range.getClientRects(), (r) => (r.width > 0 ? r.top : null)).filter((t) => t !== null).sort((a, b) => a - b);
+      const half = parseFloat(getComputedStyle(n.parentElement).fontSize) / 2;
+      lines = Math.max(lines, tops.filter((t, i) => i === 0 || t - tops[i - 1] > half).length);
+    }
+    if (lines > 1) add('link-wrapped', [{ path: getPath(el), label: label(el) }], `"${text}" wraps onto ${lines} lines`);
+  }
+
   const labels = {};
   for (const u of units.values()) labels[u.path] = u.label;
   labels.body = 'body';

package/src/report.js

@@ -9,6 +9,7 @@ const KIND = {
   overlap: 'Overlap',
   'container-overflow': 'Escapes container',
   'text-clipped': 'Clipped text',
+  'link-wrapped': 'Wrapped link',
   'tiny-text': 'Tiny text',
 };
 const CAT = {
@@ -177,7 +178,7 @@ code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(
 .problems .range{grid-column:3;grid-row:1;font-variant-numeric:tabular-nums;font-size:13px;white-space:nowrap}
 .problems .more{display:block;color:var(--muted)}.problems .kind{justify-self:start}.at{opacity:.75}
 .kind{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
-.k-text-clipped,.k-tiny-text{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent)}
+.k-text-clipped,.k-link-wrapped,.k-tiny-text{color:var(--amber);background:color-mix(in srgb,var(--amber) 14%,transparent)}
 .ok{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--green);margin:0}
 .change{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 12px;scroll-margin-top:12px}
 .change header{display:flex;align-items:center;justify-content:space-between;gap:10px}