How To Reverse Footer Section in Mobile Arabic Pages ?

[jair9686605]

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.?

[Raja_Reddy]

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:

<footer dir="ltr">
<!-- English footer content -->
</footer>

<footer dir="rtl">
<!-- Arabic footer content -->
</footer>

[jair9686605]

@Raja_Reddy  Thanks for the reply Raja.

Footer is not a custom component, we have created footer with core components only. So there is no HTML for this footer xf.

In page component already "rtl" has been added.

[jair9686605 · Accepted solution]

Thanks.

We have fixed the issue by creating custom component.