studio: RTL

[peterpeterparker]

RTL need to be implemented and supported in the editor and it seems that it isn't yet the case

also seems that something is happening and is breaking the color of the color picker if switching to RTL an element

@abennouna analyzed the problem and was able to provide some screenshots and videos. he also notably noticed that setting to RTL will not toggle directly the element but rather include it in a sub-element, content editable is so much fun ;)

<h1 slot="title" contenteditable>
  <div style="direction: rtl;">
    <span style="font-size: 3em; caret-color: var(--ion-color-primary); color: var(--color); font-family: var(--ion-font-family,inherit);">بنية HTML الأساسية</span>
  </div>
</h1>

Screenshots:

Videos:
https://deckdeckgo.slack.com/files/UMUC8C0Q5/FMWAPRCDD/rtl_-_2_issues.mp4

[peterpeterparker]

The problem was related to the em font-size. When browsers transform the element to be RTL, they add a div and a span and clone the font-size on the resulting element which has for effect to oversize the text.

There were two fix possible, either "forcing" the font to inherit or replacing all em fonts to px fonts.

For the time being I rather liked to "force" the size for such special case are EM are best suited I think for different screen size