I have a div styled with 2 columns.
In the div is a paragraph that is styled to begin with a small background image
The background image is styled to "no-repeat".
The paragraph begins in the first column and then breaks into the second column
In a Chrome browser, the image appears in column 1 only.
In a PrinceXML (version 13.5) PDF, the image is repeated at the start of the text in column 2.
Can you help with a workaround? Will an update to v15 fix this?
Also, I have never understood how to inspect the rendered code from PrinceXML. Let me know how to find this. Thanks!
HTML:
<div class="tu-bible-passage-text">
<p class="tu-image-affirmation"> Let us, then .... (this text begins in column 1 and ends in column 2)
CSS:
.tu-bible-passage-text {
text-align: justify;
text-indent: 20px;
column-count: 2;
hyphens: none;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}
.tu-image-affirmation {
padding: 0px 0px 0px 25px;
background-image: url("../wings-common-files/affirmation.gif");
background-repeat: no-repeat;
text-indent: 0px;
}
In the div is a paragraph that is styled to begin with a small background image
The background image is styled to "no-repeat".
The paragraph begins in the first column and then breaks into the second column
In a Chrome browser, the image appears in column 1 only.
In a PrinceXML (version 13.5) PDF, the image is repeated at the start of the text in column 2.
Can you help with a workaround? Will an update to v15 fix this?
Also, I have never understood how to inspect the rendered code from PrinceXML. Let me know how to find this. Thanks!
HTML:
<div class="tu-bible-passage-text">
<p class="tu-image-affirmation"> Let us, then .... (this text begins in column 1 and ends in column 2)
CSS:
.tu-bible-passage-text {
text-align: justify;
text-indent: 20px;
column-count: 2;
hyphens: none;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
hyphenate-limit-last: always;
hyphenate-limit-zone: 8%;
}
.tu-image-affirmation {
padding: 0px 0px 0px 25px;
background-image: url("../wings-common-files/affirmation.gif");
background-repeat: no-repeat;
text-indent: 0px;
}