PDF/WebHelp CSS formatting of table captions

[chrispitude]

I am finding that table captions are difficult to style with CSS!

Consider a case where:

• The CSS styling moves figure and table captions 0.5in to the left.
• Caption text might sometimes be long.

The PDF Chemistry output for figure/table captions is as follows:

table_caption_pdf.png (23.24 KiB) Viewed 1003 times

The figure caption flows fine, but the table caption is wrapped at the table width. (The XSL-FO PDF transformation uses the full width for the caption text.)

The WebHelp output for figure/table captions is as follows:

table_caption_webhelp.png (19.5 KiB) Viewed 1003 times

Somehow the left side of the table caption is clipped. In addition, if I make the browser window narrower (to emulate a tablet or cellphone), the caption text is unwrappable due to a "white-space: nowrap" applied by topic.css, resulting in a scroll bar for only the caption! And that property is there to prevent table captions from wrapping to narrow table widths. So, the choice for table captions seems to be either too-narrow table titles or too-wide table titles.

The troublemaker here is CSS itself; PDF Chemistry and WebHelp are simply following the rules.

My questions are,

1. For PDF and WebHelp output, is there a CSS trick for table captions to naturally use the available width, as figure captions do?
2. For WebHelp output, is there a CSS trick to prevent left-shifted table captions from being clipped?

For #2, interestingly the merged HTML from PDF Chemistry does not clip the caption, but I haven't figured out the CSS setting that makes that happen.

Testcase (publish the "project.xml" file):

table_captions.zip

(29.26 KiB) Downloaded 138 times

[chrispitude]

topic.css also applies the following property:

Code: Select all

.simpletable-container, .table-container, .tablenoborder {
  overflow-x: auto;
}

If I set this to "visible" instead of "auto", then the left-shifted caption is no longer clipped, but the scroll bar disappears and the table title renders rightward out of the frame.

This provides somewhat usable behavior, although narrow tables look silly forced to 100%:

Code: Select all

/* ADDED */
.table-container {
 overflow-x: visible;  /* don't clip caption on left */
}

caption {
 white-space: normal;  /* wrap long captions at table width */
}

.table {
 width: 100%;  /* force table width to 100% */
}

[Dan]

For PDF I recorded an issue to see how we can control the size or behavior of the caption relative to the table. Testing with the integrated tool from https://developer.mozilla.org/en-US/doc ... nt/caption I see that the browser is wrapping the caption relative to the grid size, but we will check this further.
The standard XSL-FO transformation uses the FOP processor that has no support for fo:table-caption, and the DITA caption element is probably converted to a normal block.

[chrispitude]

Thanks Dan, I'd appreciate any further useful information in this area. We are moving to WebHelp, and so I am reviewing our CSS to see how it can be modularized between the Oxygen editor, PDF Chemistry, and WebHelp.

It's frustrating because PDF Chemistry and WebHelp (i.e. browser rendering) are just following the CSS rules, and it's the table/caption rendering rules themselves that are problematic. I've been hoping for some magic combination of CSS properties that would decouple the table caption from its table prison, but I have not discovered it yet!

[beniamin_savu]

Hi,

For WebHelp the following CSS rule was introduced so that tables that are very large do not exceed the topic content container. Thus a horizontal scroll is added at the bottom of the table.

Code: Select all

.simpletable-container, .table-container, .tablenoborder {
   overflow-x: auto;
}

The <caption> element is inside the container that has the overflow-x:auto property and unfortunately the text will not render if it is displayed outside of this container.

In case your tables contains only text, based on the CSS you provided a possible workaround for the WebHelp output can be:

Code: Select all

/* ADDED */
.table-container {
    overflow-x: visible;  /* don't clip caption on left */
}

caption {
    white-space: normal;  /* wrap long captions at table width */
}

.table {
    max-width: 100%; /* the table will not exceed more than topic container space, but will not be forced to fill all 100% of the space */
    word-break: break-word; /* it may be needed to break the words that contains a lot of characters  */
}

Best regards,
Beniamin Savu
Oxygen WebHelp Team
http://www.oxygenxml.com