Working with Arabic and RTL in Wappler

@mrbdrm where were you when we presented Wappler in Dubai at the STEP conference and everybody was asking “Is it also available in Arabian”, “how well this it handle RTL” :slight_smile:

Nice iPhone video btw :slight_smile:

@George thanks
wappler is excellent so far with RTL and Arabic

1 Like

Maybe you should make a video about that in Arabic - to bring the message more clear.

I never done a video to explaining anything and don’t think I’m the right guy to do so.
but I’m here to help anyone on this matter :slightly_smiling_face:

and to be honest any simple test will show you that wappler does support UTF-8

Yes indeed - RTL is so easy to do. We were just so surprised to get such basic questions specially from the local Microsoft dev relations representative… and he really wanted to see if you can type Arabic in Wappler …

if anyone ask in the future just show them the video i posted.
it shows Arabic and right alignment of text in the table working just fine and right header menu button too.

1 Like

I didn’t take much notice of this thread when it appeared, but as it happens I need to do a small site in Arabic using RTL. From what @mrbdrm and @George have mentioned above, it shouldn’t be a problem.

I see there are quite a few RTL versions of Bootstrap, but not an official one yet. Is it best to use one of these or could I just use the standard version and, using ‘direction’. So far, I haven’t had much success. Putting dir="rtl" in the <html> tag reverses the navbar but I can’t get the text to display RTL in paragraphs using classes or style tags. If I comment out bootstrap.css, it’s not a problem.

I have no experience of this at all and would be grateful for some tips.

1 Like

Well @mrbdrm is the expert here :slight_smile:

Thanks George.

I’ve just discovered that dir="rtl" in the <html> tag also works for tables, but not other divs or paragraphs. Some progress anyway.
(PS - no it doesn’t. It just swaps the order of the columns - the text is still LTR :confused: )

I didn’t touch the bootstrap files
Select the app node in the app structure and set the dir to rtl from the dom.
Then just set the alignment of the form labels.
Thats it.

I did some chanes to the navbar but its all right alignment stuff on elements.

1 Like

Great - well that’s a bit easier than I thought. Thanks.

Apart from displaying correctly, does this work for entering data as would be expected (if you type RTL). As you can tell, I don’t know much about this and was probably ‘over-thinking’ it.

Yes and that’s the great part. you don’t have to change or set anything for data entry
RTL in input fields works as expected styling and data wise

Thanks again - that’s very reassuring. I was feeling slightly out of my depth, particularly as I can’t read a word of what I’m putting on menus etc. and the customer’s unnecessarily complicated Drupal site has suddenly has had to be taken off-line.

No problem
if you have any question i will assist you with what i can

Have you managed to create a search feature with Arabic and Wappler, where diacritics are ignored?

This works up to a point (it doesn’t works with ‘LIKE’), but I don’t know if it’s possible to specify the collation for example in Wappler.

SET NAMES 'utf8' ;
SELECT 'بِسْمِ' = 'بسم' COLLATE utf8_unicode_ci ;

isn’t this Mysql issue? did you try to set the collation to utf8_unicode_ci?

i never need that type of search so i don’t have much to help with that subject im afraid :sweat_smile:

I think it is a MySQL issue (or at least that’s one of the possible solution I’ve come across). At least the little test I referred to works. I did set the collation to utf8_unicode_ci but the example I came across suggested it should be included in the query too (but I don’t think you can do this in Wappler).

Anyway, I’ll persevere. Thanks again.