Problems with custom CSS image borders for PDF HTML5&CSS output
Posted: Fri Oct 06, 2023 3:37 pm
Hi there! I am using a PDF transformation style that I've downloaded from https://styles.oxygenxml.com/ for my DITA content.
I am trying to add a black border to all images via a custom CSS file that I reference in the Parameters tab during the transformation.
This is the only thing I have in that custom CSS:
The border appears, but it doesn't apply correctly in the PDF output.
For images narrower than the width of the page, it creates a border that is as wide as the page, filling the top, right, and bottom sides between the border and the image with empty white space as if some sort of padding.
Here's an example: https://imgur.com/94S2nJf
If I specify the width for the image in its attributes, the border applies correctly to the sides with almost no space, but the top and the bottom of the image still get white padding: https://imgur.com/a/irNLkWV
If I specify the height for the image, it only removes the white space at the bottom. https://imgur.com/a/BpnkumA
Inspecting it closely, it actually looks like the image is offset down in relation to its border, overlapping it at the bottom.
So, when I specify the height and width simultaneously, it still leaves a 1px white padding at the top while going a bit over the border at the bottom.
On top of that, I cannot reproduce and debug that behavior with the .merged.html file from the same output because the border applies without any issues there - the issue appears only in the pdf file from the same output.
I am trying to add a black border to all images via a custom CSS file that I reference in the Parameters tab during the transformation.
This is the only thing I have in that custom CSS:
Code: Select all
*[class ~= "topic/image"] {
border: 1px black solid;
}For images narrower than the width of the page, it creates a border that is as wide as the page, filling the top, right, and bottom sides between the border and the image with empty white space as if some sort of padding.
Here's an example: https://imgur.com/94S2nJf
If I specify the width for the image in its attributes, the border applies correctly to the sides with almost no space, but the top and the bottom of the image still get white padding: https://imgur.com/a/irNLkWV
If I specify the height for the image, it only removes the white space at the bottom. https://imgur.com/a/BpnkumA
Inspecting it closely, it actually looks like the image is offset down in relation to its border, overlapping it at the bottom.
So, when I specify the height and width simultaneously, it still leaves a 1px white padding at the top while going a bit over the border at the bottom.
On top of that, I cannot reproduce and debug that behavior with the .merged.html file from the same output because the border applies without any issues there - the issue appears only in the pdf file from the same output.