Avalonia.HtmlRenderer
Avalonia.HtmlRenderer copied to clipboard
AvaloniaUI
Invalid rendering of the html
I am using HtmlPanel to render html content of the mail.
Here is how email looks within gmail:
And here it is within panel
And here is further bit down:
panel:
gmail:
- I can't get content to be centered
- Paddings on both content & buttons seems not to work
- This huge vertical spacing happens to appear out of nowhere
Here is pure html from given adobe content:
<HTML><HEAD></HEAD><BODY>
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<link rel="icon" href="https://www.adobe.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="https://www.adobe.com/favicon.ico" type="image/x-icon">
<meta name="x-apple-disable-message-reformatting">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
<title>Adobe</title>
<!--[if mso]>
<style type="text/css">
body, table, td {
font-family:Helvetica Neue, Helvetica, Verdana, Arial, sans-serif !important;
}
</style>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style type="text/css">
@import url("https://use.typekit.net/onr8tbr.css");
@media (prefers-color-scheme: dark)
.ReadMsgBody { width:100%;}
.ExternalClass {width:100%;}
table {border-collapse:collapse; margin:0 auto;}
a, a:visited {color:#1473E6; text-decoration:none;}
.legal a {text-decoration:underline;}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important;}
.mobile {border-spacing:0;display:none!important;height:0;max-height:0;mso-hide:all;overflow:hidden;visibility:hidden;width:0;}
@media only screen and (max-width:480px) {
u ~ div {
min-width:100vw;
}
div > u ~ div {
min-width: 100%;
}
.web {
display:none !important;
}
.mobile {
display:block !important;
width:auto !important;
overflow:visible !important;
height:auto !important;
max-height:inherit !important;
font-size:18px !important;
line-height:26px !important;
visibility:visible !important;
}
.email-width {
width:84% !important;
}
.full-width {
width:100% !important;
}
.mobile-image {
height:auto !important;
width:100% !important;
}
.social {
float:left !important;
padding-top:66px !important;
text-align:left !important;
}
.header {
font-size:40px !important;
line-height:46px !important;
}
}
</style>
</head>
<body bgcolor="#E4E4E4" style="background-color:#E4E4E4; margin:0; padding:0;-webkit-font-smoothing:antialiased;width:100% !important;-webkit-text-size-adjust:none;" topmargin="0"><div style="font-size:1px; color:#E4E4E4; display:none; overflow:hidden; visibility:hidden;">Get into your creative flow with apps like Photoshop and Illustrator. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
<table width="100%" bgcolor="#E4E4E4" style="background-color:#E4E4E4;" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td>
<table class="full-width" align="center" width="600" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;">
<tr>
<td bgcolor="#ffffff" style="background-color:#ffffff;">
<!-- pod1 -->
<table class="email-width" align="center" width="500" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:500px;">
<tr>
<td style="color:#2C2C2C; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:18px; line-height:26px; padding-top:50px;">
<table align="left" width="auto" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:left;">
<tr>
<td valign="middle" style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:14px; line-height:20px;"><img alt="" src="https://landing.adobe.com/dam/global/images/creative-cloud.icon.240x234.png" width="30" height="auto" border="0" hspace="0" vspace="0" style="display:block; vertical-align:top;"/></td>
<td width="10" style="width:10px;"> </td>
<td valign="top" style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:14px; line-height:20px;"><img alt="Adobe Creative Cloud" src="https://s7d9.scene7.com/is/image/AdobeDemandCreative/?fmt=png-alpha&size=400,60&wid=400&textAttr=144,strong&resolution=200&textPs=%7B%5C*%5Ciscolortbl%3B000000%3B%5Cfonttbl%7B%5Cf0%20Adobe%20Clean%20ExtraBold%3B%7D%7D%5Cf0%5Cfs40%5Csl-400%5Cvertalc%5Ckerningoptical%5Ccf1Adobe%20Creative%20Cloud" width="195" height="30" border="0" hspace="0" vspace="0" style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:14px; line-height:20px; display:block; vertical-align:top;"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="header" style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:46px; line-height:50px; padding-top:66px;"><strong>Great design starts here.</strong></td>
</tr>
<tr>
<td style="color:#2C2C2C; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:18px; line-height:26px; padding-top:20px;">Create anything — from logos and posters to product packaging — with the leading design apps built to work together, like Adobe Photoshop and Illustrator.</td>
</tr>
<tr>
<td style="color:#1473E6; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:16px; line-height:20px; padding-top:40px; padding-bottom:60px;"><!--[if gte mso 9]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:40px; v-text-anchor:middle; width:200px;" arcsize="50%" stroke="f" fillcolor="#1473E6">
<v:textbox style="mso-fit-shape-to-text:t">
<center style="color:#ffffff; font-family:Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:16px;">
<![endif]-->
<a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00dd&e=cDE9YWRvYmUuY29tL2NyZWF0aXZlY2xvdWQvcmVuZXcvcmVzdWJzY3JpYmUtcHJvbW8tY2NpLmh0bWw_Y29udGV4dC5ndWlkPWQyNDAxOTE1LTFlYTYtNGZmOC1iYWYzLWQzMDFjMGM1MDhmOCZjb250ZXh0LmluaXQ9ZmFsc2UmcDI9VlkzNkpXRjE&s=HLbXjes4Kq9rp7Aqn3ZTeC8J_RlPYKqsR-cVCKGERk0" target="_blank" style="background-color:#1473E6;border-radius:20px;color:#ffffff;display:inline-block;font-size:16px;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;"><strong>Renew Now</strong></a>
<!--[if gte mso 9]>
</center>
<p style="margin:0; font-size:0; line-height:0;"><o:p xmlns:o="urn:schemas-microsoft-com:office:office"> </o:p></p>
</v:textbox>
</v:roundrect>
<![endif]-->
</td>
</tr>
</table>
<!-- END pod1 -->
<!-- pod1 marquee -->
<table class="full-width" align="center" width="600" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;">
<tr>
<td style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:22px; line-height:28px;"><a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00de&e=cDE9YWRvYmUuY29tL2NyZWF0aXZlY2xvdWQvcmVuZXcvcmVzdWJzY3JpYmUtcHJvbW8tY2NpLmh0bWw_Y29udGV4dC5ndWlkPWQyNDAxOTE1LTFlYTYtNGZmOC1iYWYzLWQzMDFjMGM1MDhmOCZjb250ZXh0LmluaXQ9ZmFsc2UmcDI9VlkzNkpXRjE&s=0UjQnjK5zgX_jv8yhsFwXaPLWLW9VfAljOxokXqcalg" target="_blank" style="color:#1473E6;"><img class="mobile-image"
alt="Adobe Creative Cloud"
src="https://landing.adobe.com/content/dam/landing/2023/images/cc-winback-content-refresh23/cc-winback-wwen-em4-1200x1200.jpg"
srcset="https://landing.adobe.com/content/dam/landing/2023/images/cc-winback-content-refresh23/cc-winback-wwen-em4-1200x1200.jpg 621w,
https://landing.adobe.com/content/dam/landing/2023/images/cc-winback-content-refresh23/cc-winback-wwen-em4-1200x1200.jpg 1200w"
sizes="(max-width: 480px) 50vw"
width="600" height="auto"
border="0" hspace="0" vspace="0" style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:22px; line-height:28px; display:block; vertical-align:top;"/>
</a></td>
</tr>
</table>
<!-- END pod1 marquee -->
<!-- END email content -->
</td>
</tr>
<tr>
<td bgcolor="#F5F5F5" style="background-color:#F5F5F5;">
<!-- banner -->
<table class="full-width" align="center" width="600" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;">
<tr>
<td style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:16px; line-height:20px;"><img class="mobile-image"
alt="Creativity for all."
src="https://landing.adobe.com/dam/global/images/creativity-for-all.footer.desktop.1200x600.png"
srcset="https://landing.adobe.com/dam/global/images/creativity-for-all.footer.mobile.800x600.png 621w,
https://landing.adobe.com/dam/global/images/creativity-for-all.footer.desktop.1200x600.png 1200w"
sizes="(max-width: 480px) 50vw"
width="600" height="auto"
border="0" hspace="0" vspace="0" style="color:#000000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:16px; line-height:20px; display:block; vertical-align:top;"/></td>
</tr>
</table>
<!-- END banner -->
<!-- logo & social -->
<table class="email-width" align="center" width="500" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:500px;">
<tr>
<td valign="middle" style="padding-top:50px;">
<div style="font-size:0;">
<!--[if mso]>
<table class="email-width" align="center" width="500" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:500px;"><tr><td align="left" valign="middle" width="50%">
<![endif]-->
<div style="display:inline-block; vertical-align:middle; width:50%; min-width:250px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width:calc(50%);">
<!-- left -->
<table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td style="color:#EB1000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:12px; line-height:18px;"><img alt="Adobe" src="https://landing.adobe.com/dam/global/images/adobe-logo.classic.160x222.png" width="30" height="auto" border="0" hspace="0" vspace="0" style="color:#EB1000; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:12px; line-height:18px; display:block; vertical-align:top;"/></td>
</tr>
</table>
<!-- END left -->
</div>
<!--[if mso]>
</td><td align="right" valign="middle" width="50%">
<![endif]-->
<div style="display:inline-block; vertical-align:middle; width:50%; min-width:250px; max-width:100%; width:-webkit-calc(230400px - 48000%); min-width:-webkit-calc(50%); width:calc(230400px - 48000%); min-width:calc(50%);">
<!-- right -->
<table class="social" align="right" width="auto" border="0" cellpadding="0" cellspacing="0" role="presentation" style="float:right;">
<tr>
<td style="color:#959595; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:12px; line-height:12px;"><a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00df" alias="Facebook" target="_blank"><img class="social" alt="Facebook" src="https://landing.adobe.com/dam/global/images/social/facebook.959595.png" width="10" height="auto" border="0" hspace="0" vspace="0" style="display:block; vertical-align:top;"/></a></td>
<td width="30" style="width:30px;"> </td>
<td style="color:#959595; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:12px; line-height:12px;"><a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00e0" alias="Instagram" target="_blank"><img class="social" alt="Instagram" src="https://landing.adobe.com/dam/global/images/social/instagram.959595.png" width="18" height="auto" border="0" hspace="0" vspace="0" style="display:block; vertical-align:top;"/></a></td>
<td width="30" style="width:30px;"> </td>
<td style="color:#959595; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:12px; line-height:12px;"><a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00e1" alias="Twitter" target="_blank"><img class="social" alt="Twitter" src="https://landing.adobe.com/dam/global/images/social/twitter.959595.png" width="20" height="auto" border="0" hspace="0" vspace="0" style="display:block; vertical-align:top;"/></a></td>
</tr>
</table>
<!-- END right -->
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</div>
</td>
</tr>
</table>
<!-- END logo & social -->
<!-- legal-->
<table class="email-width" align="center" width="500" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:500px;">
<tr>
<td class="legal" style="color:#959595; font-family:adobe-clean, Helvetica Neue, Helvetica, Verdana, Arial, sans-serif; font-size:11px; line-height:18px; padding-top:50px; padding-bottom:100px;">Adobe, the Adobe logo, Creative Cloud, the Creative Cloud logo, and Document Cloud are either registered trademarks or trademarks of Adobe in the United States and/or other countries.<br/><br/>
This is not a comprehensive list of Adobe trademarks. For a full list, refer to the <a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00e2" alias="FOOTER - Trademark Guidelines" target="_blank" style="color:#959595;">Adobe Trademark Guidelines</a>. All other trademarks are the property of their respective owners.<br/><br/>
This is a marketing email from Adobe, 345 Park Avenue, San Jose, CA 95110 USA. Click here to <a style="TEXT-DECORATION: underline; COLOR: #a1a1a1" href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00e3&e=cDE9JTQwNzhoeVpEdFlRQWU3eGpCMWJmNWhJSVpqTXBDRlQyeEVYWEtoUXgyZTU4USUzRCZwMj0mbG9jPWVuJnAzPTI0&s=mFo7eEmh6RI61CJbvQZljc9CDo5D8zD4EIDMq7fdoDc" target="_blank" class="opt_out" alias="Unsubscribe" _type="optout" _label="Opt-out link">unsubscribe</a>. Please review the <a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00e4" alias="FOOTER - Privacy Policy" target="_blank" style="color:#959595;">Adobe Privacy Policy</a>.<br/><br/>
To ensure email delivery, add <a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00e5" alias="Add to address book - [email protected]" target="_blank" style="color:#959595;">[email protected]</a> to your address book, contacts, or safe sender list.
<br/><br/><a href="https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,855f00e6&e=cDE9JTQwVHYyMEpqdCUyQjJNV0dZcTQwVm85NEs3aWVZU0piYmhFMU40NiUyQlkwT2xTUnclM0Q&s=bONBSKBJz7C07tdGTThSj1TpL9DbY8bjaajw14wI_Q4" alias="Read Online" target="_blank" style="color:#959595;">Read online</a></td>
</tr>
</table>
<!-- END legal-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<img height='0' width='0' alt='' src='https://t-trg.email.adobe.com/r/?id=h663a0cbf,8f1e1149,1'/><img height='0' width='0' alt='' src='https://adobe.demdex.net/event?c_syncplacement=email&d_cid=813%0119C944985B9F4D1A0A495D31'/></BODY></HTML>
Black background for some reason while in email it is white (or transparent)