New Features in TiddlyWIki 5.3.0: The BIDI Text

#1

TiddlyWiki 5.3.0p supports bidirectional text. While a tiddler cannot have both RTL and LTR text at the same time, but you can have tiddler with RTL now.

I am not sure how many users in the forum uses RTL texts (Persian, Arabic, Hebrew, Urdu, …) but feedback are highly welcome.

NOTE: A tiddler can have both LTR and RTL text at the same time, BUT TiddlyWiki show the direction based on first line of text in a tiddler, this is a limitation and I hope this can be addressed in future release. In other word a real BIDI is not implemented yet.

2 Likes
#2

Presumably we could also then get columns ordered right to left, in which case Japanese and Chinese formalized vertical text would display properly (assuming “columns” are reduced to a single character width).

#3

I think so! please give a try on https://tiddlywiki.com/prerelease when you have time. See my end note in OP.

#4

Hm, vertical right-to-left is not especially helped by the new RTL pragma (getting the columns to wrap correctly is too tricky). But in testing I confirmed that old-style Japanese text flow already works fine (in 5.2.x) with css:

image
image1920×387 69.6 KB

2 Likes
#5

Could someone please provide a guide on how to write an RTL tiddler?
I tried to just create a new tiddler and write in Persian, but it stays in LTR both in the editor and in the tiddler.

1 Like
#6

Here’s one demo using the dir specification — although I don’t understand anything about Persian, so I’m just blindly pasting in a bit of what claims to be Persian text at a css demo site. Also, I’m guessing you’d want to tweak the editor to work properly with the process of input for Persian, about which I have no insight. Still, proof of concept for displaying correctly?

image
image1510×406 52.6 KB

Support within TiddlyWiki is present, but this is basic html/css stuff that TW is supporting. Here’s one online discussion, from which I grabbed that text above:

1 Like
#7

If RTL can be set via a class it may be as simple as either creating a section with that class

<section class=rtl>
text in rtl
</section>

Or set the tiddlers class field to rtl for whole of tiddler rtl;

Either way if you also have a ltr class you can reverse it with another section if needed.

So this tiddler tagged $:/tags/Stylesheet

.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr;
}

You can then do this;

<section class=rtl>
content by me
</section>
No class
<section class=rtl>
content by me
   <section class=ltr>
     content by me
   </section>
</section>
<section class=ltr>
content by me
</section>

I added rtl to the tiddlers class field and it throw all elements to the right, but not the edit mode, so we need a little more specificity.
Snag_13367d9b

  • I Imagin authors of RTL may like an editor that behaves the same way.

The body of the tiddler uses the class tc-tiddler-body so this may be used to make it specific.

  • Can CSS guru please tell us how?

[Edited] Nice resource Right-to-left Styling

1 Like
#8

I already found the manual implementation for RTL on there, but I thought this feature was implemented in newer releases (it doesn’t work in 5.3.4 prerelease). I mean the thing was shown on there.
@Mohammad Could you please shed some light on the status of the BIDI improvements?

#9

Hi @arcsin
Unfortunately RTL support was dropped from TiddlyWiki 5.3.x.

@jeremyruston can explain this.

I know two workarounds can be used. One is based on css, like the one you listed or the one by Springer and TW_Tones. The other is a JS solution which overwrite core tiddlers.
I will share them here, once I get my desk.

#10

Could you please share the JS solution you mentioned?

Also, since Tiddlywiki doesn’t currently support BIDI, it would be helpful to have a dedicated post / topic on how to implement it manually using a JS script or, preferably, a plugin.
This way, newcomers who use RTL languages can begin with less confusion.

Thank you for taking the time to Help.

#11

See discussions here:

1 Like
#12

Following up on this discussion, and the threads on the relevant PR’s on github - is there currently a plugin/reference for adding RTL support manually to a TW document? I was able to get the display to show RTL by adding appropriate tags and conditional css, but not the editor, which makes it very uncomfortable for editing large amounts of RTL text.
Thanks,