Place caption below image

Having trouble installing <oXygen/>? Got a bug to report? Post it all here.
anna_craneo
Posts: 33
Joined: Tue Feb 20, 2018 2:51 pm

Place caption below image

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

Dan
Posts: 485
Joined: Mon Feb 03, 2003 10:56 am

Re: Place caption below image

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
Posts: 13
Joined: Thu Dec 10, 2020 11:00 am

Re: Place caption below image

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

Radu
Posts: 7579
Joined: Fri Jul 09, 2004 5:18 pm

Re: Place caption below image

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

Kot_1977
Posts: 13
Joined: Thu Dec 10, 2020 11:00 am

Re: Place caption below image

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

Hi!

I mean Windows Help (CHM).

Regards,
Yury

Radu
Posts: 7579
Joined: Fri Jul 09, 2004 5:18 pm

Re: Place caption below image

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
Radu Coravu
<oXygen/> XML Editor
http://www.oxygenxml.com

Post Reply