# Right to left
The viewer sits at the end of ``, outside your layout. When it opens, it copies the trigger's direction and the nearest `lang` onto itself, so a gallery inside `dir="rtl"` gets a right-to-left viewer even on a left-to-right page. There is no option to set.
#### React
`rtl.tsx`
```tsx
import { itemLabel } from "@ogdakke/fluidbox";
import { Fluidbox } from "@ogdakke/fluidbox/react";
import "@ogdakke/fluidbox/filmstrip.css";
import { arabic, photos } from "./data";
export function Rtl() {
return (
// The viewer takes dir and lang from the trigger's surroundings.
{photos.map((photo) => (
))}
);
}
```
#### Vue
`Rtl.vue`
```vue
```
#### Solid
`rtl.tsx`
```tsx
import { For } from "solid-js";
import { itemLabel } from "@ogdakke/fluidbox";
import { Fluidbox } from "@ogdakke/fluidbox/solid";
import "@ogdakke/fluidbox/filmstrip.css";
import { arabic, photos } from "./data";
export function Rtl() {
return (
// The viewer takes dir and lang from the trigger's surroundings.
```
`rtl.ts`
```ts
import "@ogdakke/fluidbox/filmstrip.css";
import { arabic } from "./data";
export function rtl(root: HTMLElement) {
root.querySelector("fluidbox-gallery")!.labels = arabic;
}
```
#### JavaScript
`rtl.ts`
```ts
import { createFluidbox, itemLabel } from "@ogdakke/fluidbox";
import "@ogdakke/fluidbox/filmstrip";
import "@ogdakke/fluidbox/filmstrip.css";
import { arabic, photos } from "./data";
export function mountRtl(root: HTMLElement) {
const fluidbox = createFluidbox({ items: photos, labels: arabic, filmstrip: true });
// The viewer takes dir and lang from the trigger's surroundings.
const section = Object.assign(document.createElement("div"), { dir: "rtl", lang: "ar" });
const grid = document.createElement("div");
grid.className = "pattern-grid";
photos.forEach((photo, index) => {
const button = document.createElement("button");
button.type = "button";
button.className = "pattern-thumb";
button.append(Object.assign(new Image(), { src: photo.src, alt: itemLabel(photo) }));
grid.append(button);
fluidbox.bind(button, index);
});
section.append(grid);
root.append(section);
return () => {
fluidbox.destroy();
section.remove();
};
}
```
- Forward is to the left. ArrowLeft and a swipe to the left go to the next item, Next sits on the left, and Close takes the top-left corner. The filmstrip starts on the right.
- `labels` translates every word the viewer shows or announces. The example's `arabic` labels are in [the example data](https://fluidbox.dwe.workers.dev/docs/patterns.md#the-example-data). `position` is a function, so it can format numbers for the language.
- `lang` on the viewer makes a screen reader read the labels in that language.
- [Languages and direction](https://fluidbox.dwe.workers.dev/docs/languages.md) covers what flips, what doesn't, and wiring labels to an i18n library.
