Right to left support - RTL

Thank you very much for the detailed response!
I think - as others have said - any small workaround for now would be great, even for any partial support. We understand you can’t just set “direction: rtl” in CSS and call it a day, but we do hope something simple (which allows for RTL in very specific ways) is on the front-burner… (in tables, columns, anything really…)
I’m currently using a js user-script which sets the direction to rtl and fixes some other things which gives me very minimal RTL support, but it’s better than nothing! :slight_smile:

2 Likes

Can you share it with us please?

@Gal_Oron , i too would love to see your method of inserting that js script

respect
max

1 Like

@Erfan_Mehraban @Xyzor_Max
It’s a very limited version and I’m only activating it on certain pages and disabling it on most…
I’m using “tampermonkey” as an extension for user-scripts, and used this script as a basis. I also asked the author if he has an updated version for Coda, and if I get any updates, I’ll be sure to post them here :smiley:

The updated code I’m using right now is:

// ==UserScript==
// @name         Coda-RTL
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  right to left coda.io documents!
// @author       You
// @match        https://coda.io/d/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var currentHash, domLoadedInterval;

    setTimeout(function(){
        console.log("tampermonkey Actived :-)");
        var currentHash = location.hash;

            addNewStyles();

            domLoadedInterval = setInterval(function(){
                init();
            }, 1000);

            var hashChangeInterval = setInterval(function(){
                var urlPath = location.pathname;
                var sectionName = urlPath.substring(urlPath.lastIndexOf("/") +1, urlPath.lastIndexOf("_"));
                if(location.hash != currentHash){
                    init();
                    console.log("section changed");
                    currentHash = location.hash;
                }
            },1000);
    } ,3000);

    function init(){
        var rootElement = document.getElementsByClassName("kr-document-root")[0];

        if(rootElement)
        {
            rootElement.setAttribute("dir", "rtl");
            console.log("root element direction changed to RTL!");
            clearInterval(domLoadedInterval);
        }
    }

    function addNewStyles(){
        var styleElement = document.createElement("style");
        styleElement.type= "text/css";
        /*var blockLevelStyle = ".kr-indented.block-level-1, .kr-olist.block-level-1, .kr-ulist.block-level-1 { border-left-width: initial;border-right-width: 38px;}"
        + ".kr-indented.block-level-2, .kr-olist.block-level-2, .kr-ulist.block-level-2 { border-left-width: initial;border-right-width: 76px;}"
        + ".kr-indented.block-level-3, .kr-olist.block-level-3, .kr-ulist.block-level-3 { border-left-width: initial;border-right-width: 114px;}"
        + ".kr-indented.block-level-4, .kr-olist.block-level-4, .kr-ulist.block-level-4 { border-left-width: initial;border-right-width: 152px;}"
        + ".kr-indented.block-level-5, .kr-olist.block-level-5, .kr-ulist.block-level-5 { border-left-width: initial;border-right-width: 190px;}"
        + ".kr-indented.block-level-6, .kr-olist.block-level-6, .kr-ulist.block-level-6 { border-left-width: initial;border-right-width: 228px;}"
        + ".kr-indented.block-level-7, .kr-olist.block-level-7, .kr-ulist.block-level-7 { border-left-width: initial;border-right-width: 266px;}"
        + ".kr-indented.block-level-8, .kr-olist.block-level-8, .kr-ulist.block-level-8 { border-left-width: initial;border-right-width: 304px;}";
        var bulletIconStyle = ".kr-bullet-disc:before,.kr-bullet-decimal:before, .kr-bullet-circle:before, .kr-bullet-square:before  { padding-right: 0 !important;transform: none !important; }"
        var bulletTextStyle = ".kr-bullet-disc > .kr-span, .kr-bullet-decimal > .kr-span,.kr-bullet-circle > .kr-span,.kr-bullet-square > .kr-span { margin-right: 20px;}";
        var commentStyle = "div[class*=comment_thread_view] div[class*=comment_editor--editBox] div[class*=editable--root] .kr-editable .kr-root .kr-line{ text-align: right; padding-right: 10px; direction: rtl; }";
        var sentCommentStyle = "div[class*=comment_thread_view] div[class*=comment_view--root] span[class*=comment_view--commentContent] { text-align: right; }";
        var pageContentStyle = "div[class*=document--leftRailAndDocContents], div[class*=document--docContents] { direction: rtl; }";
        var toolButtonsStyle = "span[class*=icons--s-format-indent-increase]:before{ content: '\\EA8B'; } span[class*=icons--s-format-indent-decrease]:before{ content: '\\EA8C'; }";
        var angleButtonsStyle = "span[class*=icons--s-chevron-double-left]:before{ content: '\\EA41'; } span[class*=icons--s-chevron-double-right]:before{ content: '\\EA40'; } ";*/
        var titleStyle = "div.kr-canvas-header { margin-right:100px;}";
        var styleText = document.createTextNode(titleStyle);
        styleElement.appendChild(styleText);
        var head = document.getElementsByTagName("head")[0];
        head.appendChild(styleElement);
    }

})();

It’s very rough and doesn’t actually do too much, but it works for very simple documents which are only RTL.

Hope this helps… :smiley:

2 Likes

Yes Please add dir=auto to blocks, it’s necessary for rtl languages

1 Like

Hi @BenLee

  1. Is there any update on the RTL support?
  2. If not, few other users and I were thinking about developing some sort of an add-on for that function. would you (the Coda team) be willing to collaborate and support this kind of project?
1 Like

I don’t think this is on the near term project list. We are still doing a good bit of work on the editor, adding features, and working on performance.

This is actually a pretty difficult thing to make happen and would be more than just a typical project. Displaying text RTL or LTR is easy, but allowing for edits and especially collaborative editing is a really big lift. Because it’ll take a good bit of resources, it’s really difficult to say when we’ll be able to tackle this. We definitely know that it’s very important, but we do have to strategically choose when we tackle this as a company.

I’m not sure how an add-on would be able to make this happen, but curious to hear thoughts.

2 Likes

Its been over almoast 3 years now, is this anywhere on your roadmap?

2 Likes

+1 to RTL team :slight_smile:
I hope it’ll get soon

These things take time, it seems we are in for a long long wait.
סבלנות.
הרבה סבלנות.

This is how it was done on the other side of the road…

maybe it’s a good intermediate solution here too.

This is a great alternative i found which has a very good RTL support and some great features that coda doesn’t have:

this thread is how you find all the israeli coda users. :rofl:

2 Likes

The ability to set a single column to edit rtl would be phenomenal … still hoping this gets moved to the front burner sometime sorta soon…

Heya friends,

Did Coda low-key initiate RTL text support??

I just happened to have a Yiddish keyboard on my mac and typed into a cell when I switched to coda. The punctuation is a bit laggy, but commas end up in the right place in-line in a sentence?

Or is this just the way it’s always been till now?

Hi,
it is my first time to use code. It is an awesome tool to manage my business activities with my team. RTL is very crucial to depend on coda to manage my business in the future.
i hope, you started to include RTL (Arabic) in the next updates.