Enhanced RTL support

[ws-rush]

Description

change default theme to use logical properties, and enhance URL matching

Linked Issues

~

Additional Context

~

[ws-rush]

/publish

[ws-rush]

/publish

[pkg-pr-new]

npm i https://pkg.pr.new/vitepress@5071

commit: 22ddd76

[userquin]

Here some hints using UnoCSS (should be easy to translate to plain css) : https://github.com/elk-zone/elk/blob/main/CONTRIBUTING.md#rtl-support

Check also if we need to add flip support for icons: https://github.com/elk-zone/elk/blob/371aa5c469b1e025f80c887f5ea18ecccf983129/app/styles/global.css#L203-L205 (at elk.zone we have the elk logo and we flip the elk header https://github.com/elk-zone/elk/blob/main/public/logo.svg on rtl)

[ws-rush]

Here some hints using UnoCSS (should be easy to translate to plain css) : https://github.com/elk-zone/elk/blob/main/CONTRIBUTING.md#rtl-support

Check also if we need to add flip support for icons: https://github.com/elk-zone/elk/blob/371aa5c469b1e025f80c887f5ea18ecccf983129/app/styles/global.css#L203-L205 (at elk.zone we have the elk logo and we flip the elk header https://github.com/elk-zone/elk/blob/main/public/logo.svg on rtl)

current theme styling does not use UnoCSS, also flip icons done

[ws-rush]

/publish

[ws-rush]

I think now it is ready

[userquin]

can you add/enable the rtl to this lang on docs? https://github.com/vuejs/vitepress/tree/main/docs/fa

upps look like it is fine (should be configured at locales entry), shouldn't we add the flip to the hero image or just change the angle?

[userquin]

We also need to change the layout for the selectors, arrow down shouldn't be on the right?

/cc @brc-dd where is the pr docs preview? Found, just clicking on the deploy/netlify link: https://deploy-preview-5071--vitepress-docs.netlify.app/fa/

Check version and lang switcher:

[userquin]

Some edge cases, maybe we need some change maybe using bdi, the spanish text is wrong, check the time entry:

[ws-rush]

@userquin

for direction of hero and dropdown arrows, they look right for me, above comparing between them

[ws-rush]

Some edge cases, maybe we need some change maybe using bdi, the spanish text is wrong, check the time entry:

you are right, I did the bdi for inline code only, I will change this and search for more edge cases

---

actually it looks good in my device , I will add Spanish to my device then try

[userquin]

for direction of hero and dropdown arrows, they look right for me, above comparing between them

You're right, review the menu button on narrow screen I think it should be flipped.

[userquin]

actually it looks good in my device , I will add Spanish to my device then try

It should display the same text inside the <time>, we use lang in the browser, the problem when some punctuation present inside the time.

[ws-rush]

/publish

[ws-rush]

for direction of hero and dropdown arrows, they look right for me, above comparing between them

You're right, review the menu button on narrow screen I think it should be flipped.

it is ready

[ws-rush]

actually it looks good in my device , I will add Spanish to my device then try

It should display the same text inside the , we use lang in the browser, the problem when some punctuation present inside the time.

I fixed it, it is now works correctly, photos from English, Spanish, Arabic

[ws-rush]

/publish

[rami-elementor]

This PR is duplicate of #5034

[userquin]

This should be used also on ssr, generated html pages should have the dir attr at build time and at runtime.

Maybe this is not the best place to change html dir attr, we should move it to client/app/index.ts (already included for lean at client spa but we should also check if we should add it for ssr):
https://github.com/vuejs/vitepress/blob/main/src/client/app/index.ts#L47

[userquin]

This PR is duplicate of #5034

/cc @brc-dd I like using start/end approach (this pr)

[brc-dd]

I like using start/end approach (this pr)

I'll take a look. The approach of both PRs look similar though. 👀 Probably can keep both / parts of both.