Jak na složité HTML e-maily?

Přidáno: 07.09.2008 v 15.08

Posíláte v e-mailech různé styly, velikosti či barvy písma? Vkládáte přímo do textu obrázky? Tak právě vy používáte HTML formátování e-mailů. Osobě mám tuto možnost ve svém klientovi zakázanou, ale občas musí člověk ustoupit, jít proti svému přesvědčení a projekt vypracovat.

Při posílání textových e-mailů se vyskytuje jediný problém s kódováním češtiny. Při UTF-8 kódování textu je úkol o něco obtížnější, ale PHP nám nabízí dostatek Multibyte String funkcí. Při vytváření HTML zpráv, které se mají zobrazit přímo v těle e-mailu (né jako příloha), je již zapotřebí dodržovat více pravidel.

Jak odesílat?

U textových e-mailů není nijak složité vytvořit si vlastní funkci. Pokud ale máte za úkol odesílat e-maily ve stylu klasické internetové stránky – je praktičtější využít již vytvořené funkcionality. Asi nejznámější je třída PHPMailer.

$mail = new PHPMailer(); $mail->IsHTML(true);

Jaké kódování?

Kódování češtiny v e-mailech byl vždy problém. Avšak nejvíce doporučovaným kódováním je ISO-8859-2. Pakliže máte stránky v jiném kódování doporučuji použít funkci iconv(), pokud ji váš hosting z nějakého důvodu nepodporuje, musíte využít převodní tabulky.

$mail->CharSet = 'ISO-8859-2'; $mail->Body = iconv('UTF-8', 'ISO-8859-2//TRANSLIT', $vystupMail); $mail->AltBody = iconv('UTF-8', 'ISO-8859-2//TRANSLIT', $vystupText);

Jak psát?

Jednalo se o mé první HTML e-maily, proto jsem se nejprve chtěl poučit z článků na internetu. Nakonec jsem ale stejně skončil u metody: „Pokus × Omyl.“

Mohu vložit obrázek přímo do textu?

Pro vložení obrázku využíváme standardní tag <img>. Obrázek můžeme stáhnout z jiného serveru zadáním absolutní adresy (http://) do atributu src, e-maily se ale duplicitně zobrazují bez těchto obrázků a uživatel musí jejich stažení ručně povolit. Druhou variantou je přiložit obrázek přímo do těla e-mailu zadáním cid:nazevCid do atributu src.

$mail->AddEmbeddedImage($cestaSouboru, $nazevCid, $nazevPriloha, 'base64', 'image/jpeg');

Mohu použít CSS (kaskádové styly)?

Kaskádové styly se mohou požívat, ale nesmí být externě z kódu. Doporučuji v co největší míře používat staré HTML formátování (<table>, <font>, …). Pokud musíte použít CSS, vkládejte jej přímo do HTML tagů pomocí atributu style. CSS také nezkracujte, pokud rozepíšete každý prvek, ušetříte si později trápení, proč nějaký text není odsazen apod. Pokud také použijete font-style a relativní jednotky, počítejte s tím, že výsledný text může mít různé velikosti – dle používaného programu.

<td style="padding-left: 10px; border-left-width: 5px; border-left-style: solid; border-left-color: #FF0000; ">hello world</td>

Mohu použít obrázek na pozadí?

Zde přišel kámen úrazu. Gmail zobrazuje pozadí nastavené atributem background v tabulce (obrázek se opakuje vždy na obou osách), pokud použijete background v CSS, ignoruje jej. Seznam reaguje přesně naopak. Kdo má čas, odzkoušejte si to – mě toto zjištění zabralo spousty času a testování. Výsledné řešení je vytvořit e-mail v tabulkách, využívat atributu background a připojit i CSS. Je to hrozné řešení, ale jediné účinné. Pro jistotu ještě jednou zopakuji, že background v HTML se opakuje na obou osách vždy, dbejte proto na správné sestavení tabulky. A nakonec, obrázek můžete volat buď externě či přes cid (viz výše).

<td width="200" height="50" background="cid:logo" bgcolor="#000000" style="background-color: #000000; background-image: url('cid:logo')">hello world</td>

Komentáře

frankosun

Ahoj,
mam jeden dotaz. Zacal jsem pouzivat phpmailer a nepodarilo se mi doposud zprovoznit to, abych pouzil embeded obrazek jako pozadi v <td> nebo <table> apod. Nesetkal jsi se s timto problemem nebo nevis nahodou, kde by mohl byt problem. Hledal jsem hodne na netu, ale bohuzel zadne reseni jsem nenasel.
Dekuju.

12.10.2010 v 22.42

Nový komentář

Navigace