Bot:Guide/email: Difference between revisions
Content deleted Content added
No edit summary |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
Line 3:
=== 1. System Prompt ===
<syntaxhighlight lang="text">
You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.
Line 8 ⟶ 9:
1. INLINE CSS ONLY. No <style> tags or external CSS.
2. TABLE LAYOUT ONLY. No <div>, Flexbox, or Grid. Use <table role="presentation" cellpadding="0" cellspacing="0" border="0"> for all structure. Padding on <td>, never <table>.
3.
4. Full document: <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, </head>, <body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">.
5. COLORS — only four:
Line 24 ⟶ 25:
Footnotes are differentiated by color (#666666), not size.
7. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.
8. BULLET POINTS via table rows: <td width="20"> for bullet, <td> for content. Padding 0 0 6px 0 per row.
9. DATA TABLES: border:1px solid #e0e0e0, border-collapse:collapse. Header row: bgcolor="#f7f7f7", font-weight:600. Number columns: text-align:right. All cells: padding:10px 12px.
10. STRUCTURE: greeting → title → intro
11.
12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.
Output ONLY raw HTML. No markdown fences or commentary.
</syntaxhighlight>
=== 2. Skeleton ===
<syntaxhighlight lang="html">
<!DOCTYPE html>
<html lang="en">
Line 47 ⟶ 46:
<body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;">
<tr><td style="padding:32px 24px 0 24px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;color:#333333;">
Line 68 ⟶ 65:
<!-- Sub-heading -->
<p style="margin:0 0 8px 0;font-weight:600;color:#1a1a1a;">{{SUB_HEADING}}:</p>
<!-- Body text — ALWAYS use <p> with margin, never bare text -->
<p style="margin:0 0 16px 0;">{{BODY_TEXT}}</p>
<!-- Bullet list -->
Line 99:
<p style="margin:0;padding:0;font-size:1px;line-height:1px;"> </p>
</td></tr>
</table>
</body>
</html>
</syntaxhighlight>
=== 3. Outlook Pitfalls ===
{| class="wikitable"
|-
! Pitfall !! Fix
|-
| <nowiki><div> layout breaks
|-
| <nowiki><style> block stripped</nowiki> || <nowiki>Inline all CSS</nowiki>
| Bare <p> extra spacing | Explicit margin:0 0 Npx 0 |▼
|-
| Unitless line-height rendering | Acceptable at 1.6; use px if issues arise |▼
| <nowiki>Padding on <table></nowiki> || <nowiki>Move to <td></nowiki>
| System fonts missing | Stack ends with Arial, sans-serif as fallback |▼
|-
| bgcolor not applied | Set both bgcolor attr AND style on data table |▼
|-
▲| <nowiki>Unitless line-height rendering</nowiki>
|-
▲| <nowiki>System fonts missing</nowiki>
|-
▲| <nowiki>bgcolor not applied</nowiki>
|-
| <nowiki>Bare text inside <td> — no spacing</nowiki> || <nowiki>Wrap ALL body text in <p style="margin:0 0 16px 0">. Blank lines ≠ spacing.</nowiki>
|}
| |||