Zumi's Scratchpad

Trying out Zim Wiki

updated on

Background

College just started, and these past few days I set up something to take notes digitally, since we're still doing online classes. I've known about a few options for a while now, and since I'm on Linux, those are Cherrytree and Zim.

In the past, I have used Cherrytree for a little bit. I didn't set it up too much, I just set some fonts and backgrounds and go take some notes. I have used them in meetings and such when I get the chance to bring my laptop - which aren't really frequent, so most of the time my notes are going to be handwritten anyway. The most accessible offline options are going to be either my phone or a notebook, so writing stuff on a laptop isn't really possible.

With online classes starting, I felt that now's the perfect time to embrace digital note taking. And I have to figure out what seemed best for me. At first, I wanted to use Cherrytree since I have used that before, but I didn't like how rough-looking the configuration UI is. Even though Cherrytree has slightly better table handling and how I like that it uses a single file format I can easily carry around, Zim Wiki ended up being my notebook of choice.

Modifications

Zim Wiki has both a dotfile and a GUI configuration. The options exposed through the GUI are just what's needed, such as basic display, keybindings, and plugins.

I kinda like the plugins. Table support isn't enabled by default, but I could enable the built-in "Table Editor". Aside: I've said Cherrytree's table handling is slightly better since I can just tab through the rows to edit them, because here, I have to manually double click the data to edit. On the other hand, the Equation Editor is pretty nice for taking math notes, despite being in LaTeX (I will probably have to use that for undergrad papers anyway lol)

The default style looked unsatisfying to me (especially since I was using a dark theme), so I wanted to change it. Options to change the color isn't available on the GUI settings (only the font), but they are configurable through dotfiles. So I changed a lot of stuff in ~/.config/zim/style.conf, with the exception of the text background - that I have to change in my user GTK 3 style settings in ~/.config/gtk-3.0/gtk.css. You may be thinking that it probably should be under one config file, and... yeah.

I wanted a monospace font, just so I could draw some ASCII art with my text. Not just any monospace font, but one of those classic pixel terminal fonts that I think is slightly more readable due to the high contrast, and also A E S T H E T I C as well. I chose the Px437 ToshibaLCD 8x16 font from this old-skool PC font collection (version 1.0) since I've had it for a while.

However, as I was using the font, I noticed some uneven spacing on my notes. The line spacing when the text is wrapped is not the same as the line spacing when making a new line, and unfortunately, only the latter can be changed as of this writing. I found some issues pertaining to the former, like this one, however I don't see anything like it currently implemented in master, despite it being a few years old. This was still Totally Unacceptable to me, so I came up with the alternative of making a new font based on the one I was using, which will have a reasonable amount of line spacing baked in. And then, I could just bypass the linespacing settings entirely.

So I fired up FontForge, loaded up the TTF file for the ToshibaLCD font, and headed over to Font Info. I changed the font name and family to Px437 ToshibaLCD 8x16 Increased Space, but the real meat is in the OS/2 font metrics. Under OS/2 → Metrics, I ticked "Is Offset" for both Typo Ascent and Descent Offset, and set 300 for the Ascent and -300 for the Descent.

I then generated a new TTF based on that, and then got Zim to use that font. Next, I set all the line spacing in style.conf to 0 to ensure that the line spacing stays consistent throughout. If you want the patched TTF, it's here!

Now, there's a "mark" tag that Zim represents with an "underline" icon. It might just be my icon theme, though. Either way, by default, it highlights the text instead of underlining it. That's one heck of a disconnect, so I changed the mark tag style to look like it's actually underlining text. Finally, I changed up the heading styles to make it look less terrible for me. (Picked a gray for now instead of the dark green it came with)

Other Thoughts

I love how, with Zim, I can just dynamically generate sublinks on the fly, and that how Zim only saves what actually has content on it. That way, I can copy the course schedule and make a list (or a checkbox) for each lecture that has links to new articles. So that when said lecture begins, I can click on the link for that day and start writing. Not only that, but it's also useful for quickly writing up stuff and journalling.

Seeing how the door has opened up for my static site generation tool to process other forms of markup (not just Markdown), it was tempting to implement support for it, since it's kind of WYSIWYG and all. As of this writing, it's already on master and will land in version 3.2.

Dotfiles

In the end, here's what I have in my style.conf. Suited for a dark theme.

[TextView]
indent=30
tabs=None
font=Px437 ToshibaLCD 8x16 Increased Space 12
justify=
linespacing=0
bullet_icon_size=GTK_ICON_SIZE_MENU

[Tag strong]
weight=PANGO_WEIGHT_BOLD

[Tag emphasis]
style=PANGO_STYLE_ITALIC

[Tag mark]
background=rgba(0,0,0,0)
underline=PANGO_UNDERLINE_SINGLE

[Tag strike]
strikethrough=True
foreground=grey

[Tag code]
background=#444
foreground=#ddd
font=Px437 ToshibaLCD 8x16 Increased Space 12
family=monospace

[Tag pre]
paragraph-background=#444
background=#444
foreground=#ddd
family=monospace
font=Px437 ToshibaLCD 8x16 Increased Space 12
wrap-mode=GTK_WRAP_NONE
indent=20

[Tag link]
foreground=#6DD7FF

[Tag tag]
foreground=#ce5c00

[Tag h1]
foreground=#FFF
underline=PANGO_UNDERLINE_DOUBLE
weight=PANGO_WEIGHT_BOLD
scale=1.25

[Tag h2]
foreground=#C9C9C9
weight=PANGO_WEIGHT_BOLD
underline=PANGO_UNDERLINE_SINGLE
scale=1.2

[Tag h3]
foreground=#C9C9C9
weight=PANGO_WEIGHT_BOLD
style=PANGO_STYLE_ITALIC
underline=PANGO_UNDERLINE_SINGLE
scale=1.1

[Tag h4]
foreground=#bbb
weight=PANGO_WEIGHT_BOLD
underline=PANGO_UNDERLINE_SINGLE
scale=1.05

[Tag h5]
foreground=#bbb
weight=PANGO_WEIGHT_BOLD
underline=PANGO_UNDERLINE_SINGLE

[Tag h6]
foreground=#bbb
underline=PANGO_UNDERLINE_SINGLE

[Tag checked-checkbox]

[Tag xchecked-checkbox]

[Tag migrated-checkbox]

And here's what I appended to my gtk.css:

#zim-pageview text{
background-color: #001B33;
}