Temporary fixed in trunk and the 0.0.9 branch by forcing direction to ltr and using line-height. Will be available in 0.0.9-2 after few other bugs are fixed.

Postponing the rest of the fix, until I figure out how to implement support for translations for RTL languages.

The interface looks awful with languages that are written from right to left and the website had enabled RTL with CSS or HTML tag attribute.

The main problem is caused by CSS rule:

text-indent: -3000px !important;

or similar.

One way to fix this issue, is to force the direction to LTR of the main div element of Linterna Mágica. Either trough HTML tag or CSS.

.linterna-magica {
   direction: ltr !important;
}

This will break future translations for languages written in RTL.

A better fix is to set a direction property for each JavaScript language object with translated strings in src/lm_localisation.js. Then every parent HTML tag of translatable string, should have direction attribute/style. This will require a rewrite of all the calls to the _() function.

Third possible fix would be to set the direction CSS rule for every language. This requires rewrite of the localisation code. It needs to be split anyway. Languages should be exported as separate userscripts depending on Linterna Mágica.

The test in YouTube with RTL language showed that the time-line slider is moving from right to left as well with RTL. The calculations in JavaScript are made from left to right, so with RTL the knob moves not as expected.

A test with Totem and RTL locale showed that the movement for the time-line should be from right to left.