CSS Obfuscation Lab / Experiment 04

Bidirectional text override

The HTML stores a backwards price. Two CSS declarations reverse the visual order of its characters without changing the DOM. Compare what appears on screen with what JavaScript reads.

Demo wireless keyboard

Fictional product used to demonstrate CSS-only text obfuscation.

Displayed price

05.97$

Override is ON. The backwards DOM text is visually reversed.

Live extraction results

These values are read directly from the price element above. Disabling the CSS override changes the visible price, but does not change the text nodes.

textContent

innerText

Computed direction

Computed unicode-bidi

Actual HTML

<div class="price is-obfuscated">05.97$</div>

CSS doing the reversing

.price.is-obfuscated {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Key observation: Both textContent and innerText return the original DOM string, 05.97$, even though the browser paints the price as $79.50. Reading computed CSS properties reveals that a bidirectional override is active, but extracting the visual reading order requires additional logic.

Accessibility warning: CSS visual reordering does not rewrite DOM reading order. Screen readers and copy/paste may expose the backwards price. This is an intentionally adversarial demo, not a recommended way to display real prices.