web-dev-qa-db-ja.com

事前にフォーマットされたテキストのフォーマット

プレーンテキストレポートを生成するUnixシェルスクリプトがあります。出力が端末の列に表示されるようにスペースを挿入することにより、水平方向の配置が実現されます。

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

レポートは定期的に実行されるように自動化され、コピーが電子メールで送信されます。メールクライアントで書式設定を正しく行うために、content-typeをHTMLに設定し、メッセージコンテンツ全体に<PRE>事前書式設定タグを追加しました。

これは十分に機能します。ただし、フォントを変更してテキストと背景色を設定するなど、特定の行を強調表示したいと思います。どうすればそれを最高にできますか?

<PRE>...</PRE>をスパンに置き換えてモノ幅フォントを設定できますが、列/テーブルの外観を維持するために空白スペースを保持するにはどうすればよいですか?

実際のHTMLテーブルを使用しようとしましたが、これは一部のメールクライアントでのみ機能し、他のテキストではほとんどのテキストが非常に狭い(1〜3文字の幅)非常に高い列で取り消されるため、判読できません。また、テーブル属性の書式設定オプションの設定は、自分のテストに使用できるいくつかのメールクライアント間で大きく異なります。

2
Johan

レンダリングされたテキストを行ごとに制御する場合は、適切なコードを出力に含めるために、シェルスクリプトで何らかの自動化を検討する必要があります。適切なオプションは、HTMLファイルを作成し、それをメールテンプレートのように送信するか、ブラウザからメールクライアントのメッセージ合成ウィンドウに単純にコピー/貼り付けできる書式設定済みのテキストを作成することです。

このような何かが動作することができます:

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>

結果:

formatted text

ここで試してください: http://jsfiddle.net/geppettvs/etycazov/

必要な数のスタイルを定義することができ、共有したいWebコンテンツを作成するためにfile.htmlに結果をドロップする場合、シェルスクリプトに指示して作業を行います。

幸運を!