Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML5 parser issue with a messy HTML code #7356

Closed
StefanGebhardt opened this issue Apr 30, 2020 · 9 comments
Closed

HTML5 parser issue with a messy HTML code #7356

StefanGebhardt opened this issue Apr 30, 2020 · 9 comments
Labels
bug C: Mail view
Milestone
1.5-rc

Comments

@StefanGebhardt
Copy link

Hi, some html-mail are not shown in a correct way in round cube, gute in other clients they are no problem.

Example in file
xing.txt
@alecpl
Copy link
Member

alecpl commented Apr 30, 2020

What version? Could you explain what is not correct? Or provide a screenshot of expected output?

@StefanGebhardt
Copy link
Author

Hi, its in version 1.4.3
I added a screenshot from rainloop as exampled for correct rendering. Same in outlook etc.
I difference the screenshot from roundcube

If I can support with more details, feel free to ask
Thanks,
Stefan

rainloop

roundcube

@StefanGebhardt
Copy link
Author

By the way: problem occurs in all three skins

@alecpl
Copy link
Member

alecpl commented May 1, 2020

If I disable HTML5 parser it displays correctly. So, might be a bug in the parser or the content has some quirks that make it fail. The layout is created using tables. There's also a lot of special control comments for IE. The HTML code is a mess, we'll have to create a smaller sample to find out what's really wrong there.

@alecpl alecpl changed the title html-mails not rendered correct HTML5 parser issue with a messy HTML code May 1, 2020
@alecpl alecpl added this to the later milestone May 1, 2020
@ghost
Copy link

ghost commented Dec 12, 2020

Having a similar experience.

Here is the code I'm using:

<html>
<body style="background-color:#f6f6f6;word-wrap:break-word;-webkit-nbsp-mode:space;line-break:after-white-space;text-align:center;">
<div role="article" aria-label="A email from example.com" lang="en" style="color:rgb(43,43, 43);font-family:'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';font-size:18px;line-height:28px;margin:0px auto;max-width:720px;padding:40px 20px;">
<header>
<a href="#" target="_blank" style="color:rgb(0, 0, 0);font-weight:600;">
<center>
<img alt="logo" border="0" style="display:block;max-width:100%;min-width:100px;" apple-inline="yes" href="#">
</center>
</a>
<h1 style="font-size:32px;line-height:32px;color:rgb(0, 0, 0);margin:0px;margin-top:48px;margin-bottom:48px;">HEADER<br><span style="font-size:24px;">DATE</span></h1>
</header>
<main>
<article>
<img alt="mail" border="0" style="border:0px;line-height:18px;outline:none;border-top-left-radius:4px;border-top-right-radius:4px;display:block;max-width:100%;min-width:100px;" apple-inline="yes" src="#">
<div style="background-color:white;border-bottom-left-radius:4px;padding:1rem;margin:0px;margin-bottom:48px;">
<h2 style="color:rgb(0, 0, 0);font-size:28px;line-height:32px;margin:0px;margin-top:24px;margin-bottom:24px;">TITLE</h2>
<p>Dear EXAMPLE,</p>
<p>EXAMPLE MESSAGE</p>
<p>Sincerely, <br>EXAMPLE</p>
<small>This is an automated message please do not reply.</small>
</div>
</article>
</main>
<footer>
<div style="margin:0px;margin-top:24px;margin-bottom:24px;">
<ul style="display:inline;list-style:none;padding:0;">
<li style="display:inline;">
<a title="instagram" href="#" target="_blank" style="background-image:url('');background-size:contain;background-repeat:no-repeat;background-position:center;font-size:16px;line-height:24px;text-decoration: none;">
<span style="visibility:hidden;">Twitter</span>
</a>
</li>
<li style="display:inline;">
<a title="instagram" href="#" target="_blank" style="background-image:url('');background-size:contain;background-repeat:no-repeat;background-position:center;font-size:16px;line-height:24px;text-decoration: none;">
<span style="visibility:hidden;">Tumblr</span>
</a>
</li>
<li style="display:inline;">
<a title="facebook" href="#" target="_blank" style="background-image:url('');background-size:contain;background-repeat:no-repeat;background-position:center;font-size:16px;line-height:24px;text-decoration: none;">
<span style="visibility:hidden;">Facebook</span>
</a>
</li>
</ul>
</div>
<p style="font-size:16px;line-height:24px;">
You received this message because you previously expressed interest in news and offers from <strong>example.com</strong> by supplying this email address.
Other names may be trademarks of their respective owners.
</p>
<p style="font-size:16px;line-height:24px;">Don't worry, you can <a href="#" style="color:rgb(0, 0, 0);font-size:16px;line-height:24px;">unsubscribe</a>, but who knows what you'll miss out on!</p>
<address style="font-size:16px;font-style:normal;line-height:24px;">
<a href="#" target="_blank" style="color:rgb(0, 0, 0);font-size:16px;line-height:24px;">Terms & Policies</a>&nbsp;|&nbsp;Operated in Canada
</address>
</footer>
</div>
</body>
</html>

@ghost
Copy link

ghost commented Dec 12, 2020 •
edited by ghost

Disabling the HTML5 parser the code is fine. FYI

Using Roundcube 1.4.9, PHP 7.4.3, and Safari Version 14.0.1 (16610.2.11.51.8)

@alecpl
Copy link
Member

alecpl commented Feb 7, 2021

@thekodester The HTML code you provided displays the same with and without HTML5 parser for me. I see no difference. So, create a new ticket with full message source and some screenshots.

@alecpl
Copy link
Member

alecpl commented Feb 7, 2021 •
edited

I've found an invalid (?) code in the original HTML content. Simplified test case is:

<table id="t1">
  <tr>
    <td>
      <table id="t2">
        <tr>
        <tr>
          <td></td>
        </tr>
        </tr>
      </table>
    </td>
  </tr>
  <tr><td></td></tr>
</table>

Note the <tr> element as a child of another <tr>. This causes HTML5 parser to output:

<table id="t1">
  <tr>
    <td>
      <table id="t2">
        <tr></tr>
        <tr>
          <td></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<tr><td></td></tr>

Which obviously is invalid and causes the parent table to be "closed" before it should.

Now, knowing this, a simple workaround could be added:

$html = str_replace('<tr><tr>', '<tr>', $html);
$html = str_replace('</tr></tr>', '</tr>', $html);

and I confirm it fixes the issue. However, I'm not sure yet this is the way we should follow.

@alecpl alecpl modified the milestones: later, 1.5-rc Feb 7, 2021
@alecpl alecpl mentioned this issue Feb 7, 2021
Open
alecpl added a commit that referenced this issue Apr 5, 2021
@alecpl
Fix HTML5 parser issue with a messy HTML code from Outlook (#7356)
2f42fa2
@alecpl
Copy link
Member

alecpl commented Apr 5, 2021

A workaround applied. Fixed.

@alecpl alecpl closed this as completed Apr 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug C: Mail view
Projects
None yet
Milestone
1.5-rc
Development

No branches or pull requests
2 participants
@alecpl @StefanGebhardt