Oxygen XML Forum

Posted: **Wed Mar 02, 2016 9:41 am**

Hello,

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




<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?

Posted: **Thu Mar 03, 2016 10:06 am**

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

Posted: **Thu Mar 03, 2016 1:34 pm**

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?

Posted: **Thu Mar 03, 2016 4:23 pm**

Hello,

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

Regards,
Bogdan

Oxygen XML Forum

Place Image Captions Below Images

Place Image Captions Below Images

Re: Place Image Captions Below Images

Re: Place Image Captions Below Images

Re: Place Image Captions Below Images