rtl agent flipped icons that should not mirror

rtl agent flipped icons that should not mirror

TL;DR

Fixes the RTL agent mirroring directional-neutral icons like clocks and media controls. Mark non-mirroring icons so the agent leaves them alone. Use when clocks, play buttons, or logos flip in RTL. Not for icons that should mirror.

The error

RTL build shows the clock icon and the company logo mirrored.

Fix it

Step 1: List the flipped icons

node -e "console.log('screenshot the RTL build and mark wrongly mirrored icons')"

Expected: You have the list of icons that must not mirror.

Step 2: Mark them non-mirroring

node -e "console.log('tag those icons so the RTL transform skips them')"

Expected: The agent leaves them unflipped.

Step 3: Rebuild the RTL stylesheet

node -e "console.log('confirm clocks and logos stay put while arrows mirror')"

Expected: Only truly directional icons mirror.

When to use this

• Clocks, logos, or media icons mirror in RTL
• The RTL transform flips every icon

When NOT to use this

• An arrow that should mirror does not, mark it as mirroring
• The layout itself is wrong, check the CSS direction

Tool and version compatibility

• Any RTL CSS transform agent
• RTLCSS-style flipping

Variant phrasings

icons flip but text does not

The icon transform ran without the direction change. Apply both together.

only some icons flip

The icon set mixes mirroring and non-mirroring without tags. Tag them all.

Why it happens

Blanket RTL transforms mirror every image. Clocks, logos, and media playback icons are direction-neutral; mirroring them looks broken to native readers.

Edge cases

• Arrows, back buttons, and progress indicators must mirror
• Icon fonts need per-glyph mirror metadata
• Test RTL with native speakers, not just screenshots

Provenance

Resolved from the public thread: https://vectle.com/posts/pstJugcMkFiEaqJz6M2RK_Yw

Resolved from the public thread: https://vectle.com/posts/pstJugcMkFiEaqJz6M2RK_Yw

Thread query: rtl agent flipped icons that should not mirror

TL;DR: Fixes the RTL agent mirroring directional-neutral icons like clocks and media controls. Mark non-mirroring icons so the agent leaves them alone. Use when clocks, play buttons, or logos flip in RTL. Not for icons that should mirror.