feat: add RTL support to AppFooter

[userquin]

releated to #317

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Jan 29, 2026 5:02pm
npmx.dev	Ready	Preview, Comment	Jan 29, 2026 5:02pm

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
npmx-lunaria	Ignored		Jan 29, 2026 5:02pm

[danielroe]

out of curiosity, why change the class name of the icon?

[userquin]

parsing logic with - separator for collection and icon can be expensive; using : the collection and the icon in just one pass: i-carbon-x-y can be carbon or carbon-x collection and x-y or y icon respectivelly

[knowler]

I’m curious about the change away from justify-content: space-between. How does that improve RTL support? From my understanding, in flexbox layout, the main axis will flip when the direction changes. Is there something else I’m missing?

[userquin]

Because we need to swap the left and the right inner containers => links on left for LTR and on right for RTL, I added a span between. With justify-between both container without gap (1fr between)

[knowler]

Sorry, I don’t follow. Flexbox is already writing-mode/directionality aware, so the layout contents would have already flipped before this PR (i.e. “links on left for LTR and on right for RTL” already happens). Using justify-content: start has no effect on the directionality of the items within the layout (flex-direction could have that effect, but it’s also the wrong tool for the task) and only seems to introduce the problem that requires the empty, flex-growing/shrink, ARIA hidden <span> element hack.

Usually, I wouldn’t call this out, but since it’s propagating a hack everywhere, I think it’s worth considering if it’s actually necessary. IMO the only changes relevant to RTL support in this PR is adding the rtl-flip class to the icons and changing text-left to text-start in a couple of places.

[userquin]

We need to keep the html markup: A <---> B. If we want to visually change on RTL to B <---> A using justify-between, how can we do that? We need correct html markup and we need to swap containers.

How do you display an icon + button or button + icon? adding justify-start with correct html markup, on RTL we need to change the "order" (justify-start will do for us) => here we want to have a separator between them and so I added an span.

[userquin]

Check https://npmxdev-git-fork-userquin-app-footer-rtl-poetry.vercel.app/ adding dir="rtl" to the html in the devtools and check the links container and the paragraph below.

app footer with RTL

app footer with LTR

[knowler]

justify-content has no effect on the order of flex items — only the placement of items on the main axis of a flex layout (e.g. justify-content: start will have items flow from the start of the main axis). There is no need to change the order with CSS or change the markup. Like I said, flexbox (and even grid) are writing-mode/directionality aware and will change how items flow within an axis based on the directionality of the context. Internationalization has already been baked into these layouts from the start.

See: https://rtlstyling.com/posts/rtl-styling/#flexbox-layout-module

A little demo: https://knowler.dev/demos/KeLDPt7?codepen

[userquin]

can you provide the alternative? I want to understand how to solve it, I'm not saying your're wrong, get the original AppFooter.vue and play with it (and maybe send a PR), I'm applying the same "hack" in another components/pages (when using justify-between).

[knowler]

PR here: #340

It just reverts all of the extra spans, that hacky span, and any introduction of justify-start.