rem Root Consistency Checker
Resolve a nonnegative rem length against the root font size and compare it with a supplied computed pixel length.
Description
A rem length resolves using the root element's font size.
A rem length resolves using the root element's font size. Comparing an expected length with an observed pixel value can expose a wrong assumed root size or an inconsistency in supplied measurements.1
Resolve a nonnegative rem length against the root font size and compare it with a supplied computed pixel length.
When to use rem Root Consistency Checker
Use this tool to resolve a nonnegative rem length against the root font size and compare it with a supplied computed pixel length.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use rem Root Consistency Checker and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter rootSize, remValue, observedPixels, tolerance using the field table and calculation rules, then run the tool.
- Read expectedPixels, consistent. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| rootSize | Root font size | number; minimum: 0 | Required |
| remValue | Length in rem | number; minimum: 0 | Required |
| observedPixels | Observed pixel length | number; minimum: 0 | Required |
| tolerance | Absolute pixel tolerance | number; minimum: 0 | Required |
Enter nonnegative root font size, rem length, observed pixel length and absolute pixel tolerance. The tool multiplies the root size by the rem value and compares the absolute difference inclusively with the tolerance. Equality passes; zero size or zero rem gives an expected zero. A nonfinite resolved length is an error.
expectedPixels = rootSize × remValue; consistent = |expectedPixels − observedPixels| ≤ tolerance Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| expectedPixels | Expected pixel length | number; minimum: 0 |
| consistent | Within tolerance | boolean |
{
"input": {
"rootSize": 16,
"remValue": 2,
"observedPixels": 32,
"tolerance": 0
},
"output": {
"expectedPixels": 32,
"consistent": true
}
}Limitations and assumptions
This does not read computed styles, determine the root font size or diagnose browser rounding and zoom. It handles nonnegative lengths only and uses an absolute tolerance, not a relative percentage. The observations must use the same CSS pixel convention.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors. A successfully returned false flag is an evaluated outcome; its meaning is explained above.
Alternative or Complementary methods
Use em Font-Size Compounding Depth Calculator: Calculate a nested font size from a root size and successive nonnegative em font-size multipliers. For a complementary task, use Translate % Relative To Own Box Width: Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.
References
-
rem Root Consistency Checker — tool.io
Similar or alternative tools
- em Font-Size Compounding Depth Calculator
Calculate a nested font size from a root size and successive nonnegative em font-size multipliers.
- Translate % Relative To Own Box Width
Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.