Mobile app version of vmapp.org
Login or Join
Martha676

: Formatting pre-formatted text 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

@Martha676

Posted in: #Email #Html

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!

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Martha676

1 Comments

Sorted by latest first Latest Oldest Best

 

@Harper822

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: 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!

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme