RTL support should not be up for a vote...it's a must have feature IMHO

Ask for Help
1

I know that RTL support is up for a vote but really it should be built in…you’ve got the entire middle east and some of Africa using RTL:

“Despite it’s difficulty, making sure apps display correctly in RTL locales is an effort worth undertaking. Arabic is the 5th most used language in the world, with over 420 million speakers. There are also over 100 million speakers of Urdu, and over 9 million speakers of Hebrew. As designers and developers, we shouldn’t just leave hundreds of millions of users behind.”

Source: Don’t be backwards. A quick guide to making sure your app… | by Alan Sien Wei Hshieh | Prototypr

I just tried to create an app for my dad in Hebrew and didn’t get very far…the text is not showing properly even when I use the native Glide database, most of the features won’t allow to align the text to the right. I gave up on it for now…Glide is pretty much useless for RTL languages…based on my very short experimenting with it.

Thanks for your consideration… :grinning_face_with_smiling_eyes:

6 Likes
2

Yeah I know @Lin_Altshuler has been calling for this a lot in recent days… I hope you get support soon.

1 Like
3

Yes, that’s right.
I know @yinon_raviv and @Gideon_Lahav_Busines also build apps in Hebrew and would be thrilled like me to see this done.
For now we are using CSS to align components to the right with RTL and YC to format dates but still some things aren’t accessible like the sign-in screen or the hamburger menu, date pickers should be formatted by choice as well.
RTL is like driving on the left side of the road, its not just for text, all rules apply.
I really hope we will see this in Glide in the near future.

5 Likes
4

Hi @Lin_Altshuler

I found a way for the burger menu as well.

[data-test="glide-app-bar"] {text-align: center; direction:rtl; }

5

Please vote here and comment

@SuperMerabh
@Lin_Altshuler

6

That’s nice! but the menu still slides on the left :smirk:
I searched everywhere and didn’t find any spans divs or whatever to change the location of the menu…

7

My problem is not the burger placement…my problem is with the text not showing up properly because the database ASCII is not correct for Hebrew. The text that has punctuation is showing wrong, commas in the wrong place, etc. You can see in the image that the commas and dots are showing in the beginning of the line instead of the end of the previous line. Fixing this would just take forever, as there are many poems. If anyone has an idea, please do let me know! Shalom and Toda :grinning_face_with_smiling_eyes:

Screen Shot 2021-11-01 at 3.10.19 PM
Screen Shot 2021-11-01 at 3.10.19 PM746×1464 166 KB

8

It looks like it’s working find if I choose “action text” but not the other types of text. Just a tip for anyone trying to do this!

9

Where do you place this @Gideon_Lahav_Busines ?

1 Like
10

Add a Rich Text component and put this in

<p><style>
[data-test="app-text-box"],[data-test="app-text-field"],[class="labels"]
{
text-align: start;
direction:rtl;
}
</style></p>
1 Like
11

Thanks @Lin_Altshuler

12

Try this

Should turn any page to RTL (most of it)

<p><style>
[data-test="glide-app-bar"] 
{text-align: center;
direction:rtl; 
}
</style></p>

<p><style>
[data-test="app-text-box"] {
text-align: start;
direction:rtl;
}
</style></p>

<p><style>
[data-test="app-checkbox-list-item"] {
text-align: start;
direction:rtl;
}
</style></p>


<p><style>
[class="sc-jxTFzB ktDwEE"] {
text-align:right;
direction:ltr;
}
</style></p>

<p><style>
[class="legend-item"] {
text-align:right;
direction:ltr;
}
</style></p>


<p><style>
[class="sc-jLfdbx kUyBQb"] {
text-align: start;
direction:rtl;
}
</style></p>


<p><style>
[data-test="app-hint"] {
text-align: start;
direction:rtl;
}
</style></p>

<p><style>
[data-test="app-switch-view"] {
text-align: start;
direction:rtl !important;
}
</style></p>

<p><style>
[data-test="app-text-field"] {
text-align: right;
direction:rtl;
}
</style></p>

<p><style>
[data-test="app-picker-button"] {
text-align: right;
direction:rtl;
}
</style></p>

<p><style>
[data-test="app-switch-view"] {
text-align: right;
direction:rtl;
}
</style></p>

<p><style>
[data-test="list-item-title"] {
text-align: right;
direction:rtl;
}
</style></p>

<p><style>
[data-test="list-item"] {
text-align: right;
direction:rtl;
}
</style></p>

<p><style>
[class="sc-kNnYhR WdOSc"] {
text-align: right;
direction:rtl;
font-family: alef;
}
</style></p>

<p><style>
[data-test="app-inline-picker"] {
text-align: right;
direction:rtl;
}
</style></p>

<p><style>
[role="row"] {
text-align: right;
direction:rtl;
}
</style></p>

<p><style>
[class="sc-htmbXw fgLAlN"] {
text-align: right;
direction:rtl !important;
}
</style></p>

<p><style>
[data-test="app-vertical-list"] {
text-align: right;
direction:rtl !important;
}
</style></p>


<p><style>
[class="label"] {
text-align: right;
direction:rtl !important;
}
</style></p>

<p><style>
[class="tbs-inner"] {
text-align: right;
direction:rtl !IMPORTANT;
}
</style></p>```
2 Likes
13

Thanks @Gideon_Lahav_Busines , this is my first RTL app, so I have no idea what to do with the code? can you advise? :grinning:

14

You can put that in a rich text component to see if it works, on any details view.

1 Like
15

So adding a rich text with this code will change the entire page?

1 Like
16

Yes, I assume.

17

Yes, add it. and paste the CSS I made into it.

Also, it will be highly appreciated if you can mark my answer with the CSS as a “solution :white_check_mark:” if that is the case for you.

Gideon

18

@Gideon_Lahav_Busines it works with some things…the list now shows RTL but the title doesn’t…see attached.

Screen Shot 2021-11-06 at 1.32.59 PM
Screen Shot 2021-11-06 at 1.32.59 PM710×1480 131 KB

19

Screen Shot 2021-11-06 at 1.41.25 PM
Screen Shot 2021-11-06 at 1.41.25 PM716×1476 134 KB

The “back” button is also not showing properly…is there a Hebrew translation I can use?

1 Like
20

If your device is on Hebrew then it should show is as “חזרה”

2 Likes