Created on 19 May 2019 ;    Modified on 19 May 2019 ;    Translationitalian

TiddlyWiki: how set font used to edit tiddler

When editing a tiddler of a TiddlyWiki document the font used by default can be unpleasent. Indeed TiddlyWiki uses a proportional font (usually Helvetica, or Arial).

Proportional fonts use characters of different widths depending on the letter to be printed: an "i" will be much narrower than a "w". This characteristic helps reading complex documents, but in some cases it's uncomfortable. I mean to the cases in which it is important to check character alignment. For example in some types of program listings [1], or when you fill out a table.

For this reason I decided to use a non-proportional font when I edit, or I create, a tiddler.

To get this configuration, let's open the file that interests us, and we create a new tiddler. For example a tiddler titled test. It's going to have the following characteristics:

  • content

    div .tc-tiddler-edit-frame textarea {
        font-family: monospace;
    }
    
  • its type is text/css;

  • and it has the tag: $:/tags/Stylesheet.

At this point, by editing any tiddler, we will see that now the editor uses a monospaced font.


[1]In particular Python, for which the indentation of the lines is significant. But, more generally, a programmer always adopts indentation styles, which help him to interpret the relationship between blocks of code on the fly. In these cases, a misalignment of the characters makes the reading even more difficult of the program.