Place Image Captions Below Images

[SunNadimpalli01]

Hello,

I am using oXygenXML Editor v17.0, build 2015043018.

Code: Select all

<fig id="fig_cxh_nbl_ks">

                    <title>Image Title</title>

                    <image href="image-file-name.png"

                        id="image_dxh_nbl_ks">

                        <alt>Image Alt</alt>

                    </image>

                </fig>

When I generate a webhelp out, the figure title appears above the image. Is there way to move the image title below the image without editing the dita2htmlImpl.xsl file. I would prefer not edit the default XSL files.

And (Possibly a stupid question) Can this be done using CSS?

[bogdan_cercelaru]

Hello,

Unfortunately you cannot change the position of the image title without editing the XSL file.
As a workaround you can change the position of the image using the following CSS3 rules in a custom CSS file. Please note that this is not supported in older browsers.

Code: Select all

.fig {

    display: flex;

    flex-flow: column;

    -webkit-flex-flow: column;

    -moz-flex-flow: column;

}

.figcap {

    order: 2;

}

.image {

    order: 1;

}

To use a custom CSS file, set the "args.css" parameter to the path of your custom CSS file. Also, set the "args.copycss" parameter to "yes" to automatically copy your custom CSS in the output folder.
WebHelp System Output / Customizing WebHelp Systems / Customizing WebHelp Output with a Custom CSS

Regards,
Bogdan

[SunNadimpalli01]

Hello Bogdan,

Thank you, that did make the Figure caption appear below the image and I could see the changed position in IE 11, Chrome and Firefox.

The problem that I faced is that the image gets stretched all the across the width of the screen. From what I read this seems to be a problem with the css3 flex itself.

Do you know of any way to fix the image stretching all the way across the width of the parent element?

[bogdan_cercelaru]

Hello,

To keep the image scale you must set the "scale" attribute on the image in DITA topic.

Regards,
Bogdan