Bot:Guide/email - Revision history

Wikilah admin at 04:03, 2 April 2026

2026-04-02T04:03:43Z

← Older revision		Revision as of 12:03, 2 April 2026
Line 9:		Line 9:
	1. INLINE CSS ONLY. No <style> tags or external CSS.		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>.		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. ~~OUTER~~ table: width="100%", background #FFFFFF. ~~INNER~~ ~~table:~~ ~~width="680"~~ ~~(attribute)~~, ~~centered~~ ~~with~~ ~~align="center"~~.		3. Single content table: width="100%", background #FFFFFF, left-aligned. No centering wrapper — this is a conversational email, not a newsletter.
	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%;">.		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:		5. COLORS — only four:
Line 46:		Line 46:
	<body style="margin:0;padding:0;background-color:#ffffff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;">		<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;">		<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#ffffff;">
	<tr><td align="center" style="padding:0;">
	<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="680" style="max-width:680px;width:100%;margin:0 auto;">
	<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;">		<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 101:		Line 99:
	<p style="margin:0;padding:0;font-size:1px;line-height:1px;"> </p>		<p style="margin:0;padding:0;font-size:1px;line-height:1px;"> </p>
	</td></tr>		</td></tr>
	</table>
	</td></tr>
	</table>		</table>
	</body>		</body>
Line 113:		Line 109:
	\|-		\|-
	! Pitfall !! Fix		! Pitfall !! Fix
	\|-
	\| <nowiki>max-width ignored</nowiki> \|\| <nowiki>Set width="680" as attribute</nowiki>
	\|-		\|-
	\| <nowiki><div> layout breaks</nowiki> \|\| <nowiki>Use <table>/<td> only</nowiki>		\| <nowiki><div> layout breaks</nowiki> \|\| <nowiki>Use <table>/<td> only</nowiki>

Wikilah admin at 03:04, 2 April 2026

2026-04-02T03:04:01Z

← Older revision		Revision as of 11:04, 2 April 2026
Line 28:		Line 28:
	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.		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 → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.		10. STRUCTURE: greeting → title → intro → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.
	11. No <p> ~~without~~ explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.		11. CRITICAL — NO BARE TEXT: Every block of body text MUST be wrapped in <p style="margin:0 0 16px 0">. Never output bare text directly inside a <td>. Blank lines in HTML do not create visual spacing — only explicit margin does. Every <p> must have an explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.
	12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.		12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.

Line 67:		Line 67:
	<!-- Sub-heading -->		<!-- Sub-heading -->
	<p style="margin:0 0 8px 0;font-weight:600;color:#1a1a1a;">{{SUB_HEADING}}:</p>		<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 -->		<!-- Bullet list -->
Line 126:		Line 129:
	\|-		\|-
	\| <nowiki>bgcolor not applied</nowiki> \|\| <nowiki>Set both bgcolor attr AND style on data table header</nowiki>		\| <nowiki>bgcolor not applied</nowiki> \|\| <nowiki>Set both bgcolor attr AND style on data table header</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>
	\|}		\|}

Wikilah admin at 02:35, 2 April 2026

2026-04-02T02:35:23Z

← Older revision		Revision as of 10:35, 2 April 2026
Line 111:		Line 111:
	! Pitfall !! Fix		! Pitfall !! Fix
	\|-		\|-
	\| max-width ignored \|\| Set width="680" as attribute		\| <nowiki>max-width ignored</nowiki> \|\| <nowiki>Set width="680" as attribute</nowiki>
	\|-		\|-
	\| <div> layout breaks \|\| Use <table>/<td> only		\| <nowiki><div> layout breaks</nowiki> \|\| <nowiki>Use <table>/<td> only</nowiki>
	\|-		\|-
	\| <style> block stripped \|\| Inline all CSS		\| <nowiki><style> block stripped</nowiki> \|\| <nowiki>Inline all CSS</nowiki>
	\|-		\|-
	\| Padding on <table> \|\| Move to <td>		\| <nowiki>Padding on <table></nowiki> \|\| <nowiki>Move to <td></nowiki>
	\|-		\|-
	\| Bare <p> extra spacing \|\| Explicit margin:0 0 Npx 0		\| <nowiki>Bare <p> extra spacing</nowiki> \|\| <nowiki>Explicit margin:0 0 Npx 0</nowiki>
	\|-		\|-
	\| Unitless line-height rendering \|\| Acceptable at 1.6; use px if issues arise		\| <nowiki>Unitless line-height rendering</nowiki> \|\| <nowiki>Acceptable at 1.6; use px if issues arise</nowiki>
	\|-		\|-
	\| System fonts missing \|\| Stack ends with Arial, sans-serif as fallback		\| <nowiki>System fonts missing</nowiki> \|\| <nowiki>Stack ends with Arial, sans-serif as fallback</nowiki>
	\|-		\|-
	\| bgcolor not applied \|\| Set both bgcolor attr AND style on data table header		\| <nowiki>bgcolor not applied</nowiki> \|\| <nowiki>Set both bgcolor attr AND style on data table header</nowiki>
	\|}		\|}

