search

ibm-js / delite

HTML Custom Element / Widget infrastructure
http://ibm-js.github.io/delite/
Other
68 stars 28 forks source link

Explicit setting of attribute 'dir' #362

Closed semion1956 closed 9 years ago

semion1956 commented 9 years ago

GUI direction of widgets without explicitly defined attribute dir depends on the direction of the enclosing elements. However, rtl-specific styles are defined for widgets having attribute dir=='rtl' or having specific class, which is toggled, when value of dir is changed. As result widget, added into rtl container is mirrored, but some of its styles are wrong. We can avoid this problem by explicit setting attribute dir when widget is attached to the document.

wkeese commented 9 years ago

widget, added into rtl container is mirrored, but some of its styles are wrong

Shouldn't the widget be using isLeftToRight()? If the widget is designed correctly, I don't understand when this problem would happen. Can you give a small example?

semion1956 commented 9 years ago

Place Switch into rtl page or div. It is mirrored - part "ON" from the right and part "OFF" from the left, but wrongly colored - part "ON" is gray and part "OFF" is green. CSS rules check d-rtl class or [dir=='rtl'] attribute. BTW, isLeftToRight() checks attribute (of widget, body or html) only.

wkeese commented 9 years ago

I see, I didn't realise this was a CSS issue, but I see the rules you are talking about, things like:

.d-switch.d-rtl .d-switch-leading,
.d-switch[dir="rtl"] .d-switch-leading {
  background: #eeeeee;
  font-weight: bold;
  color: #555555;
}

And the problem you described shows with http://localhost/deliteful/tests/functional/Switch.html?dir=rtl (URL may vary by machine).

However, the problem is not with delite, but rather with Switch. It should be using d-rtl, not dir=rtl. Delite sets the d-rtl class on widgets which are in RTL mode. So please file a ticket against deliteful.

BTW, you've labeled this ticket as "explicit setting of dir attribute" but I think what you really mean is "implicit" or "automatic". In other words, you want delite to set the dir attribute if the user hasn't set it. That doesn't seem right, because it gives the false impression that the app explicitly set dir. That's why we have the d-rtl class instead.

As a side note, I think the CSS for Switch is designed poorly for RTL mode, and I filed ibm-js/deliteful#454 about it.