Class: FlyzeUiScaleService

@flyze/lib-core-angular 1.0.0-alpha.34· latest

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:57

Scales the whole UI by one number: the root font size.

Every dimension in the Flyze component libraries is authored in rem, so setting documentElement.style.fontSize to a percentage re-lays-out text, control heights, icons and gaps together and proportionally. This service owns that one write, plus the clamping and the conversions that go with it; it renders nothing and has no UI of its own.

scale.setScale(125); // everything authored in rem grows by a quarter
scale.scale;         // 125
scale.scale$;        // Observable<number>, for the few places that cache a measurement

The scale is not part of the theme. FlyzeThemingService writes CSS custom properties and cannot express a font-size declaration; a length also has no business in a structure that is re-merged on every light/dark switch. Rationale: docs/decisions/0010-ui-scale-is-the-root-font-size.md

Three parts of the contract belong to the app, not here:

Persistence. Nothing is stored, exactly as the color scheme is not stored.
Applying before first paint. Read the persisted value and apply it in an app initializer (or an inline script in index.html) or every load flashes at neutral and jumps. If the app applied a percentage to documentElement before Angular bootstrapped, this service adopts it on construction so its exposed value never disagrees with the DOM.
The UI. Offer FLYZE_UI_SCALE_STEPS, not a free slider.

This service claims the inline root font size exclusively. An app must not write documentElement.style.fontSize itself, and a html { font-size } rule in a stylesheet would be overridden by it while the scale is not neutral.

Constructors

Constructor

new FlyzeUiScaleService(): FlyzeUiScaleService

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:86

Returns

FlyzeUiScaleService

Properties

scale$

readonly scale$: Observable<number>

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:73

Holds the current UI scale in percent, where 100 is the browser default.

Emits only on an actual change. Components do not need this to render at the new scale — rem resolves against the root at style-recalc time, so the browser reflows on its own. It exists for the few places that cached a pixel measurement in TypeScript and have to re-measure (virtual-scroll item sizes being the usual one).

Accessors

resolvedScaleFactor

Get Signature

get resolvedScaleFactor(): number

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:160

The factor an authored px value is actually being multiplied by, i.e. rootFontSize over FLYZE_UI_SCALE_BASE_FONT_SIZE.

Not the same as scale / 100, and that is the point: for a reader whose browser font size is 20px this is 1.25 while scale is 100. It is deliberately a snapshot rather than an observable — the browser preference can change without any event this service could observe, so a stream would go stale silently.

Returns

number

rootFontSize

Get Signature

get rootFontSize(): number

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:142

The resolved length of 1rem right now, in px.

Read from the computed style, so it accounts for every layer that multiplies into the baseline — this service’s scale, the user’s browser font-size preference, and browser zoom — not just the percentage scale reports. This is the number to use whenever TypeScript has to produce or interpret a real pixel length; scale alone is not sufficient (at a neutral scale, a reader who set 20px in their browser still has 1rem = 20px).

Prefer measuring the element you care about (clientHeight) over computing from this.

Returns

number

scale

Get Signature

get scale(): number

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:80

The current UI scale in percent, where 100 is the browser default.

Returns

number

Methods

pxToRem()

pxToRem(px): string

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:176

Converts a px value authored at the neutral scale into a rem CSS length, so it scales with the knob. The TypeScript counterpart of the component libraries’ SCSS fn.rem(), and the conversion to use wherever a numeric input means “px at 100%”: element.style.height = scale.pxToRem(58).

Scale-independent by design — it does not read the current scale, because the browser applies it when resolving the rem.

Parameters

px

number

The px value as authored at the neutral scale.

Returns

string

The equivalent rem length, e.g. '0.75rem' for 12.

remToPx()

remToPx(rem): number

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:196

Resolves a rem value to px at the current scale, using rootFontSize.

The inverse of pxToRem only at the neutral scale: remToPx(pxToRem(58)) is 58px at 100% and 72.5px at 125%. Use it where a px number has to be handed to something that cannot take a CSS length; the result is a snapshot and has to be recomputed when scale$ emits.

Parameters

rem

number

The value in rem.

Returns

number

The resolved length in px.

resetScale()

resetScale(): void

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:127

Resets the UI scale to neutral, clearing the inline root font size.

Returns

void

setScale()

setScale(percent): void

Defined in: projects/lib-core-angular/src/lib/modules/ui-scale/flyze-ui-scale.service.ts:108

Sets the UI scale.

The value is rounded to whole percent and clamped to FLYZE_UI_SCALE_MIN_PERCENT–FLYZE_UI_SCALE_MAX_PERCENT. A non-finite value is rejected with a warning and changes nothing.

At the neutral scale the inline style is cleared rather than set to 100%, so the browser default and the user’s own browser font-size preference fully govern the baseline.

Parameters

percent

number

The scale in percent, where 100 is the browser default.

Returns

void