CSS-PDF: Sizing images inside a table

mdslup
Posts: 142
Joined: Tue Mar 06, 2018 1:34 am

CSS-PDF: Sizing images inside a table

Post by mdslup » Thu Jul 09, 2020 12:55 am

Using Oxygen 22, CSS-based PDF.

In my customization CSS, I have this rule, which works.

*[class ~= "table/image"] {
max-width: 1.5in;
}*/

Here's an example DITA where this works:

Code: Select all

          <step id="JPlugFastenersX">
                <cmd>Use a H15 bit to remove the 4 screws that secure the J-Plug housing.</cmd>
                <info>
                    <note>Retain all removed fasteners. Each screw also is secured with a nut, a
                        split washer, and a flat washer.</note>
                </info>
                <stepxmp><image href="Images/TopLid/JPFasteners.jpg" id="image_a1y_bxg_rjb"
                    /></stepxmp>
            </step>
            
However, in some cases, I need to show 2 images inside a stepxmp. To do this, I create a 1-row table and put each image as a cell in the table. Here is the DITA:

Code: Select all

 <step>
                <cmd>Remove and discard the housing from the J-Plug. Position the J-Plug facing
                    up.</cmd>
                <stepxmp>
                    <table
                        frame="all"
                        rowsep="1"
                        colsep="1"
                        id="table_wtv_3xg_rjb">
                        <tgroup
                            cols="2"
                            align="center">
                            <colspec
                                colname="c1"
                                colnum="1"
                                colwidth="1*"/>
                            <colspec
                                colname="c2"
                                colnum="2"
                                colwidth="1*"/>
                            <tbody>
                                <row>
                                    <entry><image
                                            href="Images/TopLid/JPHousing.jpg"
                                            id="image_oyd_jxg_rjb"/></entry>
                                    <entry><image
                                            href="Images/TopLid/JHousing2.jpg"
                                            id="image_z1k_jxg_rjb"/></entry>
                                </row>
                            </tbody>
                        </tgroup>
                    </table>
                </stepxmp>
            </step>

On webhelp responsive, it looks like this: https://i.imgur.com/Gp37cC3.jpg

But in my PDF output, the max-size rule is not being applied in this case. See this: https://i.imgur.com/63Pej1f.jpg

I looked at the merged HTML file to see if images inside a table were given a different class attribute, but they seem the same.

Here is the merged HTML for an image NOT inside a table:

<img class="- topic/image image" href="file:/C:/GitDocs/ProductionRig/Images/TopLid/JPFasteners.jpg" id="unique_5_Connect_42_image_a1y_bxg_rjb" nd:nd-id="image_a1y_bxg_rjb" placement="inline" src="file:/C:/GitDocs/ProductionRig/Images/TopLid/JPFasteners.jpg">

And here is the merged HTML for an image that IS inside a table:

<img class="- topic/image image" href="file:/C:/GitDocs/ProductionRig/Images/TopLid/JPHousing.jpg" id="unique_5_Connect_42_image_oyd_jxg_rjb" nd:nd-id="image_oyd_jxg_rjb" placement="inline" src="file:/C:/GitDocs/ProductionRig/Images/TopLid/JPHousing.jpg">

I would expect BOTH of these to be caught by the topic/image CSS rule above. But something is off. Can anyone provide some guidance?

julien_lacour
Posts: 99
Joined: Wed Oct 16, 2019 3:47 pm

Re: CSS-PDF: Sizing images inside a table

Post by julien_lacour » Thu Jul 09, 2020 9:30 am

Hello,

The following rule cannot apply on either PDF or WebHelp output

Code: Select all

*[class ~= "table/image"] {
    max-width: 1.5in;
}
As this class attribute value does not exist in DITA.

Instead, if you change the rule to

Code: Select all

*[class ~= "topic/image"] {
    max-width: 1.5in;
}
You images should fit inside the table.

Regards,
Julien

mdslup
Posts: 142
Joined: Tue Mar 06, 2018 1:34 am

Re: CSS-PDF: Sizing images inside a table

Post by mdslup » Fri Jul 10, 2020 1:01 am

Hi,


I'm very sorry, that was a typo.

*[class ~= "topic/image"] {
max-width: 1.5in;
}

is *exactly* what my rule says! And my problem (as stated in original post...all other parts of the original post are correct, except for that typo), is that this rule is NOT respected when the images are inside a table. Do you need me to send you a sample to reproduce this?

julien_lacour
Posts: 99
Joined: Wed Oct 16, 2019 3:47 pm

Re: CSS-PDF: Sizing images inside a table

Post by julien_lacour » Mon Jul 13, 2020 2:49 pm

Hello,

I'm sorry it seems there is a problem as you indicated.
I logged an issue on our tracking system and I'll get back to you as soon as a fix will be available.

Regards,
Julien

Post Reply