We're dealing with more inline images and the problem we face is the comma after an inline-image breaks to next line.

paragraph of text paragraph of text paragraph of text <inline-img>
, paragraph of text paragraph of text paragraph of text paragraph of text

We want to keep comma on the previous line, so line break should not be triggered before a comma.

Sample test files attached

Kindly let us know how to handle this situation?

1. demo.zip‎ 81.3 kB ‎
   Contains: img, input html & output pdf

At the moment I think it may be necessary to wrap image and comma within a span and apply "white-space: nowrap" to the span. Perhaps in future this can be achieved by using the word-joiner character.

Thanks for your response, but I don't an easy automated way to wrap those inside span.

You could do it with JavaScript: first check the img element, see if it is followed by a text node that begins with comma, if so split the text node into two, then wrap the img + comma in a span with the appropriate style.

Okay, I will give it a try.

I got the js to wrap span tag around inline-image and comma, but couldn't figure out a way to pass the js in cmd. My js doesn't seem to work (not getting the css red border)

Prince.trackBoxes = true;
Prince.addEventListener("complete", function(event){
  imageComma();
});

And passing fixcomma.js using below command line:

prince.exe --javascript --script="fixcomma.js" index.html -o index.pdf

And CSS:

span.keep-img-comma{
  white-space: nowrap;
  border:1px solid red;      
}

Questions: On prince documentation, its stated that the script will be triggered only after layout, so will the html changes done using the js will take effect?

Please suggest?

Edited 13 Dec 2018 by shivaram

I think you don't need to use the "complete" event or trackBoxes for this, you can just call imageComma() from window.onload and it will be run before layout.

ok, thank you