Why doesn't Adobe Acrobat XI Pro convert the below HTML code correctly when I try to create a PDF from it?
I've simplified the actual code significanly in order to present the problem in its simplest possible form. The code below uses the CSS "counter" feature to modify <li> elements according to a specific pattern. This code enumerates and indents every third line in the progression 1,4,7,10,13, ...
In Firefox and Internet Explorer, this code is displayed correctly, but Acrobat XI Pro ignores the lines with the "nth-child(3n+1)" selector which contain directives to hide line enumeration on non-matching lines and to indent text on matching lines. Acrobat XI Pro instead displays line enumeration for all lines and doesn't indent text on any line, as if the two directives containing the "nth-child(3n+1)" selector were not present at all.
Is this a bug or is it an unsupported feature in Adobe Acrobat XI Pro?
Whichever the case, any suggestions on a not too labourious alternative method to achieve the same result?
As things are, I've been forced to resort to using the so called "poor man's nth-child selector" workaround (abouthalf.com/development/poor-mans-nth-child-selector-for-ie-7-and- 8/), which requires manual specification of each line's content with ever-increasing code extension/repetition. It gets the job done, but in a very messy and time-consuming way, and it only works with pre-defined static content. In terms of size, the difference is that of less than 1kb CSS file size when using the nth-child() selector vs more than 75kb CSS file size when using the above mentioned workaround, for a 250 line predefined stylesheet.
Surely there has to be a better way to deal with this issue? Support for a core HTML/CSS feature that generates ordered layout patterns for line enumeration, indentation, etc, would seem like a top priority feature to support in a product such as Adobe Acrobat Pro, given its focus on page layout...
<html>
<head>
<style type="text/css">
body { margin: 75px 90px; }
li { list-style-type: none; counter-increment: listing; }
li:after { content: counter(listing); float: right; margin-right: -2em; visibility: visible; }
li:not(:nth-child(3n+1)):after { visibility: hidden; }
li:nth-child(3n+1) { text-indent: 25px; }
</style>
</head>
<body>
<li>Line One</li>
<li>Line Two</li>
<li>Line Three</li>
<li>Line Four</li>
<li>Line Five</li>
<li>Line Six</li>
<li>Line Seven</li>
<li>Line Eight</li>
<li>Line Nine</li>
<li>Line Ten</li>
</body>
</html>