Forum Bugs

Flex Child Text Overflowing When Long Words Present

We have "display: flex" and "flex-direction: column" set on a div that contains two paragraphs and an occasional image. The reason for the flex markup is that we always want the image first but often it is last in the content delivery so we place "order: -1" on the image so it will get rendered first. What we are seeing is that if we have a very long word (string of characters without breaks) we are able to force it to break but in so doing the "p" elements height does not get adjusted during this process in Prince thereby causing collisions between the class="message" and class="author-name" paragraphs.

This doesn't happen if the flex controls are not there and it doesn't happen in a browser. It sonly getting this behavior when it is processed in Prince. It appears as if the height and pagination is being set before or without considering how the "overflow-wrap: break-word" will effect it.

I have attached screen captures, the XHTML file and PDF
  1. SW_long-words_1203v3-template.pdf22.9 kB
    PDF output
  2. SW_long-words_1203v3-template.xhtml4.4 kB
    XHTML file
  3. browser-view.png195.2 kB
    File viewed in browser
  4. prince-output.png124.5 kB
    File output with Prince

Thanks for the bug report. This problem has been fixed in the latest build, but please let us know if you're still seeing any problems.

FYI: I was on 14.1 (Mac). I downloaded 14.2 and ran the exact same files that are attached and got the same results. I then did the candidate build #20211123 and the problem was fixed.

We are in production and experience this problem on current projects, can you tell me when you expect this candidate will be a dot release?

The fix will be included in Prince 15 next year, but the latest builds are stable and can be used in production, the "dot releases" are mostly to freeze functionality for backwards compatibility.