Auto number list - text alignment

Posted on 2014-01-31
Last Modified: 2014-02-27
Hello all, I am experiencing some difficulty aligning chapter headings, where I have incorporated auto numbered lists using a proportional font.

An example (I'll use code to ensure the text appears as intended):

1.1     Chapter 1.1 Header
1.2       Chapter 1.2 header
2.1       Chapter 2.1 header
2.2         Chapter 2.2 header

Open in new window

The above example may be slightly exaggerated but the issue is all the chapters should be aligned, however, the font is dictating where the chapter text begins.
Q. Is there a way to lock the position of the chapter text using just css?

Caveat... I am generating my document using MadCap Flare. Although it is almost entirely html/css, it does utilize a few custom styles. Unless you understand Flare, please try to ignore that fact and try to help me with a pure css correction (if possible). :-)

Here is a sample HTML excerpt:
<h2 MadCap:autonum="1.1">Chapter 1.1 text</h2>
<h2 MadCap:autonum="1.2">Chapter 1.2 text</h2>

Open in new window

And the .css excerpt for h2 HTML5 output:
		font-weight: bold;
		color: #d93e0b;
		font-size: 14pt;
		mc-auto-number-format: 'GH:{n}.{n+}        ';
		mc-auto-number-position: inside-head;
		/* text-indent: 55px; */
		margin-left: 0px;
		padding-left: -20px;

Open in new window

You will notice the 8 spaces after "GH:{n}.{n+}". This is the root of the problem because the distance these spaces make up are relative to the font. I need a css solution so that I don't need those spaces to separate the chapter number from the chapter title.

I realize that the special MadCap only classes may put a wrench in your ability to assist.

Thank you
Question by:sconnell
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
LVL 58

Expert Comment

ID: 39825368
Do you have a link to the page so we can see what's going on?

Author Comment

ID: 39825611
Unfortunately, I am unable to now because it is published on a private server.

Perhaps, for the moment, I can re-frame the question to...

How do you create an auto-numbered list using only .css styles using a proportional font?

In this format:
1.0  Main title

1.1         Subtitle A
1.2         Subtitle B
...and so on. 

Open in new window

Note: There would be about 2 spaces between the main chapter number and title and about 8 spaces between sub-chapter numbers and the name. All the chapter numbers should always align regardless of the font used.

Thanks so much.
LVL 58

Accepted Solution

Gary earned 500 total points
ID: 39825622
Something like this

You would just need to tweak the margins

    <li><div>Main Item</div><ol>

Open in new window

ol {
		font-weight: bold;
		color: #d93e0b;
		font-size: 14pt;
		margin-left: 0px;
    counter-reset: item 
li {

li div {
li:before {
     content: counters(item, "."); counter-increment: item;

Open in new window


Author Comment

ID: 39892639
Hello Cathal,

THAT is an awesome resource. Thank you! :-)

Featured Post

Independent Software Vendors: 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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hide and Unhide Table 6 42
Keyup listener getting fired on initial page load 1 52
Disabling a Faux Submit Button 4 41
transfer content to new site design 7 49
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question