Will Native PDF's CSS let me use a pseudo-class?

Question

In our DITA content, sometimes we have a <fig> with no <title> inside, and sometimes there's a title.

We move the title to the bottom, and so in the cases where a title is present in the <fig>, we want to give the <fig> element some padding at the bottom... but only in the cases where the <fig> has a <title>.

In the intermediate HTML, the <fig> becomes <figure>, and the <title> becomes <figcaption>.

So, in our CSS for making a Native PDF, I set up a very simple pseudo-class:

figure:has(figcaption) {
border: 0.5pt solid blue;
padding-bottom: 24pt;
}

...with the border there so I could see whether the element was being selected.

When I output the merged HTML and look at it in Chrome or Edge, this works fine. In the output PDF, however, this doesn't work. The element is not selected and is not formatted.

So, I'm wondering if there are any special considerations for using pseudo-classes in CSS with Native PDF... or alternatively, can you suggest a way to select the parent element when a figcaption element appears... but in a way that doesn't require ":has"?

Thanks,

Eric A.

vikchand · Answer

Hi Eric,

Currently Native PDF does not support :has pseudo selector, so this style won't work. Also we do not have any other CSS solution which would work in this situation. However you can achieve this using a combination of CSS and JavaScript. Follow the steps given below -

Step 1: Update the above style rule to use a class

.figure-with-caption {
  border: 0.5pt solid blue;
  padding-bottom: 24pt;
}

Step 2: Add the script given below in the toc layout under data-region="content" div

<script type="text/javascript">
      window.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('figcaption').forEach(function(caption) {
          caption.parentElement.classList.add('figure-with-caption')
        })
      })
</script>

NOTE: If you are not using TOC in your PDF then you can add it in any other layout which you are using.

Step 3: Enable JavaScript from the advanced tab of PDF preset settings.

Step4: Generate the output.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded