Explain the problem as you see it
People who would like to use RTL languages such as Arabic or Hebrew would struggle to make Tana work for them.
Why is this a problem for you?
Because I work and think in both Arabic and English. And I struggle a lot with the lack of RTL support.
Suggest a solution
Allow users to set the text direction from LTR to RTL on a workspace level, or automatically detect text direction on a node/page level.
Some useful resources I found. I know nothing about coding but some people recommended it.
https://steelkiwi.com/blog/right-left-development-tips-and-tricks/
https://blog.scottlogic.com/2015/02/13/rtl.html
7 Comments
Hi,
I would like to add here the feature request I opened in the past about RTL support in the slack channel.
https://tanacommunity.slack.com/archives/C02DAJB4XTM/p1675276992685879
I gave there an example of the problem and proposed one way to design the app for RTL users.
Thank you for sharing! I agree it might cause difficulties to use Tana for RTL languages. Tana requires a mindset shift in order to use it effectively, from thinking about information in terms of files to thinking of them in terms of nodes. Besides, I want to share with you an interesting blog sloboda-studio.com/project-management, hope it might be useful for you.
Another resource (from Roam Mixed Text Direction plugin)
I'll be happy to help as much as I can
I must say that I used this plugin in roam and that it works very well.
Nevertheless, I must also add that I'm not a fan of the "mixed direction approach".
It creates some weird situations when you have to change the way you write things so the text is aligned properly.
For example, many times, even when writing in RTL languages, you need to start a sentence with an English word. If text is align accorsing to the first letter of the sentence (which is what the "mixed direction" approach means), than it is not possible to start a sentence with an English word, even though you want to.
In my opinion, it's not a good idea for the app to limit the way people write just to enforce artificial rules, such as aliging the direction of the text based on the first letter of the sentence.
Moreover, I must say that I also disagree with the notion of relating the alignment of a node on the screen to its content.
I'll give an example from the tutorial of the "Mixed Text Direction" Plugin:
As you can see, the screen contains a few block (in roam) such that some blocks are in Arabic and some are in English.
The blocks writen in arabic not only have their text align from right to left, but have the "dot" aligned from rigth to left.
I do not see any reason why the two things should be related.
In my opinion, the appropriate solution should be to allow a user to align the entire app from right to left or from left to right. This would mean that all the "dots" (and the dots" only) are aligned from right to left.
I recently discovered that roam added this capability, and it works very well (and it is way more comfortable than the plugin).
As to the alignment of text within a node - this should not be related in any way to where the "dot" appears on the screen.
The "dot" might appear on the right side of the screen, but the text may be alignt from left to right (or from right to left).
That is something that roam does not do, and it can be annoying. The content of each block should be like an entirly independent word file, where the user can write whatever he wants however he wants.
The "dots" are only a way of presenting the different nodes in a convinient way next to each other on the screen. I don't see how flipping them from one side to the other all the time is helpful, and it even might be harmful.
As to users who still want to switch the "dots" from one side to the other - I would wait and see wether the implementation I suggested is not enough for them. I don't see a reason to create a complex system of text and "dot" alignments before making sure that it is necessary. The implementation I suggest is way simpler to implement, and it solves a lot of the problems that RTL users have in existing apps.
So, it might be good to take a look at the plugin to get an impression how to present RTL languages, but I believe that copying the design would be a mistake.
The dot is a visual indicator, the requested feature does not have to implement this change of alignment but I think it's helpful.
Also, keep in mind that the screenshot you attached was made for demonstration purposes, switching language each node is not a common use case...
I disagree with this point - there are things I write in English (e.g. work and research) and there are things I (want to) write in Hebrew (e.g. personal and household stuff), I don't want to switch instances off the app any time I want to switch language. BTW, this capability in Roam is quite old, the Mixed Text Direction plugin was created to overcome this problem.
In my opinion, the appropriate solution should be to allow a user to align each node (and its children) from right to left or from left to right. The default alignment (LTR or RTL) should be determined in the global settings.
Hi! I understand the issue you're facing with RTL language support in Tana. To address this:
1.Tana could offer a workspace-level text direction setting, allowing users to switch between RTL and LTR languages seamlessly.
2.Implementing automatic text direction detection on a node/page level could simplify language switching.
For resources, you can explore guides on configuring RTL support in web applications. While not coding-specific, they might provide useful insights. Also, you may click here to find out additional tips.
Hi,
I would like to share some kind of workaround.
The following CSS currently changes most of the app to RTL.
You can use a chrome extention called "Stylebot" to alter the css of the app.
This currently does not work for Code Nodes (haven't managed to figure out how this work yet...).
This should work for now, but I do not know if it is stable and will work after they release new features.
/* Change Nodes to appear from right to left */
.listItems {
direction: rtl;
}
/* Change sub nodes indent to be from the right and not from the left*/
.OutlinerItem-module_children__9oZW1 > div:first-of-type {
margin-left: 0rem;
margin-right: calc(var(--levelIndent) * 1);
}
/* Change toggle to appear to the right of the nodes */
.Bullet-module_chevronContainer__G4LBL {
right: -1.4rem;
left: calc(100% + var(--listItemHorizontalSpacing));
}
/* Change title text direction */
.listContentItem {
direction: rtl;
}
/* Fixing tag spacing */
.wrapEditableAndMenu:has([data-role=template-list]) .editable {
margin-right: 0em;
margin-left: 0.35em;
}
.TemplateTag-module_tagPrefix__fUBU4 {
padding-left: 0rem;
padding-right: 0.25rem;
text-align: center;
border-top-right-radius: var(--tagRadius);
border-bottom-right-radius: var(--tagRadius);
}
.TemplateTag-module_tag__8TbLO {
padding-right: 0.2rem;
padding-left: 0.25rem;
border-top-right-radius: var(--tagRadius);
border-bottom-right-radius: var(--tagRadius);
}
/* Moved Opened reference box text direction to the right */
.InlineInfoNodes-module_scroller__JUpAO {
direction: rtl;
}
I must say that I do not have a lot of experience with CSS and it still only took me a couple of hours, without even understanding the source code. I do not see how this would take very long for pro front end developers to develop.
Hope this can help someone.
For me it stills does not make the app good enough to use as it might stop working every day. Hope that it might be usefull to someone else.
Hope that some day this feature will be implemented so we can acually use the app!