HTML Styled Correctly But PDF Isn't

[carlisaac]

Hi there,

I'm using the DITA Map PDF - based on HTML & CSS transformation scenario with a customization. I'm trying to apply a two-column layout to a specific topic in the DITA Map, namely to the "terms and conditions" topic, which has been created with

Code: Select all

@outputclass="agb"

.

In my custom CSS file, I have the selector:

Code: Select all

article [class~="agb"] {

    page-break-before: always;

    column-count: 2;

    column-gap: 2em;

}

This displays the content of the topic in two columns in HTML as expected. However, the same content is rendered without any columns in the PDF output. Is there any way to troubleshoot this? I checked the information at https://www.oxygenxml.com/doc/versions/ ... e_css.html but didn't get anywhere with it.

Many thanks and apologies if this is a basic question!

Carl.

[Dan]

There are differences in the CSS support from Chemistry and a full Web Browser. For Chemistry, the column-count should be set on the @page, not on the matching element. Please use the following technique:
1. Define an outputclass on the topic root element. (as you already did)

Code: Select all

<topic outputclass="two_columns" ...

2. Define a CSS rule that changes the page property for the matching element.

Code: Select all

*[class ~= "two_columns"] {

  page: two_column_page !important;

}

3. Define a page layout.

Code: Select all

@page two_column_page {

  column-count: 2;

}

Please note that the topic will be separated by other sibling topics with different page layout by page breaks.

Many regards,
Dan

[carlisaac]

Hi Dan,

That worked perfectly. Many thanks for your help!

All the best,
Carl