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


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

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

Add a New Comment (Rich Markup)

You are not logged in

Please log in, so followups can be emailed to you.


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>
Project AdministratorIn charge of this item.
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>
Project AdministratorIn charge of this item.
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>
Project 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>
Project AdministratorIn charge of this item.


(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)

    Do you think this task is very important?
    If so, you can add your encouragement to it.
    This task has 0 encouragements so far.

    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.7