Inline-block ignores its padding/border/margin when calculating its max width

[mtkennerly]

This is a follow-up from #1234. Context:

• Using Pandoc to convert Markdown -> HTML -> PDF, with WeasyPrint as the --pdf-engine
• Markdown file: https://raw.githubusercontent.com/mtkennerly/playground/95ac6a3c30a5aa3300d337a2da807646462e20a1/docs/sample.md
• Pandoc invocations: https://github.com/mtkennerly/playground/blob/95ac6a3c30a5aa3300d337a2da807646462e20a1/.github/workflows/main.yaml#L18-L30

Using the latest WeasyPrint master code, the PDF does wrap long lines in code blocks, but each line is cut off prematurely, and there are some extra blank lines after the last wrapped line.

Documents produced by above Github workflow: samples2.zip

HTML:

PDF:

[mtkennerly]

As a workaround, I tried adding this to the Markdown:

<style type="text/css" scoped>
.sourceCode {
    white-space: pre-wrap !important;
}
</style>

Documents: samples3-inline-css.zip

In the HTML version, that gives me what I want:

However, the PDF is unchanged. It seems like the white-space rule is ignored:

[liZe]

Hello!

This problem is fun 😄.

Lines are split, but it’s not a bug, it’s a feature. The stylesheet from your document has this rule, that only applies for print:

  @media print {
    pre > code.sourceCode { white-space: pre-wrap; }
    pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em }
  }

The white-space: pre-wrap rule makes lines break, and it’s actually quite clever for print, because you won’t be able to scroll.

The second rule, text-indent: -5em; padding-left: 5em is a little bit more cryptic, but it’s actually a nice workaround: it makes normal lines be displayed normally (-5em, +5em) and makes cut lines displayed with a 5em indentation (indent only applies to the first line of a block). The normal result is pretty nice (from a browser with print rules forced enabled):

We have a bug in WeasyPrint. The spans, displayed as inline blocks, have a content width of 100%, ignoring their left padding (that should set their size to 100% - 5em instead, to have a padding-box width of 100%). So, the text is 5em too wide, making it disappear on the right.

I’ll try to create a very small example showing the problem.

[liZe]

<span style="background: red; display: inline-block; margin: 0 100px">a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h a b c d e f g h </span>

[liZe]

The result is really nice 😍! Very interesting way to display pre tags for print, thanks a lot for reporting this issue.