Place caption below image

anna_craneo · Post by **anna_craneo** » Wed May 16, 2018 6:24 pm

Hi,

I use CSS for my DITA->PDF transformation and would like to place image caption within the <fig> element below the image itself. I tried it this way but it does not work.

Code: Select all

/*

 This centers the title text and the image if the image has the 

 placement attribute set to inline. The inline placement is the the default.   

 */

*[class ~= "topic/fig"] {

  text-align: center;

   

}



/* Other images, with break placement. */

*[class ~= "topic/image"][placement = 'break'] {

  display: block;

  text-align: center;

  order: 1;

}



*[class ~= "topic/fig"] > *[class ~= "topic/title"]{

  font-style: italic;

  font-weight:normal;

  font-size: 12px;

  text-align: center;

  color:#A3A3A3;

  display: flex;

  flex-flow: column;

  order: 2;

}

Many thanks for any help

Post by **Dan** » Thu May 17, 2018 3:36 pm

Unfortunately the flex CSS layout is not supported by the Chemistry PDF processor.

I recommend making a change in the XSLT pipeline. Please locate the file "post-process.xsl" in your oXygen installation (the framewords/dita/DITA-OT2.x/plugins/com.oxygenxml.pdf.css/xsl folder) and add the following XSLT template:

Code: Select all




<xsl:template match="*[contains(@class,' topic/fig ')]">

    <xsl:copy>

      <xsl:copy-of select="@*" />

      <xsl:apply-templates select="*[not(contains(@class,' topic/title '))]" />

      <xsl:apply-templates select="*[contains(@class,' topic/title ')]" />

    </xsl:copy>

  </xsl:template>

In the next oXygen version we will add a new parameter to the WYSIWYG pdf-css transformation scenario: "figure.title.placement" with values "top" and "bottom". Until then, please use the above fix.

Many regards,
Dan

Kot_1977 · Post by **Kot_1977** » Mon Apr 19, 2021 3:50 pm

Hello,
I am using
oXygen XML Editor 22.1, build 2020100710
I tried to use the suggested solution for HTML Help out but it doesn't work.
The image title is displayed at the bottom left of the image in order: title, image on one line.
I tried to use command
flex-direction: column;
instead of
flex-flow: column;
but that doesn't work either.
Other image settings via my css are working.

Code: Select all

.fig {
display: flex ;
flex-direction: column ;
flex-wrap: nowrap ;
}
.image {
order : 1 ;
}
.figcap {    
order: 2 ;
}

Many thanks for any help

Post by **Radu** » Mon Apr 19, 2021 4:37 pm

Hi,

Can you give me more details about what type of output you obtain from DITA? By "HTML Help" do you mean Windows Help (CHM) or Oxygen WebHelp output? Or plain HTML5 that you customize further?

Regards,
Radu

Kot_1977 · Post by **Kot_1977** » Tue Apr 20, 2021 7:59 am

Hi!

I mean Windows Help (CHM).

Regards,
Yury

Post by **Radu** » Tue Apr 20, 2021 8:59 am

Hi Yuri,

CHMs contain inside HTML documents, you can use an utility like 7-zip to look inside a CHM.
From what I remember Windows help output is limited for compatibility reasons to a very old internet explorer version.
I think also the HTML documents inside the CHM have some metadata in the <head> specifying their compatibility, maybe changing that will help but the CHM viewer may still not interpret flex layouts.

Regards,
Radu

Place caption below image

Place caption below image

Re: Place caption below image

Re: Place caption below image

Re: Place caption below image

Re: Place caption below image

Re: Place caption below image