DITA to PDF Using HTML5 and CSS: Table Row Breaks

patjporter
Posts: 13
Joined: Sat May 22, 2021 6:04 pm

DITA to PDF Using HTML5 and CSS: Table Row Breaks

Post by patjporter » Sun Oct 10, 2021 7:08 pm

Hello,

I have been studying your Oxygen PDF Chemistry user guide and researching on the internet, but I cannot figure out how to prevent rows from breaking across a page. Can you help me understand what to set in the CSS to prevent this (a row should start on the next page if it is going to break across a page):
Screen Shot 2021-10-10 at 11.58.27 AM.png
Screen Shot 2021-10-10 at 11.58.27 AM.png (108.73 KiB) Viewed 107 times

I added this to the CSS but that did not prevent the page break:

/*prevent-table-row-page-break*/
@media print {
row {
page-break-inside: avoid;
}
}

Also, how would I add more padding between a table and the top of the page?

Thanks!
Pat

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

Re: DITA to PDF Using HTML5 and CSS: Table Row Breaks

Post by Dan » Mon Oct 11, 2021 2:01 pm

There are some examples here:
https://www.oxygenxml.com/doc/versions/23.1/ug-pdf-css/
https://www.oxygenxml.com/doc/versions/ ... e_breaking

I will add an example specific to the rows.

First of all, the elements from DITA topics are transformed into HTML elements that preserve the default DITA class attributes. For example the <row> element in your topic has the default class attribute "- topic/row" and it is transformed into HTML as a <td class="- topic/row row"/>. Thus you cannot match it with a simple element selector using the original DITA name, like:

Code: Select all

row {
  page-break-inside: avoid;
}
Instead you have to use:

Code: Select all

*[class ~= "topic/row"] {
  page-break-inside: avoid;
}
Since we forbid all page breaks inside the row, the contents will be "glued" togehter. Please make sure the contents of your rows does not exceed the height of the page, otherwise the row bleeds out of the page.

Many regards,
Dan

Post Reply