Define RTL Strategy - Githubissues

liferay / clay

A web implementation of the Lexicon Experience Language

http://clayui.com

Other

206 stars 470 forks source link

Define RTL Strategy #3073

Open jbalsas opened 4 years ago

jbalsas commented 4 years ago

First brought to our attention with Date picker calendar position fixed on the right end of the page when using dir="rtl" in the liferay-portal and @clayui/css Date Picker RTL icons are backwards

We should come up with a proper RTL strategy to account for Clay in RTL environments both in and out of DXP that takes into account:

Positional CSS values
Directional Icons
Mixed content (rtl within ltr and viceversa)

pat270 commented 4 years ago

Here is the list of Lexicon icons that should be flipped in RTL: align-image-left align-image-right align-left align-right angle-left angle-right arrow-end arrow-start breadcrumb caret-left-l caret-left caret-right-l caret-right indent-less indent-more list-ol list-ul list order-arrow-left order-arrow-right video ? not sure if play triangle is supposed to be flipped

jbalsas commented 4 years ago

I think the easiest way might be to generate an additional icons.svg spritemap that swaps the symbol names.

Some are probably not necessary like align-image-left since they represent an action and the code might do exactly that... but won't hurt double-checking..