RTL Tiddlers in TiddlyWiki 5

Few years ago I wrote about how to create RTL (right-to-left) tiddlers in TiddlyWiki. Creating RTL tiddlers is almost a necessity if you want to create tiddlers in a right-to-left language such as Hebrew or Arabic. TiddlyWiki5, the new version of TiddlyWiki, broke the old solution, but a similar one is can be made. In order to be able to add RTL tiddlers to your TiddlyWiki follow these steps:

  1. Create a new tiddler. The title doesn’t matter, but something like “RTLStylesheet” would be indicative.
  2. Paste the following CSS code as the content of the tiddler:
    .tc-tagged-RTL .tc-tiddler-title,
    .tc-tagged-RTL .tc-tags-wrapper,
    .tc-tagged-RTL .tc-tiddler-body {
        direction: rtl;
    }
    
    .tc-tiddler-frame.tc-tagged-RTL .tc-tiddler-controls {
        float: left;
    }
    
  3. Set the tiddler’s type to “Static stylesheet (text/css)”.
  4. Tag the tiddler with $:/tags/Stylesheet. Don’t forget to press “Add” or otherwise it won’t be saved.
  5. Save the tiddler (it should look like the image below before saving).
    rtlstylesheet_tiddler
    Now to create a new RTL tidller, simply create a tiddler and tag is with “RTL”.
    rtl_tiddler

Editing RTL tiddlers

Unfortunately, I haven’t found a way to automatically set the directions of the text inputs and textareas when editing an RTL tiddler. But this can be done manually pretty easily. In FireFox under Linux simply press Ctrl-Shift-X to change direction, on Windows it should be Ctrl-Shift (right or left shift depending on the direction). The same functionality is accessible in chrome via the context menu (right click).

Reference

This solution is an adaptation of Jermey Ruston answer in response to an inquiry regarding my old solution in the TiddlyWiki Google Group.

3 thoughts on “RTL Tiddlers in TiddlyWiki 5”

  1. Ctrl-Shift-X etc to change direction don’t work in the default configuration. First you need to remove the “Editor tool bar” using the Control Panel.

  2. I edit this method so the whole wiki to be converted into RTL languages.
    Here is the code for the stylesheet

    .tc-sidebar-scrollable {
        position: fixed;
        top: 0px;
        left: 0;
        bottom: 0;
        margin: 0 0 0 0px;
        padding: 70px 0 28px 40px;
            direction: rtl;
    }
    
     .tc-tiddler-title,
     .tc-tags-wrapper, .tc-tiddler-body {
        direction: rtl;
    }
    
    .tc-tiddler-frame .tc-tiddler-controls {
        float: left;
    }
    
    .tc-story-river {
        left: 360px;
        background: #F4F4F4;
        width: calc(100% - 400px);
    }
    <$reveal state="$:/state/sidebar" type="match" text="no">
    .tc-story-river {
        left: 0px;
            width:100%;
    }
    </$reveal>
    

Leave a Reply

Your email address will not be published. Required fields are marked *