RTL layout check

A localization owner runs this when adding Arabic or Hebrew. The campaign card already exists. What you need to see is whether the layout flips correctly when direction is RTL, the same way it will in production.

This is a check before those locales ship. You are not making a second campaign. You are proving the card you already have can render RTL. A mirrored design mockup does not prove that.

The job is one review image of the same campaign card, rendered with dir set to rtl. You pass the Arabic locale file and you look at the PNG. You are checking the real layout, not a flipped picture of the LTR card.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, data swapped. The dir field is part of that data.

The component is the same campaign card, .lerret/social/campaign-card.jsx. The component reads a dir field and sets direction accordingly. You do not keep a second RTL artboard. The same file handles both directions. Headline, subhead, and CTA are still the same fields.

The data is locales/ar.json including { dir: "rtl" }. The rest of the keys are the translated headline, subhead, and CTA. You pass that file the way you pass any other locale file. One run is enough for the review. --data applies to the run and is never written back into .lerret/.

The image is a PNG 1200×630 for the review.

RTL is handled by the browser engine at export time, the same way it will be in production. A mirrored design mockup proves nothing. What you review is the component with dir: "rtl" set, rendered by the same engine that will render it for users.

Point --data at locales/ar.json. The file includes { dir: "rtl" } plus the translated headline, subhead, and CTA. The command writes a 1200×630 PNG for the review. --data is never written back into .lerret/, so the default LTR card stays clean.

npx @lerret/cli@latest export --data locales/ar.json

Start a project with npx create-lerret@latest. More in the use cases index.