umaki 0.12.0 → 0.13.0

package/README.md

@@ -106,6 +106,7 @@ console.log(breakpoint); // e.g. 768 (default) or custom value if set
   - [getRandomInt](#getrandomint)
   - [getRelativeTime](#getrelativetime)
   - [getRem](#getrem)
+  - [getRenderedLineHeight](#getrenderedlineheight)
   - [getScrollbarWidth](#getscrollbarwidth)
   - [getSessionStorage](#getsessionstorage)
   - [getStringLength](#getstringlength)
@@ -619,6 +620,48 @@ console.log(remValue); // '1rem'
 
 [View file →](src/libs/get/get-rem.ts)
 
+### getRenderedLineHeight
+
+Measures the line-height **as it is actually rendered** (in CSS pixels) for a target element by inserting a hidden probe element with the same font-related styles and dividing its multi-line height by the sample line count.
+
+This works around an iOS Safari quirk ([WebKit Bug #225695](https://bugs.webkit.org/show_bug.cgi?id=225695)) where fractional `line-height` values are floored to integer pixels at paint time. Stacking-line UIs that rely on `1lh` (e.g. `mask-image: repeating-linear-gradient` rules) drift on iOS Safari but match `getRenderedLineHeight` output. Returns `NaN` in SSR environments or when the probe cannot be measured.
+
+The caller is responsible for awaiting `document.fonts.ready` before measuring when font-loaded accuracy matters.
+
+```ts
+import { getRenderedLineHeight } from "umaki";
+
+const textEl = document.querySelector<HTMLElement>(".text");
+if (!textEl) return;
+
+await document.fonts.ready;
+
+const lh = getRenderedLineHeight(textEl);
+if (Number.isFinite(lh)) {
+  textEl.style.setProperty("--text-line-height", `${lh}px`);
+}
+```
+
+```css
+.text {
+  mask-image: repeating-linear-gradient(
+    to bottom,
+    transparent 0,
+    transparent calc(var(--text-line-height, 1lh) - 0.5px),
+    #000 calc(var(--text-line-height, 1lh) - 0.5px),
+    #000 var(--text-line-height, 1lh)
+  );
+}
+```
+
+You can adjust the sampling resolution via `sampleLines` (default `20`, minimum `2`):
+
+```ts
+const lh = getRenderedLineHeight(textEl, { sampleLines: 40 });
+```
+
+[View file →](src/libs/get/get-rendered-line-height.ts)
+
 ### getScrollbarWidth
 
 A function that retrieves the width of the scrollbar.

package/dist/index.cjs.js

@@ -25,9 +25,10 @@ const getGravatarUrl = require("./libs/get/get-gravatar-url.cjs.js");
 const getOrientation = require("./libs/get/get-orientation.cjs.js");
 const getParentList = require("./libs/get/get-parent-list.cjs.js");
 const getQueryParams = require("./libs/get/get-query-params.cjs.js");
-const getRelativeTime = require("./libs/get/get-relative-time.cjs.js");
 const getRandomInt = require("./libs/get/get-random-int.cjs.js");
+const getRelativeTime = require("./libs/get/get-relative-time.cjs.js");
 const getRem = require("./libs/get/get-rem.cjs.js");
+const getRenderedLineHeight = require("./libs/get/get-rendered-line-height.cjs.js");
 const getScrollbarWidth = require("./libs/get/get-scrollbar-width.cjs.js");
 const getSessionStorage = require("./libs/get/get-session-storage.cjs.js");
 const getStringLength = require("./libs/get/get-string-length.cjs.js");
@@ -87,9 +88,10 @@ exports.getGravatarUrl = getGravatarUrl.getGravatarUrl;
 exports.getOrientation = getOrientation.getOrientation;
 exports.getParentList = getParentList.getParentList;
 exports.getQueryParams = getQueryParams.getQueryParams;
-exports.getRelativeTime = getRelativeTime.getRelativeTime;
 exports.getRandomInt = getRandomInt.getRandomInt;
+exports.getRelativeTime = getRelativeTime.getRelativeTime;
 exports.getRem = getRem.getRem;
+exports.getRenderedLineHeight = getRenderedLineHeight.getRenderedLineHeight;
 exports.getScrollbarWidth = getScrollbarWidth.getScrollbarWidth;
 exports.getSessionStorage = getSessionStorage.getSessionStorage;
 exports.getStringLength = getStringLength.getStringLength;

package/dist/index.es.js

@@ -23,9 +23,10 @@ import { getGravatarUrl } from "./libs/get/get-gravatar-url.es.js";
 import { getOrientation } from "./libs/get/get-orientation.es.js";
 import { getParentList } from "./libs/get/get-parent-list.es.js";
 import { getQueryParams } from "./libs/get/get-query-params.es.js";
-import { getRelativeTime } from "./libs/get/get-relative-time.es.js";
 import { getRandomInt } from "./libs/get/get-random-int.es.js";
+import { getRelativeTime } from "./libs/get/get-relative-time.es.js";
 import { getRem } from "./libs/get/get-rem.es.js";
+import { getRenderedLineHeight } from "./libs/get/get-rendered-line-height.es.js";
 import { getScrollbarWidth } from "./libs/get/get-scrollbar-width.es.js";
 import { getSessionStorage } from "./libs/get/get-session-storage.es.js";
 import { getStringLength } from "./libs/get/get-string-length.es.js";
@@ -80,6 +81,7 @@ export {
   getRandomInt,
   getRelativeTime,
   getRem,
+  getRenderedLineHeight,
   getScrollbarWidth,
   getSessionStorage,
   getStringLength,

package/dist/libs/get/get-rendered-line-height.cjs.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const DEFAULT_SAMPLE_LINES = 20;
+const MIN_SAMPLE_LINES = 2;
+const MAX_SAMPLE_LINES = 100;
+const normalizeSampleLines = (value) => {
+  const raw = value ?? DEFAULT_SAMPLE_LINES;
+  if (!Number.isFinite(raw)) return DEFAULT_SAMPLE_LINES;
+  return Math.min(MAX_SAMPLE_LINES, Math.max(MIN_SAMPLE_LINES, Math.floor(raw)));
+};
+const getRenderedLineHeight = (element, options) => {
+  if (typeof window === "undefined") return Number.NaN;
+  const sampleLines = normalizeSampleLines(options?.sampleLines);
+  const ownerDocument = element.ownerDocument;
+  const host = ownerDocument?.body;
+  const view = ownerDocument?.defaultView;
+  if (!host || !view) return Number.NaN;
+  const cs = view.getComputedStyle(element);
+  const probe = ownerDocument.createElement("div");
+  const style = probe.style;
+  style.position = "absolute";
+  style.left = "-9999px";
+  style.top = "0";
+  style.visibility = "hidden";
+  style.pointerEvents = "none";
+  style.margin = "0";
+  style.padding = "0";
+  style.border = "0";
+  style.whiteSpace = "pre";
+  style.fontFamily = cs.fontFamily;
+  style.fontSize = cs.fontSize;
+  style.fontWeight = cs.fontWeight;
+  style.fontStyle = cs.fontStyle;
+  style.lineHeight = cs.lineHeight;
+  style.letterSpacing = cs.letterSpacing;
+  style.fontFeatureSettings = cs.fontFeatureSettings;
+  if (cs.fontVariationSettings) {
+    style.fontVariationSettings = cs.fontVariationSettings;
+  }
+  for (let i = 0; i < sampleLines; i++) {
+    if (i > 0) probe.appendChild(ownerDocument.createElement("br"));
+    probe.appendChild(ownerDocument.createTextNode("X"));
+  }
+  host.appendChild(probe);
+  try {
+    const probeHeight = probe.getBoundingClientRect().height;
+    if (probeHeight <= 0) return Number.NaN;
+    return probeHeight / sampleLines;
+  } catch {
+    return Number.NaN;
+  } finally {
+    if (probe.parentNode === host) {
+      host.removeChild(probe);
+    }
+  }
+};
+exports.getRenderedLineHeight = getRenderedLineHeight;

package/dist/libs/get/get-rendered-line-height.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Options for {@link getRenderedLineHeight}.
+ */
+export type GetRenderedLineHeightOptions = {
+    /**
+     * Number of lines used to measure the rendered line-height. Higher values
+     * yield a more precise per-line average. Clamped to the range [2, 100];
+     * non-finite values fall back to the default.
+     *
+     * @default 20
+     */
+    sampleLines?: number;
+};
+/**
+ * Measures the line-height as it is actually rendered (in CSS pixels) for the
+ * given element.
+ *
+ * On iOS Safari, fractional `line-height` values are floored to integer pixels
+ * at paint time, which makes `getComputedStyle(...).lineHeight` and the
+ * `1lh` unit drift from the visual baseline. This function inserts a hidden
+ * probe element with the same font/line-height related styles, measures the
+ * total height across multiple lines, and divides by the line count to obtain
+ * the actually rendered per-line height.
+ *
+ * Returns `NaN` in non-DOM environments (SSR), or when the probe cannot be
+ * measured (no body, no defaultView, zero/negative height, or measurement
+ * exception).
+ *
+ * The caller is responsible for waiting on `document.fonts.ready` before
+ * calling this function when accurate font-loaded measurements matter.
+ *
+ * @param element - The element whose rendered line-height should be measured.
+ * @param options - Measurement options.
+ * @returns The rendered line-height in CSS pixels, or `NaN` when measurement
+ *   is not possible.
+ */
+export declare const getRenderedLineHeight: (element: HTMLElement, options?: GetRenderedLineHeightOptions) => number;

package/dist/libs/get/get-rendered-line-height.es.js

@@ -0,0 +1,57 @@
+const DEFAULT_SAMPLE_LINES = 20;
+const MIN_SAMPLE_LINES = 2;
+const MAX_SAMPLE_LINES = 100;
+const normalizeSampleLines = (value) => {
+  const raw = value ?? DEFAULT_SAMPLE_LINES;
+  if (!Number.isFinite(raw)) return DEFAULT_SAMPLE_LINES;
+  return Math.min(MAX_SAMPLE_LINES, Math.max(MIN_SAMPLE_LINES, Math.floor(raw)));
+};
+const getRenderedLineHeight = (element, options) => {
+  if (typeof window === "undefined") return Number.NaN;
+  const sampleLines = normalizeSampleLines(options?.sampleLines);
+  const ownerDocument = element.ownerDocument;
+  const host = ownerDocument?.body;
+  const view = ownerDocument?.defaultView;
+  if (!host || !view) return Number.NaN;
+  const cs = view.getComputedStyle(element);
+  const probe = ownerDocument.createElement("div");
+  const style = probe.style;
+  style.position = "absolute";
+  style.left = "-9999px";
+  style.top = "0";
+  style.visibility = "hidden";
+  style.pointerEvents = "none";
+  style.margin = "0";
+  style.padding = "0";
+  style.border = "0";
+  style.whiteSpace = "pre";
+  style.fontFamily = cs.fontFamily;
+  style.fontSize = cs.fontSize;
+  style.fontWeight = cs.fontWeight;
+  style.fontStyle = cs.fontStyle;
+  style.lineHeight = cs.lineHeight;
+  style.letterSpacing = cs.letterSpacing;
+  style.fontFeatureSettings = cs.fontFeatureSettings;
+  if (cs.fontVariationSettings) {
+    style.fontVariationSettings = cs.fontVariationSettings;
+  }
+  for (let i = 0; i < sampleLines; i++) {
+    if (i > 0) probe.appendChild(ownerDocument.createElement("br"));
+    probe.appendChild(ownerDocument.createTextNode("X"));
+  }
+  host.appendChild(probe);
+  try {
+    const probeHeight = probe.getBoundingClientRect().height;
+    if (probeHeight <= 0) return Number.NaN;
+    return probeHeight / sampleLines;
+  } catch {
+    return Number.NaN;
+  } finally {
+    if (probe.parentNode === host) {
+      host.removeChild(probe);
+    }
+  }
+};
+export {
+  getRenderedLineHeight
+};

package/dist/libs/get/get-rendered-line-height.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/libs/get/index.cjs.js

@@ -9,9 +9,10 @@ const getGravatarUrl = require("./get-gravatar-url.cjs.js");
 const getOrientation = require("./get-orientation.cjs.js");
 const getParentList = require("./get-parent-list.cjs.js");
 const getQueryParams = require("./get-query-params.cjs.js");
-const getRelativeTime = require("./get-relative-time.cjs.js");
 const getRandomInt = require("./get-random-int.cjs.js");
+const getRelativeTime = require("./get-relative-time.cjs.js");
 const getRem = require("./get-rem.cjs.js");
+const getRenderedLineHeight = require("./get-rendered-line-height.cjs.js");
 const getScrollbarWidth = require("./get-scrollbar-width.cjs.js");
 const getSessionStorage = require("./get-session-storage.cjs.js");
 const getStringLength = require("./get-string-length.cjs.js");
@@ -27,9 +28,10 @@ exports.getGravatarUrl = getGravatarUrl.getGravatarUrl;
 exports.getOrientation = getOrientation.getOrientation;
 exports.getParentList = getParentList.getParentList;
 exports.getQueryParams = getQueryParams.getQueryParams;
-exports.getRelativeTime = getRelativeTime.getRelativeTime;
 exports.getRandomInt = getRandomInt.getRandomInt;
+exports.getRelativeTime = getRelativeTime.getRelativeTime;
 exports.getRem = getRem.getRem;
+exports.getRenderedLineHeight = getRenderedLineHeight.getRenderedLineHeight;
 exports.getScrollbarWidth = getScrollbarWidth.getScrollbarWidth;
 exports.getSessionStorage = getSessionStorage.getSessionStorage;
 exports.getStringLength = getStringLength.getStringLength;

package/dist/libs/get/index.d.ts

@@ -10,9 +10,10 @@ export * from './get-gravatar-url';
 export * from './get-orientation';
 export * from './get-parent-list';
 export * from './get-query-params';
-export * from './get-relative-time';
 export * from './get-random-int';
+export * from './get-relative-time';
 export * from './get-rem';
+export * from './get-rendered-line-height';
 export * from './get-scrollbar-width';
 export * from './get-session-storage';
 export * from './get-string-length';

package/dist/libs/get/index.es.js

@@ -7,9 +7,10 @@ import { getGravatarUrl } from "./get-gravatar-url.es.js";
 import { getOrientation } from "./get-orientation.es.js";
 import { getParentList } from "./get-parent-list.es.js";
 import { getQueryParams } from "./get-query-params.es.js";
-import { getRelativeTime } from "./get-relative-time.es.js";
 import { getRandomInt } from "./get-random-int.es.js";
+import { getRelativeTime } from "./get-relative-time.es.js";
 import { getRem } from "./get-rem.es.js";
+import { getRenderedLineHeight } from "./get-rendered-line-height.es.js";
 import { getScrollbarWidth } from "./get-scrollbar-width.es.js";
 import { getSessionStorage } from "./get-session-storage.es.js";
 import { getStringLength } from "./get-string-length.es.js";
@@ -29,6 +30,7 @@ export {
   getRandomInt,
   getRelativeTime,
   getRem,
+  getRenderedLineHeight,
   getScrollbarWidth,
   getSessionStorage,
   getStringLength,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umaki",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A utility that is often used in web production.",
   "author": "TsubasaHiga",
   "homepage": "https://github.com/TsubasaHiga/umaki",