Oxygen XML Forum

Posted: **Mon Apr 08, 2024 5:29 pm**

Hello,

In my customization of Oxygen's PDF/CSS transformation, the .css puts a border around all block images in fig elements:

Code: Select all

*[class ~= "topic/fig"] *[placement="break"][class ~= "topic/image"]{
    margin-top:0;
    border: 1px solid black;
    padding: 1em;
}

For some images, the right border is rendered well to the right of the image, resulting in weird-looking white space. See the image in the pdf in the attached .zip.

The image is an svg, which is also in the attached zip. Here is the DITA markup for the fig/image:

Code: Select all

            <fig id="fig_rrx_wbq_m1c">
                <title>RAM Mount</title>
                <image placement="break" id="image_srx_wbq_m1c"
                    href="graphics/RAM-mount_install.svg">
                    <alt>Shows the RAM mount.</alt>
                </image>
            </fig>

How I can specify CSS that ensures the border does not include all the white space?

rendering-issue_svg-borders.zip

Posted: **Tue Apr 09, 2024 11:34 am**

Hello,

One solution could be to set the image width based on DITA-OT extracted image width:

Code: Select all

@namespace dita-ot url('http://dita-ot.sourceforge.net/ns/201007/dita-ot');

*[class ~= "topic/fig"] *[class ~= "topic/image"] {
  margin-top: 0;
  border: 1px solid black;
  padding: 1em;
}
*[class ~= "topic/image"][dita-ot|image-width] {
  width: attr(dita-ot|image-width px);
}

Regards,
Julien

Oxygen XML Forum

PDF/CSS transformation - width of images & borders

PDF/CSS transformation - width of images & borders

Re: PDF/CSS transformation - width of images & borders