RTL is not direction: rtl

Turning a site into Hebrew takes one line. What takes time is everything after it: the spacing left on the wrong side, the arrow pointing the wrong way, the carousel travelling in the wrong direction, and the phone number reversed entirely.

None of these is an exotic bug. They are the same four or five failures, on every Hebrew site, and all of them are predictable.

Logical properties instead of physical ones

This is the one rule that, if you hold to it, prevents most of the problems. "Left" and "right" are physical positions; what you want is "start" and "end", which flip along with the language.

Spacing defined on the start side sits on the right in Hebrew and the left in English, without anyone writing a condition. Spacing defined as "left" stays on the left forever and looks broken in one of the two languages. The same goes for text alignment, padding and absolute positioning.

Arrows are the case needing special handling: an icon pointing "forward" has to flip in Hebrew, and that is flipping the icon itself, not its position.

Third-party components do not flip themselves

This is where it genuinely breaks. This site has a logo carousel we brought in from outside, and it computes its motion from spacing on one side plus a pixel offset. In Hebrew that arithmetic produces the wrong answer — the carousel stutters or travels the wrong way.

The fix was not to correct the arithmetic. The fix was to pin that one component to left-to-right inside an otherwise right-to-left page, and to write down why. A component that computes its own positioning is not a component that flips with a setting.

There is a quieter trap alongside it: a tool that generates components for you does not necessarily generate logical ones. In this project that tool's configuration explicitly says it is not in RTL mode, so every component it produces arrives with physical properties and needs checking by hand. That is not a bug — it is something you have to know.

What should stay left-to-right

The opposite mistake is just as common: flipping everything. Some things take their direction from the content rather than the language, and they should stay left-to-right even on a Hebrew page:

• Phone numbers and email addresses: reversing them changes what they say.
• Technology names and code.
• A browser window mockup, where the address bar is always on the left.
• Every row of the language switcher, so each language reads the way it is written.

In each of those the direction is set explicitly on the element rather than inherited from the page. That is deliberate and documented, or somebody will "fix" it later.

Flags are not languages

The language switcher is where two problems meet. First: flag emoji do not work. On Windows a flag emoji renders as two letters, "IL" or "GB", rather than a flag. So the flags on this site are local SVG files, not emoji.

Second: a flag is not a sign for a language at all. It is a sign for a country, and the relationship between the two is not one to one. So the flag here is marked decorative, and the meaning is carried by the language code and the language's own name.

How to check it actually works

Not by looking. Walk the page in both languages and compare: what moved to the wrong side, which icon points the wrong way, which number reversed. Then walk it with the keyboard in both languages — focus order is where broken RTL shows up even when the page looks fine.

Accessibility is the other side of the same work — what we built to meet Israeli Standard 5568.

A Hebrew site built right-to-left from the first day