Guest Post: Inline CSS Using a TextMate Command

A few months back I posted a series of entries about the process of producing HTML emails. Those posts generated a number of comments and emails, including some from Christopher White who has been working with the TamTam library in TextMate to clean up his workflow. He offered me this article which I present below.

Overview

Email services like GMail and Hotmail don’t like stylesheets with the only real workaround to use inline styles. Inline styles, however, are labor and typing intensive. One way to overcome this problem is design the HTML and CSS as you would ordinarily. When you are done designing and testing, filter the HTML so the CSS styles are inlined into each matching HTML element.

This recipe shows how you can do this within the Textmate environment using a user-defined command. The command calls a Ruby library to filter the contents of the current Textmate window inlining styles you defined ‘’ element into the ‘style’ attribute of HTML elements.

Much work converted into little work.

Step 1: Check what version of Ruby you are running

If you are running Leopard and updated from Tiger, you need to check you are accessing the right version of Ruby.

Open a terminal window and type:

ruby -v

You should see this:

ruby 1.8.6 (2007-06-07 patchlevel 36) [universal-darwin9.0]

If not, you are running the Tiger or manually installed version of Ruby. The reason is the ‘$PATH’ contains a reference to ‘/usr/local/bin’ before ‘/usr/bin’.

If this is the case, open your ‘/.bash_login ’ or ‘/.profile’ file and change the order of paths so ‘/usr/bin’ is first or remove all references to ‘/usr/local’ from ‘$PATH’.

Step 2: Install the CSS filter component

The Textmate command to inline CSS styles from the ‘’ block requires the TamTam library which can be easily installed from the RubyForge repository.

From the terminal window:

gem install tamtam

Here’s more about TamTam http://tamtam.rubyforge.org/

Step 3: Create the Textmate command

Next you need to create the command in Textmate. You can either create a new bundle or use an existing one. One idea is to add to the HTML bundle so it’s easily available. We’ll do that here.

Launch TextMate. Then open the Bundle Editor (Bundles > Bundle Editor > Edit Commands). Move down and select the HTML section. Now create a new command using the (+) button a the bottom of the command list. Name the command “Inline styles” and move on over to the right hand side of the command editor.

First, copy the following code to your new command replacing the default code TextMate generated for you.

#!/usr/bin/env ruby

require 'rubygems'
require 'tamtam'

html_doc = STDIN.read
html_filtered = TamTam.inline(:document => html_doc)
STDOUT.write html_filtered

For future reference, note how you read from and write back to Textmate with a command. STDIN maps to the command’s Input field selection in the Bundle Editor and the same for STDOUT.

Second, we are going to set the properties of the command. Set the input to “Entire Document” and output to “Replace Document.” If you find this too draconian, then set the output to “Create New Document.”

Lastly set the scope selector to “text.html” and click on another command to save your new command. Then close the Commands Editor.

Step 4: Test your new command

So before you are done, you want to test your new command to see that it works. Start by copying the following HTML snippet into a new TextMate document.

  TamTam Test


   .foo { font-color: blue; }
   .flank { font-size: 12pt;}



Woot 1.1

Woot 1.2

Change the document type to HTML by typing Ctrl-Option-Shift-H key. Position the cursor in the new window and choose Bundles > HTML > Inline Styles.

Your HTML document should now look like this:

	TamTam Test


	 .foo { font-color: blue; }
	 .flank { font-size: 12pt;}



Woot 1.1

Woot 1.2

That’s it. Good luck…