Problems with custom CSS image borders for PDF HTML5&CSS output

[leop]

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:

Code: Select all

*[class ~= "topic/image"] {
    border: 1px black solid;
   }

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.

[andrei_pomacu]

Hi,
I could not reproduce your problem using Oxygen 25.1, in Windows.
Could you tell me which Oxygen version are you using?
Regards,
Andrei

[leop]

Hi! This is <oXygen/> XML Author 25.1, build 2023070306 (evaluation version) on MacOS Sonoma 14.0

[andrei_pomacu]

Hi,

The problem is that the image if is placed in a figure element, will inherit line-height from other elements.
If you set the line-height to 0 it should work.

Code: Select all

*[class ~= "topic/image"] {
  border: 1px black solid;
  line-height: 0;
  font-size: 0;
}

Regards,
Andrei

[leop]

Thanks, that fixed the issue with the height. But the problem with the width being a full page on the PDF output remains...
If I put the image under a figure tag, the same thing happens, but just in the bounds of the figure instead of the full page width.

[andrei_pomacu]

Hi,

This problem could occur because you have placement=break on your images.
Please, remove this attribute from your images. It should not change the position of your figures in the documentation.

Regards,
Andrei

[leop]

Hi! Yes, thank you, this fixed everything! Problem solved.