Posts Card: RTL alignment and mixed alignment

[thehenrybyrd]

Expected behavior

I expected posts to be aligned based on their content language.

Actual behavior

Instead, posts are aligned based on the app selected language.

Steps to reproduce the behavior

1. Prepare at least one Arabic and at least one English draft post. (Or, one RTL and one LTR)
2. From Me > App Settings, set your language to a LTR language like English.
3. In My Site, looking at the Drafts Card, notice that your RTL post doesn't look fully right-aligned.
4. From Me > App Settings, set your language to a RTL language like Arabic.
5. In My Site, looking at the Drafts Card, notice that your LTR post doesn't look fully left-aligned.

Screenshots

Left: English is App language. Right: Arabic is App language.

For comparison, here's how those posts are displayed in the Posts List. Left: English is App language. Right: Arabic is App language.

Tested on Nokia 2, Android 11, WPAndroid 19.0

cc: @ParaskP7 something for the My Site Dashboard team to consider!

[AjeshRPai]

Hey @thehenrybyrd,

To be clear, In the issue, you have pointed out that items on the Drafts card are not displayed correctly. When the App language is RTL(Arabic), the LTR language(English) content should be aligned from LTR, And when the App language is LTR, the RTL language should be aligned from RTL.

In android, we usually support the RTL in the way shown in the drafts card. This seems to be the correct way per the material design guidelines. The LTR languages on RTL are aligned to the Right when the system/app language is RTL. Please correct me if I am wrong.

I tested a few apps and screens to confirm my understanding. Please find some screenshots of the apps/pages I tried in the RTL language.

Gmail App in RTL(Arabic)	Youtube (RTL)

Sample screenshot of the site picker page we have in the WordPress android app

---

Here in the posts list, it looks the RTL support is not implemented, and that's why the RTL content is Right-aligned even if the language is LTR or RTL. I can take up this issue and try to fix this.

[AjeshRPai]

Also, the drafts card is not showing the post content properly when in RTL mode. The post content is truncated from the start. Post content in RTL starts with eah that sounds good instead of yeah that sounds good. I will take this up as a separate issue as well and try to fix it.

@thehenrybyrd WDYT?

[thehenrybyrd]

When the App language is RTL(Arabic), the LTR language(English) content should be aligned from LTR, And when the App language is LTR, the RTL language should be aligned from RTL.

This is really more about the individual blocks of content than it is about the Site Language or even App/Device Language. Right now, we have the correct directionality in the Drafts Block. That is, content which is written in an RTL language is displayed from right to left - all the letters are in the correct order. However, we don't have the correct alignment, because the alignment should be set based on the language in the content, rather than the defined Site Language or App/Device Language.

As the Material Design guidelines state:

An RTL layout is the mirror image of an LTR layout, and it affects layout, text, and graphics.

In our case, we have nested layouts which should react differently to the content within them. (The individual Posts inside the Drafts Card) What I mean is, in an LTR context, the layout needs to be flipped for a block of content written in an RTL language. And it means that within an RTL context (such as when the Device is in Arabic), the layout needs to be flipped for a block of content written in an LTR language.

I think the Posts List shows an excellent implementation, with each content block aligned according to its language. Note how, no matter which language my App is set to, the Arabic starts on the right side (right aligned) and the English starts on the left side (left aligned). This is according to the expectations of readers of each language.

[thehenrybyrd]

The post content is truncated from the start. Post content in RTL starts with eah that sounds good instead of yeah that sounds good. I will take this up as a separate issue as well and try to fix it.

I did notice this as well, but assumed it had to do with the misalignment cutting off some of the text. Actually, I notice the same is happening with the RTL content - the first word in that Arabic post (furthest right) is cut off in the LTR (English) context. If it is not fixed by changing the alignment, this would be great to address in a second issue!

Here in the posts list, it looks the RTL support is not implemented, and that's why the RTL content is Right-aligned even if the language is LTR or RTL.

Regarding the Posts List, it would be good to test with some site titles in an RTL language such as Arabic or Hebrew. It does look like RTL support is implemented to some degree, in as much as the icons for each site appear on the right instead of the left.