[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 292
  • Last Modified:

Is there a simple way to justify a list-item (both the list-item-label and list-item-body) with XSL?

In a web application, a user is allowed to use a Word-like text editor to write portions of a document.  The HTML output of this editor is rendered into a PDF using XSL.  There is a requirement to allow arbitrary horizontal alignment (left/start, center, and right/end) at the line item level (that is, not simply at the list level) for bulleted or numbered lists.  Here are a few examples of possible "valid" (but naturally in poor design taste) lists.  Note that each set of three items represents a completely different list.

1. item
2. item
3. item
                              * item
                              * item
                              * item
                                                            1. item
                                                            2. item
                                                            3. item
1. item
                              2. item
                                                            3. item
                                                            * item
                              * item
* item
etc.

However, when we attempt to format the HTML, the best we can get is something like:
1. item
2.                              item
3.                                                            item
0
dfu23
Asked:
dfu23
  • 3
1 Solution
 
Geert BormansCommented:
Hi dfu23,

can you not just left allign the items in lists using CSS?

Cheers!
0
 
_TAD_Commented:


When you generate your HTML, use an in-line style sheet

<HTML>
<HEAD>
<STYLE TYPE="text/css">
  LI { font-size: large; color: black }
  LI.LEFT { font-size: large; text-align: left;  color: black; }
  LI.RIGHT { font-size: large; text-align: right;  color: black; }
  LI.CENTER { font-size: large; text-align: center;  color: black; }
</STYLE>
<HEAD>

<BODY>

<OL>
  <LI class="LEFT">some Text</LI>
  <LI class="RIGHT">more text</LI>
</OL>

</BODY>
</HTML>


This will produce:
 
   1. some text
   2.              more text


0
 
_TAD_Commented:


You may also be interested in the list-style-position, margin-left, text-indent or padding-left

Here's  site to help you decide which style is best for you.
http://www.zvon.org/xxl/css1Reference/Output/index.html
0
 
dfu23Author Commented:
TAD,

If you look at my original question again, we are able to get the lists formatted as you describe.  However, we want the bullet/number to match the alignment of the text itself.  That is, either both are to the left, centered, or to the right.  Having the text to the left, centered, or to the right while the bullet/number is always to the left is not what we're looking for.

Any other ideas?
0
 
_TAD_Commented:
Here.... This does what you need.  






<HTML>
<HEAD>
<STYLE TYPE="text/css">
  LI { font-size: large; color: black }
  LI.LEFT { font-size: large; text-align: left;  color: black; }
  LI.RIGHT { font-size: large; text-align: right;  color: black; }
  LI.CENTER { font-size: large; text-align: center;  color: black; }
</STYLE>
<HEAD>

<BODY>

<Table>
   <TR>
     <TD Width=500>   <!-- This number changes the relative spacing -->
        <OL>
           <LI class="LEFT">some Text</LI>
           <LI class="center">other Text</LI>
           <LI class="RIGHT">more text</LI>
        </OL>
     </TD>
   </TR>
</Table>
</BODY>
</HTML>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now