bugLinterna Mágica - Bugs: bug #32740, The interface looks awful with...


bug #32740: The interface looks awful with languages written from right to left.

Submitter:  Ivaylo Valkov <valkov>
Submitted:  Thu 10 Mar 2011 06:32:27 PM UTC
Category:  Interface bug Severity:  3 - Normal
Item Group:  None Status:  Fixed
Privacy:  Public Assigned to:  valkov
Open/Closed:  Closed Release:  git-master
* Mandatory Fields

Add a New Comment Rich Markup

Wed 06 Apr 2011 12:08:10 PM UTC, comment #3: 

Fixed in revision 34. Implemented by splitting translations and adding direction for each. See also Task #11056.

Ivaylo Valkov <valkov>
Group administrator
Sun 13 Mar 2011 11:25:31 AM UTC, comment #2: 

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.

Ivaylo Valkov <valkov>
Group administrator
Thu 10 Mar 2011 08:59:26 PM UTC, comment #1: 


line-height: 3000px !important;

instead of:

text-indent: -3000px !important;

Works fine.

Anton Katsarov <katsarov>
Group administrator
Thu 10 Mar 2011 06:32:27 PM UTC, original submission:  

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.

Ivaylo Valkov <valkov>
Group administrator


(Note: upload size limit is set to 16384 kB, after insertion of the required escape characters.)

Attach Files:

Attached Files
file #22882:  yt-rtl-bug-small.png added by valkov (263KiB - image/png - Demonstration of the bug)


Depends on the following items: None found

Items that depend on this one: None found


Carbon-Copy List
  • -email is unavailable- added by katsarov (Posted a comment)
  • -email is unavailable- added by valkov (Submitted the item)

    There are 0 votes so far. Votes easily highlight which items people would like to see resolved in priority, independently of the priority of the item set by tracker managers.

    Only logged-in users can vote.


    Follow 8 latest changes.

    Date Changed by Updated Field Previous Value => Replaced by
    2011-04-06 valkov Open/ClosedOpen Closed
    2011-04-06 valkov StatusPostponed Fixed
    2011-03-13 valkov Severity4 - Important 3 - Normal
        StatusIn Progress Postponed
        ReleaseNone git-master
    2011-03-12 valkov StatusConfirmed In Progress
    2011-03-10 valkov CategoryNone Interface bug
    2011-03-10 valkov Attached File- Added yt-rtl-bug-small.png, #22882

    Back to the top

    Powered by Savane 3.13-4b48.
    Corresponding source code