image-rendering:pixelated Integer Scale Note

Observed geometric integer magnification check; image-rendering:pixelated can operate at noninteger scales and does not require exact integer zoom. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.

Description

Integer scaling can map one source pixel to a uniform number of display pixels.

Integer scaling can map one source pixel to a uniform number of display pixels.1

A numeric scale check does not control the actual image resampling performed by a browser. Use image-rendering:pixelated Integer Scale Note to evaluate the supplied inputs under the specific model below.

When to use image-rendering:pixelated Integer Scale Note

Use image-rendering:pixelated Integer Scale Note to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.

How to use image-rendering:pixelated Integer Scale Note and understand its results

  1. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
  2. Enter Intrinsic pixel width, Rendered width px using the field table and validation rules below, then run the tool.
  3. Read Scale factor, Uniform integer pixel scale and interpret units, signs, ordering and placeholders as explained below.
  4. If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
Input fieldMeaningValue typeRequirement
intrinsicPixelWidthIntrinsic pixel widthnumberRequired; constraints below
renderedWidthPxRendered width pxnumberRequired; constraints below

Enter a positive safe-integer intrinsic width and a positive rendered width in px. Return rendered/intrinsic and whether that ratio is an integer. This is a single-axis geometric check, not a browser sampling-quality measurement; a nonintegral downscale is reported false and no rendering style is applied.

scale = renderedWidth/intrinsicWidth; integerScale = Number.isInteger(scale)

Field order, units and branch conditions follow the implementation explanation above.

Output fieldMeaningValue type
scaleFactorScale factornumber
uniformIntegerPixelScaleUniform integer pixel scaleboolean
json
{
  "input": {
    "intrinsicPixelWidth": 10,
    "renderedWidthPx": 25
  },
  "output": {
    "scaleFactor": 2.5,
    "uniformIntegerPixelScale": false
  }
}

Limitations and assumptions

A numeric scale check does not control the actual image resampling performed by a browser. Apply the exact scope and assumptions described above.

All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.

Alternative or Complementary methods

Use font-feature-settings Ligatures Toggle for a related task: Ligature settings request particular OpenType feature tags.

Use font-variant-numeric Tabular/Lining Lookup for a related task: Numeric font features distinguish digit width and digit form.

References

  1. image-rendering:pixelated Integer Scale Note — tool.io

Similar or alternative tools

Don't forget to set a bookmark for tool.io!
Privacy | Imprint | Cookies