data-format-bytes

Human-readable file size formatting. Add data-format-bytes to any <data> element for automatic byte formatting.

Overview

The data-format-bytes attribute enhances native <data> elements by replacing their text content with a human-readable file size string. Uses binary math (÷1024) by default with familiar units (KB, MB, GB).

<data value="1048576" data-format-bytes>1 MB</data>

How It Works

  1. Reads the value attribute from the <data> element and parses it as bytes
  2. Stores the original text content as a title attribute (visible on hover)
  3. Divides by 1024 (or 1000 for decimal) to find the best unit
  4. Formats the numeric part using Intl.NumberFormat for locale-aware digits
  5. Replaces the text with the formatted value and unit label

Attributes

Attribute Type Description
data-format-bytes string Decimal precision for the formatted value. Default "0" (no decimals). Use "1" or "2" for more detail.
value string The raw byte count. Standard HTML value attribute on <data>.
data-unit string "decimal" to use ÷1000 instead of ÷1024. Default is binary.
data-locale string Optional locale override (e.g., "de-DE"). Defaults to browser locale.
data-format-bytes-init boolean Set automatically to prevent double-binding. Do not set manually.

Precision

The attribute value controls decimal places in the output:

0 decimals (default): 1 MB

1 decimal: 1.5 MB

2 decimals: 5.00 GB
<data value="1536000" data-format-bytes="1">1.5 MB</data> <data value="5368709120" data-format-bytes="2">5.00 GB</data>

Binary vs. Decimal

By default, data-format-bytes uses binary math (÷1024), matching how operating systems report file sizes. Add data-unit="decimal" to use ÷1000 (how storage manufacturers report capacity).

Binary (default): 1 MB

Decimal: 1 MB
<!-- Binary (default): ÷1024 --> <data value="1048576" data-format-bytes>1 MB</data> <!-- Decimal: ÷1000 --> <data value="1000000" data-format-bytes data-unit="decimal">1 MB</data>

Unit Reference

Unit Binary (÷1024) Decimal (÷1000)
B11
KB1,0241,000
MB1,048,5761,000,000
GB1,073,741,8241,000,000,000
TB1,099,511,627,7761,000,000,000,000
PB1,125,899,906,842,6241,000,000,000,000,000

Locale Override

Use data-locale to format the numeric part in a specific locale:

German: 1,5 MB

<data value="1536000" data-format-bytes="1" data-locale="de-DE">1,5 MB</data>

Common Use Cases

File List

Display file sizes in a table. The font-variant-numeric: tabular-nums CSS ensures columns align:

FileSize
photo.jpg 3.0 MB
document.pdf 512.0 KB
video.mp4 1.0 GB
<table> <thead> <tr><th>File</th><th>Size</th></tr> </thead> <tbody> <tr> <td>photo.jpg</td> <td><data value="3145728" data-format-bytes="1">3.0 MB</data></td> </tr> <tr> <td>document.pdf</td> <td><data value="524288" data-format-bytes="1">512.0 KB</data></td> </tr> <tr> <td>video.mp4</td> <td><data value="1073741824" data-format-bytes="1">1.0 GB</data></td> </tr> </tbody> </table>

Dynamic Elements

Elements added to the DOM after page load are automatically enhanced via a MutationObserver. No manual initialization is needed.

// Dynamically added elements are auto-enhanced via MutationObserver const el = document.createElement('data'); el.value = '2147483648'; el.dataset.formatBytes = '1'; el.textContent = '2 GB'; document.body.appendChild(el); // el is enhanced automatically — no manual init needed

Progressive Enhancement

The <data> element's original text serves as a fallback when JavaScript is unavailable. Write a reasonable pre-formatted value as the text content.

<data value="1048576" data-format-bytes>1 MB</data>

Accessibility

  • The original text is preserved as a title attribute, accessible on hover
  • The semantic <data> element with value attribute provides machine-readable byte counts
  • Falls back to the original text content when JavaScript is unavailable
  • No wrapper element — the <data> is the enhanced element, keeping the accessibility tree clean