data
Links content with a machine-readable value. Enhanced in VB with locale-aware number formatting, byte formatting, and animated ticker effects.
Description
The <data> element links content with a machine-readable value attribute. The visible text is the human-readable form; the value is for scripts, search engines, and data processors.
In Vanilla Breeze, <data> is enhanced with three powerful features:
- Locale-aware number formatting via
data-format-number - Byte formatting via
data-format-bytes - Animated counter (ticker) via the
data-effect="ticker"effect
For date and time values, use <time> instead.
When to Use
- Product identifiers: UPC codes, SKUs, ISBN numbers
- Prices: Display currency while storing raw numeric value
- Statistics: Counters, percentages, metrics
- Measurements: File sizes, distances, weights
- Normalized values: Any data where the display and machine formats differ
When NOT to Use
- For dates and times — use
<time> - For measurements within a known range — use
<meter> - For progress toward completion — use
<progress>
Basic Usage
<p>The price is <data value="49.99">$49.99</data>.</p><ul> <li><data value="UPC:012345678901">Wireless Headphones</data> - $79.99</li> <li><data value="UPC:012345678902">Bluetooth Speaker</data> - $49.99</li></ul><table> <tr><td>USA</td><td><data value="1000">$1,000</data></td></tr> <tr><td>UK</td><td><data value="800">£800</data></td></tr> <tr><td>EU</td><td><data value="900">€900</data></td></tr></table>Number Formatting
Add data-format-number to have VB automatically format the value using the page's locale via Intl.NumberFormat. The visible text serves as a no-JS fallback.
<!-- Decimal (default) --><data value="1234567" data-format-number>1,234,567</data> <!-- Currency --><data value="48200" data-format-number="currency" data-currency="USD">$48,200</data> <!-- Percent --><data value="0.85" data-format-number="percent">85%</data> <!-- Compact --><data value="1500000" data-format-number="compact">1.5M</data>| Attribute Value | Format | Example (en-US) |
|---|---|---|
data-format-number (empty) |
Decimal | 1,234,567 |
data-format-number="currency" |
Currency (requires data-currency) |
$48,200.00 |
data-format-number="percent" |
Percentage | 85% |
data-format-number="compact" |
Compact notation | 1.5M |
Byte Formatting
Add data-format-bytes to format raw byte values as human-readable file sizes. The attribute value sets decimal precision.
<!-- Default (no decimals) --><data value="1048576" data-format-bytes>1 MB</data> <!-- With decimal precision --><data value="1536000" data-format-bytes="1">1.5 MB</data> <!-- Decimal units (1000-based) --><data value="1000000" data-format-bytes data-unit="decimal">1 MB</data>| Attribute | Description |
|---|---|
data-format-bytes |
Format as bytes (default: 0 decimal places) |
data-format-bytes="1" |
1 decimal place (e.g., 1.5 MB) |
data-unit="decimal" |
Use 1000-based units instead of 1024-based |
Ticker Effect
The data-effect="ticker" animates a count-up from a start value to the element's value when it becomes visible. Useful for statistics and dashboards.
<data value="50000" data-effect="ticker" data-trigger="scroll" style="--vb-ticker-duration: 2000">50,000</data>| Attribute / Property | Description | Default |
|---|---|---|
data-effect="ticker" |
Enable animated count-up | — |
data-trigger="scroll" |
Start when scrolled into view (IntersectionObserver) | — |
--vb-ticker-start |
Starting number (CSS custom property) | 0 |
--vb-ticker-duration |
Animation duration in ms (CSS custom property) | 1000 |
--vb-ticker-decimals |
Decimal places (CSS custom property) | auto-detected |
Parameters are read from CSS custom properties via style="--vb-ticker-duration: 2000". This follows VB's unified effect configuration pattern. The ticker respects prefers-reduced-motion — the animation is skipped entirely when reduced motion is preferred.
Locale Override
Number and byte formatting use the page's locale (from html[lang]) by default. Override per-element with data-locale:
<!-- Uses page locale from html[lang] --><data value="1234567" data-format-number>1,234,567</data> <!-- Override locale for this element --><data value="1234567" data-format-number data-locale="de-DE">1.234.567</data>See the Internationalization guide for full locale resolution details.
CSS Reference
data { font-family: var(--font-mono); font-size: 0.9em;}VB styles <data> with monospace font at 0.9em to distinguish machine-readable values from prose text.
Attributes
| Attribute | Description |
|---|---|
value |
Required. Machine-readable translation of the content. |
data-format-number |
Enable locale-aware number formatting (VB enhancement) |
data-format-bytes |
Enable human-readable byte formatting (VB enhancement) |
data-currency |
Currency code for data-format-number="currency" |
data-locale |
Override locale for this element |
data-effect="ticker" |
Enable animated count-up effect (VB enhancement). Configure via CSS: --vb-ticker-duration, --vb-ticker-start, --vb-ticker-decimals |
data-trigger="scroll" |
Start ticker on scroll into view (VB enhancement) |
Accessibility
- Screen readers read the visible content, not the
valueattribute - The
valueis intended for machine processing - The no-JS fallback text ensures content is readable even without JavaScript
- The ticker effect uses
data-trigger="scroll"(IntersectionObserver), not auto-play
Related
<time>— For dates and times (also has VB format utilities viadata-format-date)<meter>— For scalar measurements within a known range<progress>— For progress toward completion<code>— For code content (both usevar(--font-mono))- Internationalization — Locale resolution for number formatting