Page 1 of 1

Column count affecting TOC - HTML5 & CSS to PDF

Posted: Sat Jul 23, 2022 11:07 am
by InspectorSpacetime
Hello,

I'm using the HTML5 & CSS to PDF transformation with Oxygen 24.1, and working on a regular map, not a bookmap.

I need one of my chapters to have a two column layout, and I've managed to do this with CSS following these instructions: https://www.oxygenxml.com/doc/versions/ ... pages.html

However, as a result, the TOC entry for this particular chapter has been affected as well! The entry is on a separate page, so the TOC is broken in the middle. The TOC entry for this chapter also has the 2 column layout.

What am I doing wrong, or is this a bug?

Re: Column count affecting TOC - HTML5 & CSS to PDF

Posted: Mon Jul 25, 2022 11:56 am
by andrei_pomacu
Hi,

I tested in Oxygen 24.1 and seems that the problem does not occur in my setup.
Can you send a simplified example with your map and your css files in order to debug it to see where the problem is?

Regards,
Andrei

Re: Column count affecting TOC - HTML5 & CSS to PDF

Posted: Mon Jul 25, 2022 12:56 pm
by InspectorSpacetime
Hi Andrei,

My CSS looks like this:

Code: Select all

@page two_col_page {
	column-count: 2;
}

*[outputclass ~= "2col"] {
	page: two_col_page !important;
}
And I have configured my DITA Map like this:

Code: Select all

<topicref href="topics/general.dita" outputclass="2col">
        <topicref href="topics/about_the_tutorial.dita" outputclass="g_title" toc="no"/>
        <topicref href="topics/audience.dita" outputclass="g_title" toc="no"/>
        <topicref href="topics/prequisites.dita" outputclass="g_title" toc="no"/>
        <topicref href="topics/copyright_disclaimer.dita" outputclass="g_title" toc="no"/>
 </topicref>
And as a result the TOC looks like this:

Image

Re: Column count affecting TOC - HTML5 & CSS to PDF

Posted: Mon Jul 25, 2022 1:08 pm
by InspectorSpacetime
I inspected the merged.html file, and the TOC entry for this chapter also has the ”2col” class and outputclass. That’s probably what’s causing the problem.

So, using another selector besides * to target just the actual topic probably fixes it. Will try soon.

EDIT: Yes indeed, switching the CSS to this:

Code: Select all

article[outputclass ~= "2col"] {
	page: two_col_page !important;
}
fixed the problem. So "article" instead of "*" did the trick for me.