Adobe LiveCycle Designer Cookbooks by BR001: Custom Bulleted and Numbered Lists

With LiveCycle Designer ES3 came support for bulleted and numbered lists under the Paragraph palette. This did make creating lists a lot easier but also added some restrictions;

There is always a 0.5in margin added to the list, see List Layout (XFA Spec 3.3) for more details

What ES3 gives you is

What you might have been after

There is no option to add a leader (dots between the bullet/number and the text)

Now you number list can look like

When read by a screen reader like NVDA the bullet characters or numbers are not announced. In the example in the first dot point above, NVDA announces "What is your favourite fruit Apples Oranges Bananas" when what you probably wanted was "What is your favourite fruit bullet Apples bullet Oranges bullet Bananas"

In LiveCycle Designer the Text fields containing rich text that we need to use to implement a bullet list are implemented using a subset of xHTML. ES3 introduced support for the ol, ul and li tags but prior to ES3 it was also possible to create bullet point lists and numbered list you just had to hand edit the xHTML, and use a negative text-indent and some tab-stops.

This sample PDF Form makes to easy, just enter the text of your dot points, select the type of bullets or numbers, the spacing and if you want leaders or not and the Draw element (which implements the Text object) is output to the console.

You should see something like;

<draw name="Text1" w="196.85mm" minH="0in" xmlns="http://www.xfa.org/schema/xfa-template/3.6/">
 <value>
 <exData contentType="text/html">
 <body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/">1.Oranges2.Apples3.Bananas</body>
 </exData>
 </value>
 <ui>
 <textEdit allowRichText="1"/>
 </ui>
 
</draw>

To add this to your form it might be easiest to add a Text object in the place you need, select it, then switch to the XML Source view. You should see a <draw>...</draw> element, which you can replace with the one copy and pasted from the JavaScript console.

The sample to generate the Draw element is Bullets.pdf.

A form containing samples of ES3 and customs bullet/number lists and how NVDA reads them is NVDA.Bullets.pdf.

Adobe LiveCycle Designer Cookbooks by BR001

Search This Blog

Saturday, 10 January 2015

Custom Bulleted and Numbered Lists

No comments:

Post a Comment