Rendering issues with RTL in Gmail on Android devices

[malsomnus]

trafficstars

This issue seems to be new, and may well be Google's fault. Apparently emails that are set as RTL are shown in the wrong size. I don't know whether it's the "correct" size which fails to get scaled down like it always does, or whether it's scaled up for some reason, but the content is stretched beyond the screen's width and cannot be scrolled to. This doesn't happen on PCs or iPhones, and happens only when the direction is RTL.

You can see it happening with this basic code:

<Table style={{width: '600px', height: '50px', background: '#CCC', 'text-align': 'center'}}>
    <TBody><TR><TD style={{width:'600px'}}>Hello</TD></TR></TBody>
</Table>

If Oy is rendered with dir: LTR then everything is fine, but with dir: RTL the whole thing is scaled up, and the centered text can be seen close to the edge. (You can tell it's not an issue with the text's position because the grey background goes all the way to the screen's edge and beyond, instead of the whole thing having a margin like it usually does)

[revivek]

Thanks for reporting. I tried reproducing the problem with my Android device, using lang: 'rtr', though have been unable to. Could you share a screenshot?

[malsomnus]

Here is a minimal example. This is what it looks like - as you can see, there's no margin on the left. I think the reason what you wrote didn't reproduce the bug is that you accidentally wrote 'rtr' instead of 'rtl', and also it should be 'direction' instead of 'lang'?

[revivek]

Thanks for catching my miswriting previously. I had meant to say dir="rtl". It turns out I didn't set the proper rtl CSS "direction" on body, however, which may have had something to do with my inability to reproduce the bug. I'll try again with both dir="rtl" and "direction: rtl".