2

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!

  • 1
  • Can't you wrap the lines you want to highlight in <span>s and set the appropriate inline style? Or perhaps <b> (or <strong>) in case the inline style is not honoured. – MrWhite Feb 5 '15 at 16:17
  • Tags like <span>, <b>, and <strong> cannot be used inside <PRE>...</PRE> tags. I don't know what will happen if I use something like <b><pre>Text Line Here</pre></b> – Johan Feb 5 '15 at 17:00
  • You have it back to front... yes you can use <span>, <b> and <strong> elements inside a <pre> element. You can use any inline element inside a <pre>, but you cannot use block-level elements, so your example <b><pre>Text Line Here</pre></b> would be invalid. – MrWhite Feb 5 '15 at 17:07
  • @w3d That's why YOU are the guy with the 9k rep. – Johan Feb 5 '15 at 17:20
2

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:

formatted text

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!

| improve this answer | |
  • I like your suggestion, I'll try it tomorrow. My HTML / CSS skills are very basic, so it didn't occur to me to add styles to the PRE tag itself. I won't change the report generation script to add any tags to its output, but the task that runs to send the email can process the report to format the message as HTML. – Johan Feb 5 '15 at 16:56
  • You may need to use background-color rather than background for better email client support. Ref: campaignmonitor.com/css – MrWhite Feb 5 '15 at 17:17
  • 1
    Your answer and the comments by @w3d led me to the solution. I'm still using a single set of PRE....PRE tags, but including background-color inside of these on individual lines. For some reason I thought/assumed all HTML markup inside PRE tags will be rendered in the browser. Note though that the CSS must be inline for better Email client support. – Johan Feb 10 '15 at 6:26
  • Good to know you found a workaround and this has been useful for you. Yes, you can embed the CSS inline or, you can point your CSS to an online server, which can do the work for you. In first instance we should consider that people will need an Internet connection in order to read the emails, so the email client can gather the CSS from wherever you place it. Nevertheless, inline CSS can also be useful for offline work. :) – Geppettvs D'Constanzo Feb 10 '15 at 20:18
  • "point your CSS to an online server" - several webmail/email clients do not support linking to an external stylesheet. And any security software the user has installed could actively block it. – MrWhite Feb 11 '15 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.