Pango Markup in i3bar

March 20, 2015 at 9:38Pm

Since a little over a month ago, i3bar supports inline pango markup for styling your statusline and workspaces1. So after figuring this out, this past weekend I took some time to redo my statusline.

I wrote a small ruby script to serve my i3 statusline command which generates little aesthetic blocks (styled with Pango markup) for time, weather, network, audio level, and power... looking like:

Pango Markup in i3Bar screenshot

Each block I define as a hash, specifying symbol, color, and the function which returns the data to display:

blocks = [
    {
        :symbol => "↬",
        :color=> "#530067",
        :text => fetchers.network
    }, ...
]

Where fetchers holds some functions for retrieving system data:

class InfoFetchers
  def network
    %x[netctl list].split("\n").select { |n| 
      n if n[0] == "*"
    }.first.gsub!("* ", "")
  end ...
end
fetchers = Info_Fetchers.new

Each block gets passed through a map function to stylize with Pango 3. This way I get a consistent feel for each block and I keep my code DRY. The final output is assembled as JSON and passed onto i3bar:

blocks.map do |f|
   text = [
       "<span rise='10000' size='large' underline_color='#ffffff' underline='double'>",
      "<span bgcolor='#{f[:color]}' fgcolor='#ffffff'> #{f[:symbol]} </span>",
      "</span>",

      "<span rise='10000' size='8900' underline='double' underline_color='#ececec'>",
      "<span fgcolor='#2b2b2b' bgcolor='#f9f9f9'> #{f[:text]} </span>",
      "</span>"
    ].join

    {
      :separator => false,
      :separator_block_width => 10,
      :align => 'left',
      :min_width => 0,
      :full_text => text,
      :markup => 'pango'
    }
end.to_json

So yeah -- Pango + i3bar is nice. Feel free to steal my status bar generating script featuring the block aesthetic. It took me a while to get Pango to cooperate, so I hope I'll save some folks some effort!

Thanks to acrisci who was the one who dropped Pango into i3 upstream.

  1. This is great, because previously if you wanted to style the output of i3status or your status_command in i3, you were limited to setting only foreground colors. Now you have all of Pango markup at your disposal.
  2. While nothing close to the styling available in browser or with candybar, this is a monumental improvement from i3bar's previous styling support.
  3. Pango markup supports a number of text attribute styling options, including background, forgroung color, and underlining.