Formatting pre-formatted text

Question

I have a Unix Shell script which produces a plain text report. Horizontal alignment is achieved by inserting spaces so that the output appears to be in columns in the terminal.

Caption        Caption          Caption
--------       --------         --------
Line 1         value 1          value 2
Line 2         value b          bla bla
Line 3         value 1          value 2
Line 4         value b          bla bla

The report is automated to run regularly and a copy is sent via email. To make the formatting look right in a mail client I set the content-type to HTML and added <PRE> pre-formatting tags around the entire message content.

This works well enough. However I would like to highlight certain lines, eg by changing the font to set the text and background color. How could I best do that?

I can replace the <PRE>...</PRE> with a span to set a Mono-width font but how do I retain the blank spaces to keep the column/table appearance?

I tried to use actual HTML tables but this only works in some mail clients, in others the same message is illegible because most of the text becomes strung out in a very narrow (1 to 3 characters wide) very tall column. Also setting formatting options on table attributes behave wildly different between the few email clients that I have available for my own testing!

Answer 1

If you wish per-line control of the rendered text you should consider some kind of automation on your Shell script in order to include the proper code in the output. A good option is to create an html file which can then be sent like an email template or which pre-formatted text you can simply copy/paste from your browser to your email client's message compositing window.

Something like this can work:

CSS:

.title {
    color: #00f;
}

.yellow {
    color: #f00;
    background: #ff0;
}

.green {
    color: #00f;
    background: #0f0;
}

.red {
    color: #ff0;
    background: #f00;
}

HTML:

<pre>Hello world!</pre>
<pre class="title">Caption        Caption          Caption</pre>
<pre>--------       --------         --------</pre>
<pre class="regular">Line 1         value 1          value 2</pre>
<pre class="yellow">Line 2         value b          bla bla</pre>
<pre class="green">Line 3         value 1          value 2</pre>
<pre class="red">Line 4         value b          bla bla</pre>

The result:

Try it here: http://jsfiddle.net/geppettvs/etycazov/

You can define as many styles as you wish and instructing your Shell script will do the work for you if you drop the results in a file.html in order to create the web contents you wish to share.

Good luck!