Styling RichText Bullets in Flex

Question

I am developing an iPad app with RichText components. They are working fine on the target devices. However, bullets look less than stellar. Specifcally, I need to increase the space between the bullet and the list item. It's too close and doesn't look good and the design people are not at all pleased with it.

The way the code works is we have an XML file that gets read in, and the contents of the screen are populated from that file. For example, here is a test list I have:

<section id="outro">
    <element id="outro">
        <copy id="OutroTestCopy" x="50" y="75" width="1200"><![CDATA[
            <p fontSize="55" color="#cf7028">List to display</p>
            <list fontSize="50" fontWeight="bold" paddingLeft="20">
                <listMarkerFormat><ListMarkerFormat paddingRight="300" fontSize="50" fontWeight="bold" afterContent="&nbsp; " /></listMarkerFormat>
                <li>List Reference*<span baselineShift="superscript" alignmentBaseline="ideographicBottom">12</span></li>
                <li>List Corp<span baselineShift="superscript" alignmentBaseline="ideographicBottom">®</span></li>
                <li>List item</li>
                <li>Second list reference<span baselineShift="superscript" alignmentBaseline="ideographicBottom">2</span></li>
            </list> 
        ]]></copy>          
        <footnote><![CDATA[Test footnote]]></footnote>
    </element>
</section>

My ActionScript code takes the copy element above and runs it through the TextFlow import. I do this and not use actual TextFlow in the XML file because non-programmers with XML/HTML experience will be editing this file and I wanted to keep the markup as close to HTML as possible, rather than training them to do proper TextFlow:

copyRichText.textFlow = spark.utils.TextFlowUtil.importFromString(copy);

This runs well and I get my bullet list, with superscripts and fancy characters (see below). However, I can't change the spacing between the bullet and the list item text. I just want more space between the ListMarker and the list item. Right now they are too close and looked jammed up, and the design staff are giving me grief about it. I've tried (as you see) some padding and afterContent type attributes to get it to work, but they do nothing. Here is the result of the above, for reference:

Output of this code

Edit to add: I had previous used these resources for lists in TextFlow:

Haven't tried this, but perhaps [ListMarkerFormat](http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flashx/textLayout/formats/ListMarkerFormat.html) could be useful here. See bottom section of http://help.adobe.com/en_US/flex/using/WS19f279b149e7481c7fdc883d12de39353f1-8000.html — RIAstar, Nov 28 '12 at 19:59

Paul Sweatte · Answer 1 · 2016-09-28T19:05:51.873

Use the beforeContent attribute to add whitespace:

    <s:list id="myList" paddingLeft="10" listStylePosition="inside">
        <s:listMarkerFormat>
            <!-- Note that this example inserts an empty string with &quote; HTML entities. -->
            <s:ListMarkerFormat 
                beforeContent="   " 
                content="counters(ordered,&quot;&quot;,upperRoman)" 
                afterContent=": "/>
        </s:listMarkerFormat>
        <s:li>Beginning</s:li>
        <s:li>Middle</s:li>
        <s:li>End</s:li>
    </s:list>

References

Styling RichText Bullets in Flex

1 Answers1