Skip to Content
avatar image
Former Member

SAPUI5 - how to load separate RTL stylesheet?


If I check developer tools, we either download library.css or library-RTL.css for right-to-left (RTL) languages. I also tested out this openui5 plugin used to create a theme, and it took my css and created a normal css file and a mirrored RTL css file;

That's all great. Perfect. But the problem is that I'm not trying to create a theme. My problem is that we have a lot of custom controls and whatnot which has a lot of associated styles. We've written some code to take a css stylesheet and mirror it to give me the RTL version. But how do I apply it? I though if I put the css file in the manifest, then the SAPUI5 framework would automatically append "-RTL" and load the RTL version when such a language is set, ie same as what it's doing for the theme stylesheets. That doesn't however seem to be the case. Is there some config I can add to get this behaviour? It seems really strange that I can't do this since it's what is already being done for theming.

The current workaround we have is to NOT load the CSS files through the manifest and instead load them dynamically through javascript, ie something like this :

if (RTL) {
styleSheetPath = styleSheetPath + "-RTL.css" }
var link = '<link rel="stylesheet" type="text/css" href="' + styleSheetPath+ '">';

This is obviously a bit of a hack. What is the correct way to handle this? We don't want to have to manually maintain this by adding dir=rtl attributes in css, we just want to automatically create RTL versions of our stylesheets and _somehow_ apply them when using an RTL language (again, same as theming).

Thank you

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    May 16, 2017 at 12:01 AM

    Been a couple of months now with no replies. Is it just a hard question, or did I post it in the wrong spot?

    Add comment
    10|10000 characters needed characters exceeded