Web Player Localization - Right-to-left languages support

[axraph]

We're working on a project and we're building the website on WordPress, utilizing Podlove Publisher and Web Player plugins.

The website and the podcast language is Arabic, which is a right-to-left direction.

We're currently working on translating the UI of the web player "apps/player/lang/en.json" and its subscription button "apps/subscribe-button/lang/en.ts". And will add them when done to include on next update.

As for the direction, we'll have to do many CSS changes to "flip" the player, including actually flipping the progress bar with transform: scaleX(-1), which is a hack and not really an ideal way to support the direction change.

I was wondering, would you be interested in doing the RTL support properly? I can share the CSS overrides as a starting point for this.

[alexander-heimbuch]

Hey,
that sounds very exciting. The next Web Player iteration supports Tailwind 3+ and RTL modifiers (https://tailwindcss.com/blog/tailwindcss-v3#rtl-and-ltr-modifiers) So I would love to add support for this. Please share the CSS. I'm also interested in how the UI in general works, for example the ui component order for the play buttons.

[axraph]

Hi @alexander-heimbuch

I'm glad you're open to help on this. Much appreciated!

This is the player translation file ar.json, and this is the subscribe button translation file ar.ts.

As for the direction, I've made a couple of changes in the default HTML template, and added a few rules to the CSS style. I added comments where applicable.

I've also attached screenshots for your reference. Hope this helps! Let me know if there's anything missing or you need help with.

[alexander-heimbuch]

It might take a while for the implementation so just to align the expectations. Since I have zero experience with RTL interface designs is it possible that you help me with feedback/testing?

[axraph]

Yes, totally! I can also help with the HTML templates and any additional CSS that we might need. I'm not very familiar with tailwind but it's not that complex to get around.

[axraph]

Since I can do the direction stuff locally in the HTML templates and CSS, but can't really add the translation files, I was wondering if it's possible to split this into 2 -or more- milestones where we get to have the translation files included in the next version, and then the direction handling stuff later?

[alexander-heimbuch]

@axraph small first step :) #1164