[yew-devel] [RFC PATCH yew-widget-toolkit-assets] flip font-awesome icons for rtl text direction

[Shannon Sterz]

On Tue Sep 23, 2025 at 3:11 PM CEST, Dominik Csapak wrote:
> when using a language that sets the text direction to RTL, font-awesome
> icons that have left or right in the name are pointing in the wrong
> direction, so flip them.
>
> This happens for example in menus, back button of the material app,
> list tiles where icons like 'chevron-right' are used, etc.
>
> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
> sending as rfc because i'm not sure this is the right approach.
>
> alternatively we could create our own classes for every font-awesome
> class that ends with -left/-right and call them -start/-end and
> have only them flip in a rtl setting
>
> Advantage would be that users could still use the 'left' and 'right'
> variants if they need/want them.

i think i'd be in favor of this. there are already some approaches like
that out there [1]. it's clearer and sometime we may want an arrow to
always point left (or right) as pointed out by dietmar.

[1]: https://github.com/fisharebest/font-awesome-rtl/blob/master/font-awesome-rtl.css

>  scss/_miscellaneous.scss | 8 ++++++++
>  1 file changed, 8 insertions(+)
>
> diff --git a/scss/_miscellaneous.scss b/scss/_miscellaneous.scss
> index c0dfafe..05dfd61 100644
> --- a/scss/_miscellaneous.scss
> +++ b/scss/_miscellaneous.scss
> @@ -156,3 +156,11 @@ a:focus-within, a:hover {
>  .pwt-pointer {
>      cursor: pointer;
>  }
> +
> +/* rtl inversions of icons */
> +.fa[class*="-left"],
> +.fa[class*="-right"] {
> +    &:dir(rtl) {
> +      transform: scaleX(-1);
> +    }
> +}