RTL support feature

[HosseinEnsafi]

The NextStep currently lacks native support for right-to-left language direction, such as Farsi and Arabic.

A critical UI issue has been identified concerning the step card and pointer selector element. While the element functions correctly near the center of the viewport, it fails to render properly when targeting elements near the viewport's edges.

In these edge-case scenarios, the step card is truncated and becomes fully invisible. This is accompanied by an incorrect calculation of the translateX property, which applies a large value like -800px 🤯 .

I respectfully request that this feature be assigned a high priority.

[enszrlu]

@HosseinEnsafi can you please add screenshots? Does not it work by putting appropriate "side" property to step?

[HosseinEnsafi]

Thank You for responding.

related codes are stored in company's computer, i would attach them soon.

and about side, I also changed the side but it was not the solution, nothing changed.
I don't know if supporting RTL was in mind at first or not but I think that all problems comes from miscalculation of the step card placement, I red all issues related to step card cutting off the page and most of them resolved by changing side or slightly changing style but this one comes from wrong library inline styles.

[HosseinEnsafi]

I FOUND THE PROBLEM

the problem comes from the way you find origins of element. in core NextStepReact.tsx components there is somewhere you calculate where the pointer element is actually in via getBoundingClientRect() browser API. it calculates x as distance from the left side.

 const [pointerPosition, setPointerPosition] = useState<{
    x: number;
    y: number;
    width: number;
    height: number;
  } | null>(null);

  const getElementPosition = (element: Element) => {
    const elementRect = element.getBoundingClientRect();

    // Default viewport is the body
    let viewport: Element | null = window.document.body;
    let viewPortRect: DOMRect | null = window.document.body.getBoundingClientRect();

    if (currentTourSteps && currentStep !== undefined) {
      const step = currentTourSteps[currentStep];
      if (step.viewportID) {
        // If the step has a viewportID, use the wrapper as the viewport
        const tempViewport = document.querySelector(`#${step.viewportID}`);
        if (tempViewport) {
          viewport = tempViewport;
          viewPortRect = viewport.getBoundingClientRect();
        }
      }
    }

later you use that x value in motion to space component in horizontal line and it works in left-to-right direction perfectly.

but in RTL scenario, motion suppose the x is determine as if vertical has started from right side. so the space that should be given from right side is being evaluated as distance of component from the left.

[SepantaJoshani]

Hey man @HosseinEnsafi 👋
I was messing around with this issue in one of my projects, and this workaround did the trick for me.
Hope it helps you too ❤️ (kheili mokhlesim 😂)

/* -------------------------------- */
/* RTL Support for NextStep Tour    */
/* -------------------------------- */
/* NextStep doesn't support RTL natively (see: https://github.com/enszrlu/NextStep/issues/64)
   These rules fix the positioning for RTL layouts when using bottom-left/bottom-right */

/* Force LTR layout on the tour overlay to fix positioning calculations */
[data-name="nextstep-overlay"],
[data-name="nextstep-pointer"] {
    direction: ltr !important;
}

/* Restore RTL direction for the card content so text displays correctly */
[data-name="nextstep-card"] {
    direction: rtl !important;
}

/* In LTR mode, ensure card direction is LTR */
:root:not([dir="rtl"]) [data-name="nextstep-card"],
html:not([dir="rtl"]) [data-name="nextstep-card"] {
    direction: ltr !important;
}