【HTML】テキストの縦ラインがずれる問題

cakePHP2でメール送信をする機能を作成していた時に、同じ文章を送っているのに端末によってメールのレイアウトがずれていて 修正につまってしまいました。

事象

■端末A

■端末B

こんな感じに、縦がずれてしまいました。

原因

端末Aと端末Bで受け取るメーラーが異なり、表示フォントの違いが原因でした。

詳細

フォントには「等幅フォント」と「プロポーショナルフォント」の2種類あります。

等幅フォントとは、文字の幅が均一であるフォントです。 それに対して、文字によって幅が異なるフォントがプロポーショナルフォントです。 可変幅フォントとも言うそうです。

端末Aの画像はくだもの名のところ、文字の幅が同じですが、端末Bではずれているのがわかります。

解決策

今回はメールを送ろうとしていたので、テキスト形式のメールではなくhtml形式でメールを送り、 フォントを指定することで解決しました。

<?php 
$Email = new CakeEmail();
$Email ->emailFormat('html');
?>

emailFormatをhtmlに設定してあげて、htmlコードで本文を送信すればOKです。 WindowsとMacで搭載しているフォントが異なるので、そこだけ注意。