CSS Obfuscation Lab / Experiment 01

Reordered product price

A tiny, self-contained example of CSS-based text obfuscation. The rendered price looks normal, but its characters appear in a different order in the HTML.

Demo coffee grinder

Fictional product · no actual purchase available

Price

.99$49

CSS reordering is ON.

What JavaScript extracts

These values are read directly from the price element above. They update when you reload the page; the toggle changes only CSS, never the DOM.

element.textContent

element.innerText

Actual price markup

<div class="price is-obfuscated"><span class="price__cents">.99</span><span class="price__dollars">$49</span></div>

CSS gives the dollar amount order: 1 and the cents order: 2, reversing how they appear on screen.

Accessibility warning: This is an intentionally problematic pattern. Screen readers generally follow the DOM reading order, not the visual CSS order, so this price may be announced incorrectly. The expected visual price is $49.99. Do not use this pattern for real product prices.