Direction (RTL)

The platform renders your generator in a document whose dir follows the user's locale, and several supported locales read right to left. Mirroring is not optional, and there is no second stylesheet: the layout has to flip itself.

Written the modern way this is nearly free. Every one-sided value uses a logical property — margin-inline-start, padding-inline-end, inset-inline-start, text-align: start; symmetric shorthands need no attention; flex and grid mirror themselves, and adding flex-row-reverse for RTL flips a layout that had already flipped.

Canvas content is never mirrored. Lock the layer that holds the artboard to direction: ltr; the logical properties inside always resolve to the left, so the artboard's orientation and the exported file's are independent of the interface around them. The lock stops at the artboard: the overlays on the canvas are interface, not artifact, so they mirror with everything else — in RTL the zoom cluster and the Tips capsule belong on the mirrored side. Locking the whole canvas region would strand a right-to-left reader's controls on the wrong edge.

What changes, item by item

• The slider's webkit fill uses linear-gradient(to right …) and needs to left in RTL.
• The drag-to-change direction inverts: dragging toward the start edge increases the value.
• A dropdown positioned by JS aligns to the trigger's end edge rather than copying left.
• Do not centre a floating hint with inset-inline-start: 50% plus translateX(-50%); use inset-inline: 0; margin-inline: auto.
• The progress bar's transform-origin switches sides.
• The switch knob starts from inset-inline-start but travels with translateX(16px); transform is physical, so RTL needs -16px.
• A number and its unit read as one run. In an RTL paragraph direction "6 mm" reorders to "mm 6". A numeric field is safe — its unit is a separate element pinned to the end — but a readout that concatenates them, like the value beside a slider, takes unicode-bidi: plaintext. Any transform that means "move forward" has to decide its own direction.

Set dir="rtl" and walk the whole flow before submitting.