Wikilah admin at 02:33, 2 April 2026

2026-04-02T02:33:33Z

← Older revision		Revision as of 10:33, 2 April 2026
Line 3:		Line 3:
	=== 1. System Prompt ===		=== 1. System Prompt ===

			<syntaxhighlight lang="text">
	You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.		You are an expert email developer. Generate raw HTML for a clean, minimalist analysis email.

Line 24:		Line 25:
	Footnotes are differentiated by color (#666666), not size.		Footnotes are differentiated by color (#666666), not size.
	7. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.		7. SEPARATORS: <table> with <td style="border-top:1px solid #e0e0e0"> between major sections. Use sparingly.
	8. BULLET POINTS via table rows:		8. BULLET POINTS via table rows: <td width="20"> for bullet, <td> for content. Padding 0 0 6px 0 per row.
	<tr>
	<td width="20" valign="top" style="...;padding:0 0 6px 0;">•</td>
	<td valign="top" style="...;padding:0 0 6px 0;">Content <sup style="font-size:12px;color:#666666;">[1]</sup></td>
	</tr>
	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.		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 ~~paragraph~~ → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.		10. STRUCTURE: greeting → title → intro → separator → sections with sub-headings and bullets → separator → data table → separator → forward-looking content → separator → footnotes (color:#666666, font-style:italic for disclaimer) → sign-off.
	11. No <p> without explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.		11. No <p> without explicit margin (margin:0 0 Npx 0). No images, buttons, preheader, or unsubscribe row — this is an internal analysis email.
	12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.		12. Inner table padding: 32px 24px top/sides, generous vertical spacing (28px) between sections.

	Output ONLY raw HTML. No markdown fences or commentary.		Output ONLY raw HTML. No markdown fences or commentary.
			</syntaxhighlight>

	=== 2. Skeleton ===		=== 2. Skeleton ===

			<syntaxhighlight lang="html">
	<!DOCTYPE html>		<!DOCTYPE html>
	<html lang="en">		<html lang="en">
Line 104:		Line 103:
	</body>		</body>
	</html>		</html>
			</syntaxhighlight>

	=== 3. Outlook Pitfalls ===		=== 3. Outlook Pitfalls ===

			{\| class="wikitable"
	\| Pitfall \| Fix \|
			\|-
	\|---------------------------------\|------------------------------------------------\|
			! Pitfall !! Fix
⚫	\| max-width ignored \| Set width="680" as attribute \|
			\|-
⚫	\| <div> layout breaks \| Use <table>/<td> only \|
		⚫	\| max-width ignored \|\| Set width="680" as attribute
⚫	\| <style> block stripped \| Inline all CSS \|
			\|-
⚫	\| Padding on <table> \| Move to <td> \|
		⚫	\| <div> layout breaks \|\| Use <table>/<td> only
⚫	\| Bare <p> extra spacing \| Explicit margin:0 0 Npx 0 \|
			\|-
⚫	\| Unitless line-height rendering \| Acceptable at 1.6; use px if issues arise \|
		⚫	\| <style> block stripped \|\| Inline all CSS
⚫	\| System fonts missing \| Stack ends with Arial, sans-serif as fallback \|
			\|-
⚫	\| bgcolor not applied \| Set both bgcolor attr AND style on data table \|
		⚫	\| Padding on <table> \|\| Move to <td>
			\|-
		⚫	\| Bare <p> extra spacing \|\| Explicit margin:0 0 Npx 0
			\|-
		⚫	\| Unitless line-height rendering \|\| Acceptable at 1.6; use px if issues arise
			\|-
		⚫	\| System fonts missing \|\| Stack ends with Arial, sans-serif as fallback
			\|-
		⚫	\| bgcolor not applied \|\| Set both bgcolor attr AND style on data table header
			\|}

Wikilah admin at 02:31, 2 April 2026

2026-04-02T02:31:17Z

Show changes

Wikilah admin: Created page with "== AI HTML Email Generation Spec == === 1. System Prompt === You are an expert email developer. Generate raw HTML for a branded email. RULES: 1. INLINE CSS ONLY. No