How To Reverse Footer Section in Mobile Arabic Pages ?

Question

I have implemented footer using core components and imposed that experience fragment in template to visualize the footer section with respect to the language pages.

Currently using service pack 20.
1. Created experience fragment footer:

looks like this for en: myApp/language-Masters/en/site/footer/master.html

looks like this for ar: myApp/language-Masters/ar/site/footer/master.html

2. Used this en-XF in template while creating page for english the english footer will be dispalyed.

3. For Arabic pages arabic will be displaying.

Issue: English footer is displaying correct order in english pages and in arabic footer is arabic footer displaying but in mobile view the footer is displaying in reverse. Attached screenshots PFA.

Desktop: 4 3 2 1

Mobile:

the social icons should go bottom

Client is not agreed for reversing with hack code CSS.
can we achieve this by using default AEM features, any pointers or suggestions.?

jair9686605 · Accepted Answer

Thanks.We have fixed the issue by creating custom component.

Raja_Reddy · Answer

Hi @jair9686605

Yes, this issue can be resolved by using the default AEM features. You can use the "dir" attribute in the HTML tag to specify the direction of the text.

For example, in the HTML tag of your footer, you can add the "dir" attribute with the value "ltr" for English and "rtl" for Arabic. This will ensure that the text is displayed in the correct order for both languages, regardless of the device or screen size
how you can add the "dir" attribute to your HTML tag:

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded