Bidirectional improvements for core classes

[Leilei332]

Related to #1845.

This PR updates the Vanilla and Snow White theme to make gaps, chooser, tabs and buttons display properly in bidirectional languages.

[github-actions]

Confirmed: Leilei332 has already signed the Contributor License Agreement (see contributing.md)

[netlify]

✅ Deploy Preview for tiddlywiki-previews ready!

Name	Link
🔨 Latest commit	e8c273a
🔍 Latest deploy log	https://app.netlify.com/projects/tiddlywiki-previews/deploys/688f1d83f203470007822441
😎 Deploy Preview	https://deploy-preview-9148--tiddlywiki-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Jermolene]

Thank you @Leilei332. @saqimtiaz could we add this to the v5.4.0 board?

[pmario]

@Leilei332 ... How can we test these changes.

[Leilei332]

@Leilei332 ... How can we test these changes.

It is not possible to test it in netlify preview, because there is a bug with tw5.com 's CSS, which makes story river display in a wrong position, covering the sidebar.

You have to checkout the PR and serve the full edition, switch to a rtl language to test it.

[linonetwo]

What is the full edition, tw5-com edition is the largest edition.

@kookma Might be interested.

[pmario]

https://tiddlywiki.com/editions/full/
https://github.com/TiddlyWiki/TiddlyWiki5/tree/master/editions/full

locally it needs to be started with node.js dev environment

tiddlywiki +plugins/tiddlywiki/filesystem +plugins/tiddlywiki/tiddlyweb .\editions\full\ --listen

[pmario]

@Jermolene -- There definitely are some improvements -- So we should merge improvements one by one.

@kookma -- Do you have an issue, with some screenshots, what's still wrong in v5.3.6 -- IMO with screenshots it will be easier for us to fix the bugs.

v5.3.6 More -> Tools sidebar

this PR

[pmario]

@Leilei332 .. If you would add some screenshots to your PR it would make it easier to test.

I use https://www.irfanview.com/ to make my GIF or PNG screenshots. With F12 I can add the arrows and some text if needed.

[Leilei332]

Summary of the improvements (besides buttons and gaps):

Sidebar "More" page and vertical tabs:

Dropdown:

Choosers:

[Jermolene]

Thanks @Leilei332 @kookma @pmario. I think these are very important improvements. Our goal should be for RTL support to be on an equal footing with our LTR support, to reflect our ambitions of universality.

[kookma]

https://tiddlywiki.com/editions/full/
https://github.com/TiddlyWiki/TiddlyWiki5/tree/master/editions/full

Can I use this for testing?

[saqimtiaz]

@kookma I believe this is the correct link for testing this PR: https://deploy-preview-9148--tiddlywiki-previews.netlify.app/editions/full/

[kookma]

@kookma -- Do you have an issue, with some screenshots, what's still wrong in v5.3.6 -- IMO with screenshots it will be easier for us to fix the bugs.

I will check! but right now the in screenshot you shared, the PR corrected the space issue.

[kookma]

One important point.
TiddlyWiki uses right sidebar and RTL web designs uses the same. So no need to switch right sidebar to the left when an RTL language is used in TiddlyWiki. See my screenshot for TW 5.3.6 (I did some adjustments)

[kookma]

@kookma -- Do you have an issue, with some screenshots, what's still wrong in v5.3.6 -- IMO with screenshots it will be easier for us to fix the bugs.

Just tested on https://deploy-preview-9148--tiddlywiki-previews.netlify.app/editions/full/
See the $:/ControlPanel has issues.

In the image above, one dropdown shows the arrow on the right, while another has it on the left. The spacing between the button and text is incorrect, and the text overlaps with the button.

There are recommendations and standards for RTL. I'm not sure if this is the right place to discuss it, but I think it's a good idea to follow W3C recommendations for RTL design in TiddlyWiki, especially if there's a decision to enhance TiddlyWiki's bidi support.

[Leilei332]

@kookma -- Do you have an issue, with some screenshots, what's still wrong in v5.3.6 -- IMO with screenshots it will be easier for us to fix the bugs.

Just tested on https://deploy-preview-9148--tiddlywiki-previews.netlify.app/editions/full/
See the $:/ControlPanel has issues.

In the image above, one dropdown shows the arrow on the right, while another has it on the left. The spacing between the button and text is incorrect, and the text overlaps with the button.

There are recommendations and standards for RTL. I'm not sure if this is the right place to discuss it, but I think it's a good idea to follow W3C recommendations for RTL design in TiddlyWiki, especially if there's a decision to enhance TiddlyWiki's bidi support.

This problem cannot be solved with only CSS, because the text direction is hardcoded in the wikitext source code, which adds align="left" in HTML. We have to remove the align in the source code and use CSS to align it instead.

The problem of direction was fixed.

BTW, the align attribute is marked as deprecated in MDN, we may switch to use the style attribute in the parser.

[github-actions]

📊 Build Size Comparison: empty.html

Branch	Size
Base (master)	2537.5 KB
PR	2540.5 KB

Diff: ⬆️ Increase: +2.9 KB

[pmario]

@Leilei332 -- As @kookma mentioned at: #9148 (comment) the right sidebar can stay on the right.

@kookma -- You wrote, that you also did some adjustments. Can you show them here, so Leilei can include them?

[kookma]

@kookma -- You wrote, that you also did some adjustments. Can you show them here, so Leilei can include them?

Well I use #7557 the onging work by @Jermolene
I did not still changed vanilla theme to do so! I use a custom CSS for now with English Language but using bidi support as below

.tc-edit-tags{
direction: ltr;
}

.tc-tiddler-title .tc-titlebar {
direction: ltr;
}

.tc-sidebar-tab-open {
direction: ltr;
}

I think this is useless in the context of this PR.
One of my favorite resource is https://rtlstyling.com/posts/rtl-styling/

[Leilei332]

Looks like using CSS Logical properties and values not only simplifies code, but also supports a wider range of browsers (since the :dir() pseudo class requires browsers released after 2023). Sadly, some CSS border logical properties requires browsers released after 2019, which is in an awkward situation.

[Jermolene]

Looks like using CSS Logical properties and values not only simplifies code, but also supports a wider range of browsers (since the :dir() pseudo class requires browsers released after 2023).

Thanks @Leilei332 I wasn't aware of this module, but agree that this approach makes a lot of sense.

Sadly, some CSS border logical properties requires browsers released after 2019, which is in an awkward situation.

Would it be practical to provide fallbacks for older browsers?

[kookma]

@Leilei332
Thank you for all your hard work. I noticed you've started using -start and -end instead of -left and -right, which aligns with the W3C recommendation and standards for bidirectional design.

[Leilei332]

Looks like using CSS Logical properties and values not only simplifies code, but also supports a wider range of browsers (since the :dir() pseudo class requires browsers released after 2023).

Thanks @Leilei332 I wasn't aware of this module, but agree that this approach makes a lot of sense.

Sadly, some CSS border logical properties requires browsers released after 2019, which is in an awkward situation.

Would it be practical to provide fallbacks for older browsers?

IMO currently the best practice to support older browsers is to use [dir="rtl"] in CSS.

[Leilei332]

Looks like using CSS Logical properties and values not only simplifies code, but also supports a wider range of browsers (since the :dir() pseudo class requires browsers released after 2023).

Thanks @Leilei332 I wasn't aware of this module, but agree that this approach makes a lot of sense.

Sadly, some CSS border logical properties requires browsers released after 2019, which is in an awkward situation.

Would it be practical to provide fallbacks for older browsers?

Looks like I got it wrong here. A wide range of browsers supports using supports CSS at-rule to check whether a CSS property is usable in browsers.