emacs org-mode ricing ux

This is a short post pulling in my comment on a /r/unixporn submission where I document my Org mode dotfiles for a word processor like interface. The aim is to recreate a rice I submitted on /r/unixporn some time back. Shown below is a demo of what the thing actually looks like.

demo.png

The look is inspired from the style used by Edward Tufte in his books. A replication of the style in CSS is up on github for free at tufte-css. Other than the proper spacing and margins, the thing that I like in Tufte's style is the font ET Book which is an old-style serif font with beautiful italics.

et-book.png
Figure 2: Et Book font

To start, we need a nice looking light color scheme so that faces other than that of Org mode look decent. I selected spacemacs-light mostly because I use spacemacs and it is pretty complete as far as number of faces covered is concerned. Also, it has a good off-white background (#fbf8ef). There are three basic steps involved from here:

1. Faces

We will set Et Book (named EtBembo) font to most of the org mode. Get the font here. If you are using spacemacs, the easy way is to use the theming layer in spacemacs to set faces. My face config are available here. For each face, the second set of properties are for the light theme (spacemacs-light). I have set the variable-pitch font to be EtBembo (along with title and stuff) and enable variable-pitch-mode when in an org buffer.

Note that unlike other face settings, org-indent's (:inherit (org-hide fixed-pitch)) has a crucial effect of aligning text under Org heading in a non-monospace font, so you might not want to miss that.

2. Padding

There are a few places where you can gain some breathing space.

  • Line spacing

    Per buffer line spacing can be set using the variable line-spacing. Something like 0.1 goes well here.

  • Top padding

    Similar to mode-line, Emacs also has header-line for windows. Setting its format to empty string (setq header-line-format " ") gives you top padding. Also by changing header-line face height, you can change this spacing.

  • Side padding

    Adding side spaces is possible by setting margin width. You also need to reset the buffer to make the change visible. Here is a function that does that:

    (lambda () (progn
      (setq left-margin-width 2)
      (setq right-margin-width 2)
      (set-window-buffer nil (current-buffer))))
    

If you need padding all around the frame so that everything (including mode-line) goes inside the padded view, you can set internal-border-width.

You can also try writeroom-mode which makes the writing buffer cleaner and has settings for many of the padding related stuff. One neat feature is that it makes the buffer text centered and hides mode line. I don't use it much since my current settings reproduce pretty much what I need from it. Nevertheless, here is some config for writeroom.

3. Other tweaks

Whatever information your mode line might be displaying, most likely it can be turned off if you are aiming for a distraction free setup. Spacemacs provide a minor mode hidden-mode-line-mode to hide the mode line, which can be added to your org hook. Some other minor settings follow:

(setq org-startup-indented t
      org-bullets-bullet-list '(" ") ;; no bullets, needs org-bullets package
      org-ellipsis "  " ;; folding symbol
      org-pretty-entities t
      org-hide-emphasis-markers t
      ;; show actually italicized text instead of /italicized text/
      org-agenda-block-separator ""
      org-fontify-whole-heading-line t
      org-fontify-done-headline t
      org-fontify-quote-and-verse-blocks t)

Also try disabling hl-line-mode in org-mode as varying line heights make these highlights look bad. Install org-pretty-table-mode for getting beautiful table borders. Other stuff like latex (org-latex-toggle-fragment) and image previews (org-image-toggle-inline) come bundled in with org.

Here is the snapshot of my Emacs dotfiles with config related to this post.