Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Auto number list - text alignment

Posted on 2014-01-31
4
Medium Priority
?
973 Views
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>
        <p>This...</p>
<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
0
Comment
Question by:Shawn Connelly
[X]
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
4 Comments
 
LVL 58

Expert Comment

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

Author Comment

by:Shawn Connelly
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.
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39825622
Something like this
http://jsfiddle.net/GaryC123/MzR3M/2/

You would just need to tweak the margins

HTML
<ol>
    <li><div>Main Item</div><ol>
        <li><div>item<p>This...</p></div></li>
    <li><div>item<p>This...</p></div></li>
    <li><div>item<p>This...</p></div></li>
    <li><div>item<p>This...</p></div></li>
        <li><div>item<p>This...</p></div></li>
        </ol>
        </li>
<ol>

Open in new window

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

li div {
    display:inline-block;
        vertical-align:top;
    margin-left:20px
}
li:before {
     content: counters(item, "."); counter-increment: item;
}

Open in new window

0
 
LVL 4

Author Comment

by:Shawn Connelly
ID: 39892639
Hello Cathal,

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

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

609 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