Util

getRootFontSize

Read the document root's computed font-size in pixels. Used internally by resolveCssSize to convert rem-based values to px.

Usage

import { getRootFontSize } from 'ngwr/utils';

const px = getRootFontSize();   // e.g. 16
const remToPx = 2 * px;          // convert '2rem' to pixels

// The fallback is what SSR (and an unparseable computed value) resolves to.
const px14 = getRootFontSize(14);

Why ngwr provides this

There's no built-in way to read the root font-size in TS — the recipe (parseFloat(getComputedStyle(document.documentElement).fontSize)) is verbose, easy to mistype (people often grab body instead of documentElement), and crashes during SSR where document is undefined. ngwr wraps it once, SSR-safely.

// Native — verbose, easy to typo `body` instead of `documentElement`,
// and crashes on SSR where `document` is undefined.
const px = parseFloat(getComputedStyle(document.documentElement).fontSize);

// ngwr — one call, SSR-safe (returns a sensible 16 when document isn't available).
const px = getRootFontSize();

API

NameDescriptionTypeDefault
getRootFontSize(fallback?)Pixel value of :root font-size. Useful for converting rem-based inputs to px in TS. fallback is returned when there is no DOM (SSR) or the computed value does not parse.(fallback = 16) => number