unsupported operand type(s) for -: 'str' and 'float'

[afzalIbnSH]

I' facing an unsupported operand type(s) for -: 'str' and 'float' error for the below CSS code;

    .class-name{
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      margin: 0 70px;
    }

particularly the height: 100%; line.

Full logs:

web_1    |   File "./companies/utils.py", line 35, in create_qr_code
web_1    |     "location-qr-code.pdf", ContentFile(HTML(string=html).write_pdf()), save=False,
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/__init__.py", line 208, in write_pdf
web_1    |     return self.render(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/__init__.py", line 166, in render
web_1    |     return Document._render(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/document.py", line 393, in _render
web_1    |     [Page(page_box, enable_hinting) for page_box in page_boxes],
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/document.py", line 393, in <listcomp>
web_1    |     [Page(page_box, enable_hinting) for page_box in page_boxes],
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/__init__.py", line 126, in layout_document
web_1    |     pages = list(make_all_pages(context, root_box, html, pages))
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/pages.py", line 804, in make_all_pages
web_1    |     page, resume_at = remake_page(i, context, root_box, html)
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/pages.py", line 741, in remake_page
web_1    |     page, resume_at, next_page = make_page(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/pages.py", line 551, in make_page
web_1    |     root_box, resume_at, next_page, _, _ = block_level_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 61, in block_level_layout
web_1    |     return block_level_layout_switch(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 75, in block_level_layout_switch
web_1    |     return block_box_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 128, in block_box_layout
web_1    |     block_container_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 504, in block_container_layout
web_1    |     collapsing_through) = block_level_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 61, in block_level_layout
web_1    |     return block_level_layout_switch(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 75, in block_level_layout_switch
web_1    |     return block_box_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 128, in block_box_layout
web_1    |     block_container_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 504, in block_container_layout
web_1    |     collapsing_through) = block_level_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 61, in block_level_layout
web_1    |     return block_level_layout_switch(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/blocks.py", line 90, in block_level_layout_switch
web_1    |     return flex_layout(
web_1    |   File "/usr/local/lib/python3.8/site-packages/weasyprint/layout/flex.py", line 796, in flex_layout
web_1    |     extra_cross_size = getattr(box, cross) - sum(
web_1    | TypeError: unsupported operand type(s) for -: 'str' and 'float'

The CSS is in the same file.

WeasyPrint version: 51.

[liZe]

Hello!

It’s probably a duplicate of #1006, could you test the current master branch or provide an HTML/CSS sample so that I can test?

[afzalIbnSH]

Hey :)

Thank you for looking into this. I tried with master, it doesn't work either. Please find below sample code that reproduces the problem:

<html>

<head>
  <title>Sample for WeasyPrint</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');
    @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
    .qr-page{
      display: flex;
      flex-wrap: wrap;
      height: 100%;
      margin: 0 70px;
    }
    .left-section{
      font-family: 'Open Sans';
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }
    .left-section .title-section{
      display: flex;
      flex-direction: column;
      width: 80%;
      height: 140px;
    }
    .left-section .title-section .company-name{
      color: #333333;
    }
    .left-section .title-section .heading{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 70px;
      font-size: 40px;
      font-weight: 700;
      margin-top: 20px;
    }
    .left-section .scan-txt{
      font: 24px/24px Open sans;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    .left-section .scan-txt i{
      margin-left: 25px;
    }
    .left-section .guidelines{
      width: 90%;
    }
    .left-section .guidelines .description{
      color: #333333;
    }
    .left-section .guidelines .procedure{
      display: flex;
      flex-direction: column;
      font-weight: 600;
      margin-top: 20px;
    }
    .right-section{
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .right-section .logo-container{
      width: 360px;
      text-align: end;
    }
    .right-section .logo-container .company-logo{
      width: 150px;
      height: 50px;
      margin-bottom: 50px;
    }
    .right-section .qr-container{
      width: 360px;
      height: 360px;
      border: 1px solid #B5BCC1;
      margin-bottom: 100px;
    }
    .right-section .qr-container .qr-code{
      width:360px;
      height:360px;
    }
    </style>
</head>
<body>
  <div class="qr-page">
    <div class="left-section">
      <div class="title-section">
        <label class="company-name">Name, Country</label>
        <label class="heading">YOU'RE AWESOME</label>
      </div>
      <div class="scan-txt">Scan this QR Code <i class="material-icons" style="font-size:48px;">east</i></div>
      <div class="guidelines">
        <label class="description">
          Blaa blaaaaaa bla blaaaaa blaaaaa blaaaaaa,
          Blaa blaaaaaa bla blaaaaa blaaaaa blaaaaaaa blaaaaaaa bla blaa blaa blaa,
          Blaa blaaaaaa bla
        </label>
        <div class="procedure">
          <label>1. Action 1</label>
          <label>2. Action 2</label>
          <label>3. Action 3</label>
          <label>4. Action 4</label>
        </div>
      </div>
    </div>
    <div class="right-section">
      <div class="logo-container">
        <!-- Company Logo -->
        <img
          src="logo_url"
          class="company-logo"
          alt="company logo"
        />
      </div>
      <div class="qr-container">
        <!-- QR Code -->
        <img
          id="barcode"
          src="qr_data_url"
          class="qr-code"
          alt="QR Code"
        />
      </div>
    </div>
  </div>
</body>

</html>

[liZe]

It’s fixed! Thanks a lot for the bug report and for the sample.

[afzalIbnSH]

Hey @liZe. Thank you. But the PDF conversion isn't correct. The process is not crashing now but the results are off. With the above sample, PFA the generated PDF.
weasyPrintGeneratedPDF.pdf

[liZe]

Hey @liZe. Thank you. But the PDF conversion isn't correct. The process is not crashing now but the results are off. With the above sample, PFA the generated PDF.

You’re right, and I’m really sorry for this awful rendering.

There’s a problem in the flex layout with percentages. Removing width and height in the two first CSS blocks (.qr-page and .left-section) gives an idea of what the right rendering would like if percentages were correctly supported.

Could you please open another issue with this problem? Thank you.

[afzalIbnSH]

You’re right, and I’m really sorry for this awful rendering.

There’s a problem in the flex layout with percentages. Removing width and height in the two first CSS blocks (.qr-page and .left-section) gives an idea of what the right rendering would like if percentages were correctly supported.

Could you please open another issue with this problem? Thank you.

I removed the percentages and used pixels. It's better now but still not correct. The right section is rendered below. Nevertheless, I'll file a new issue.

[afzalIbnSH]

Here: #1208 @liZe

[liZe]

I removed the percentages and used pixels. It's better now but still not correct. The right section is rendered below. Nevertheless, I'll file a new issue.

Here: #1208 @liZe

Thank you.