How to right-align numbers on the left side of the page?

[YE-TW]

Hi,

Standard HTML lists are displayed with right-aligned numbering, which is lovely IMHO:

Code: Select all

  1. Some text
  2. Some text
     ...
 10. Some text 

However, our company uses mc-auto-numbers for lists instead of standard HTML lists, so our lists look like this:

Code: Select all

 1. Some text
 2. Some text
    ...
 10.Some text that's pushed slightly to the right even though I couldn't replicate it here 

If we set text-align: right;, in HTML 5 output, the numbers are right-aligned to the left of the text, just like standard HTML lists.

BUT in PDFs and in Flare's XML editor, the numbers are right-aligned really weirdly, for example:

Code: Select all

   Some text 1.
   Some more2.text
   And even m3.ore text

Any ideas how to right-align the numbers while keeping them on the left side of the page?
If it matters, we're using the latest Flare (2019) with Side Nav and PDF targets.

Here's our CSS code:

Code: Select all

p.ol1
{
	mc-auto-number-class: ol1Number;
	mc-auto-number-position: inside-head;
	mc-auto-number-format: 'N:{n+}.';
	mc-auto-number-offset: 15pt;
	margin-left: 1.7em;
	margin-right: 0pt;
	line-height: 14pt;
	margin-bottom: 6pt;	
}

span.ol1Number
{
	float: left;
	margin-left: -2em;
	font-family: Arial;
	font-size: 10.5pt;
	font-weight: bold;
	width:1.5em;
   text-align: right;
}

TIA,
Yael

[MadCap User 2019]

Try adding a padding-left and using a high percent value, like 80% or 90%.