Table overflow issue #2325

kesara · 2024-12-09T09:46:05Z

This was tested in WeasyPrint version 62.3 and WeasyPrint version 63.0.
This happens when overflow-wrap is set to break-word or normal. anywhere seems to work fine.

Input:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Table with Links</title>
  <style>
    table {
      width: 100%;
      max-width: 10px;
      border: 1px solid black;
      overflow-wrap: break-word; /* or normal */
    }

    th td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }

    a {
      margin-right: 8px;
      text-decoration: none;
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Example 1</h1>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>
          <a href="https://example.org">123.456.78</a>,
          <a href="https://example.org">234.567.89</a>,
          <a href="https://example.org">345.678.90</a>
        </td>
      </tr>
    </tbody>
  </table>
  <h1>Example 2</h1>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>
          <a href="https://example.org">foooooobar</a>,
          <a href="https://example.org">foooooobar</a>,
          <a href="https://example.org">foooooobar</a>
        </td>
      </tr>
    </tbody>
  </table>
  <h1>Example 3</h1>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>
          <a href="https://example.org">S 123.456.78</a>,
          <a href="https://example.org">S 234.567.89</a>,
          <a href="https://example.org">S 345.678.90</a>
        </td>
      </tr>
    </tbody>
  </table>
  <h1>Example 3</h1>
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>
          <a href="https://example.org">S foooooobar</a>,
          <a href="https://example.org">S foooooobar</a>,
          <a href="https://example.org">S foooooobar</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Weasyprint PDF rendering:

Firefox rendering:

The text was updated successfully, but these errors were encountered:

kesara · 2024-12-09T09:55:21Z

Better example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0">
  <title>Table with Links</title>
  <style>
    table {
      width: 100%;
      border: 1px solid black;
    }

    .brwd {
      overflow-wrap: break-word;
    }

    .nrml {
      overflow-wrap: normal;
    }

    .anywhere {
      overflow-wrap: anywhere;
    }
  </style>
</head>
<body>
  <h1>overflow-wrap: normal</h1>
  <table class="nrml">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>
          <a href="https://example.org">foooooooooooooooobar</a>,
          <a href="https://example.org">foooooooooooooooobar</a>,
          <a href="https://example.org">foooooooooooooooobar</a>
        </td>
      </tr>
    </tbody>
  </table>
  <h1>overflow-wrap: break-word</h1>
  <table class="brwd">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>
          <a href="https://example.org">foooooooooooooooobar</a>,
          <a href="https://example.org">foooooooooooooooobar</a>,
          <a href="https://example.org">foooooooooooooooobar</a>
        </td>
      </tr>
    </tbody>
  </table>
  <h1>overflow-wrap: anywhere</h1>
  <table class="anywhere">
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Links</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>Data foooooooooobar</td>
        <td>
          <a href="https://example.org">foooooooooooooooobar</a>,
          <a href="https://example.org">foooooooooooooooobar</a>,
          <a href="https://example.org">foooooooooooooooobar</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

table_1.pdf

liZe · 2024-12-09T21:09:42Z

This bug is caused by a dirty workaround that has been hidden since… 2013.

WeasyPrint/weasyprint/layout/preferred.py

Line 317 in 3c6f9a5

if minimum and child_text == b' ':

Here, during minimum size calculation, we break the line if we only have a space, because, well, spaces are a very common way to break lines. So:

if we have only a space between tags, minimum size works thanks to this hack,
if we have text with a space inside between tags, it works because the line can be split by split_first_line,
if we have text with a space only at the beginning/end of the text between tags, it fails.

For example, your sample works without the comma between a tags, or with "a a" instead of the comma. With , , it fails.

It only fails with layouts where the minimum size is required (tables and floats for example), but it works for other full-width layouts thanks to the "real" algorithm:

WeasyPrint/weasyprint/layout/inline.py

Lines 744 to 758 in 3c6f9a5

    
           can_break = None 
        
           if last_letter is True: 
        
               last_letter = ' ' 
        
           elif last_letter is False: 
        
               last_letter = ' '  # no-break space 
        
           elif box.style['white_space'] in ('pre', 'nowrap'): 
        
               can_break = False 
        
           if can_break is None: 
        
               if None in (last_letter, first): 
        
                   can_break = False 
        
               elif first in (True, False): 
        
                   can_break = first 
        
               else: 
        
                   can_break = can_break_text( 
        
                       last_letter + first, child.style['lang'])

Just as for this code, we should get track of the letters at tags boundaries to detect possible line breaks correctly, or even reuse the real algorithm, but that would much more complicated, and probably much slower.

Or we can just replace the current hack that worked until now by another one that will hopefully work for the next 11 years.

kesara · 2024-12-10T09:39:19Z

Yeah, I noticed that this doesn't happen when there's in-between a tags and a tag text has spaces.
It is one of those edge cases.

Fixes Kozea#2325

Related to Kozea#2325.

kesara mentioned this issue Dec 9, 2024

Content of table column is cut off ietf-tools/xml2rfc#1110

Closed

1 task

liZe added the bug Existing features not working as expected label Dec 9, 2024

kesara added a commit to kesara/WeasyPrint that referenced this issue Dec 10, 2024

Fix table overflow edge cases

910efca

Fixes Kozea#2325

kesara mentioned this issue Dec 10, 2024

Fix table overflow edge cases #2326

Merged

liZe added a commit to kesara/WeasyPrint that referenced this issue Dec 10, 2024

Improve workaround for line break detection

5d36cf5

Related to Kozea#2325.

liZe closed this as completed in #2326 Dec 15, 2024

liZe added this to the 64.0 milestone Dec 15, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Table overflow issue #2325

Table overflow issue #2325

kesara commented Dec 9, 2024

kesara commented Dec 9, 2024

liZe commented Dec 9, 2024

kesara commented Dec 10, 2024

Table overflow issue #2325

Table overflow issue #2325

Comments

kesara commented Dec 9, 2024

kesara commented Dec 9, 2024

liZe commented Dec 9, 2024

kesara commented Dec 10, 2024