Icon-back is not reversed in rtl

Questions
1

I made an app that could be used in several languages.
I used the following lines to change dir in HTML document as documentation says:

let dir = i18next.dir();
document.documentElement.dir = dir;
$f7.rtl = (dir==='rtl');

But the icon-back. < is not reversed in rtl

I created a short video to explain the issue

You can see the app (in beta state) in https://ewojis.com/app in case you need to test something.

I use CSS :dir(rtl) instead .rtl to expand the width of expandable cards to have the title right aligned in rtl.

Best regards
Carlos

2

Switching to RTL requires different CSS stylesheet RTL Layout | Framework7 Documentation

1 Like
3

Vladimir, thank you for your quick answer.

I misunderstood that framework7-bundle.css contained LTR and RTL

Following your comment I added a line in the app.

I am using webpack. So I will copy my modification from your initial answer.

// Import F7 Styles
import 'framework7/framework7-bundle.css';
import '../css/framework7-bundle-rtl.min.css'; // **** added this line ****
// Import Icons and App Custom Styles
import '../css/app.css';

If I use that line I can only have RTL. Do you mean that RTL and LTR are not exchangeable on real time? In my case that everything is bundled ?

Suggestion: Could be possible in a future use the css :dir[rtl] to make a bundle that includes RTL and LTR versions?
In case that there is not option to have RTL and LTR at same time I could try that approach by myself and share with you the results.

Best regards
Carlos

4

Yes, they can’t work together. But it is possible to switch them dynamically, there are few technics. For example here are few examples gulp - How to switch css file when using Webpack to load css? - Stack Overflow

1 Like
5

Hi Vladimir
Thank you very much to point me to the dinamically switch of webpack modules. I didn’t know about it. After several tries I were able to load dinamically the framework7-bundle-rtl.min.css but I didn’t achieve the removal of the previous one.

So finally I decided to follow a different approach. I added this code in my app.less than only changes the icon based on :dir(rtl) or :dir(ltr). I though you should consider use that native css selector instead to have .rtl and .ltr classes.

	:dir(ltr) {
		.icon-back, .icon-prev {
			&:after {
				content: 'chevron_left_ios';
		  	}
		}
		.icon-forward, .icon-next {
		  	&:after {
				content: 'chevron_right_ios';
		  	}
		}
	}
	:dir(rtl) {
		.icon-back, .icon-prev {
		  	&:after {
				content: 'chevron_right_ios';
		  	}
		}
		.icon-forward, .icon-next {
		  	&:after {
				content: 'chevron_left_ios';
		  	}
		}
	}

In my case is lighter than swap 2 bundles of 515Kb

I write this in case that could be useful for other members of the forum

Thank you very much for your help. You are the best.

Best regards
Carlos