How do you do tab stops in HTML/CSS

Question

There is some text whose formatting I would like to render in HTML. Here is an image:

Note the gray lines with the bullet points and the paragraph numbers. The bullets should be centered on the page and the numbers should be justified right.

I've been trying to think of how to do this in HTML and am coming up blank. How would you capture this formatting?

Beaufort

Are you looking for a purely-html/css solution? – Spectral

@Jonathan Absolutely. CSS3 if that's what it takes. I want to learn. This problem has always annoyed me. – Beaufort

I think this can easily be accomplished with a bit of JavaScript, so I thought I'd ask a bit more about your expected solution. – Spectral

What does the html look like? – Copartner

I second Jeroen. Are you looking to just compartmentalize each of the "parargaphs" or "bullet points" and not have the need to insert the numbers and bullet groupings manually? If so, I'd look into styling an ordered list and merge a little JS in there to grab the ordinal and render a corresponding element to present the bullets – Bartram

@Copartner As this is educational, I'll let you define the HTML. I'm learning techniques to do tab stops rather than working on a specific project. – Beaufort

@Jonathan Sampson: It looks like JavaScript could be a good option here, see the OPs comment on my answer. – Millrace

The title "How do you do tab stops" is not a good one, because this question asks how to program a particular kind of paragraphing, not tab stops (such as the TAB element). – Knitwear

Answer 1

You can use the :before and :after psuedo-elements to great effect here:

http://jsfiddle.net/yNnv4/1/

This will work in all modern browsers and IE8+. If IE7 support is required, this answer is not for you :)

#container {
    counter-reset: nums;
}
p {
    position: relative;
    margin: 21px 0;
}
p:before {
    content: '\2022 \2022';
    font-size: 2em;
    position: absolute;
    top: -8px;
    left: 0;
    line-height: 1px;
    color: #888;
    width: 100%;
    text-align: center
}
p:after {
    content: counter(nums);
    counter-increment: nums;
    font-size: 1.5em;
    position: absolute;
    top: -8px;
    right: 0;
    line-height: 1px;
    color: #888;
    font-family: sans-serif
}

About the counter properties:

• https://developer.mozilla.org/en/CSS_Counters
• http://www.w3.org/TR/CSS21/syndata.html#counter
• http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

---

It's not possible to (automatically) increment the bullets.

However, it can be done with some dubious repetition:

http://jsfiddle.net/N4txk/1/

p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */

(alternatively, :nth-child can be repeated in the same way: http://jsfiddle.net/N4txk/ - but it won't work in IE8; there will only be two bullets)

There is an upper limit on the number of bullets it would be sensible to have, so I think it would be acceptable to copy and paste that as many times as required.

Millrace

excellent usage, but I can't tell if the OP wants to bullets to incr up as well. original image seems to reflect this – Bartram

Nicely done! I'm sure there's a way to incr the bullets with JS. – Bucksaw

I think it's possible to increment the bullets with CSS. I'm looking at it. – Millrace

The dots don't have to generate. I would generate the HTML server-side so am not worried about this too much. Also, I'm happy to use JS to generate them. Mostly worried about how to style the spans. – Beaufort

@Frank Krueger: Then my answer is elegant in a way which is utterly useless to you :( If the rest of your site requires JavaScript, then you should use JavaScript to achieve this. Otherwise, stick with HTML outputted by your server-side code. The other answers already cover the HTML/CSS to do this. – Millrace

Answer 2

How about something like this?

http://jsfiddle.net/6eTCf/

<div class="separator">
   * <div class="page_number">1</div>
</div>


.separator{
    margin: 5px 0 5px 0;
    color:gray;
    position:relative;  
    text-align: center;
}

.page_number{
    position:absolute;
    right: 3px; 
    top: 0; 
}

Dowland

Answer 3

I would float the number right and center the remaining contents (the bullet points). If you give the remaining contents an equal left and right margin larger than the numbers are wide, the contents will be centered.

Copartner

Ah, interesting. I was wondering how to hack float to work. Never thought of the equal left and right margins simply being bigger than the number! – Beaufort

Answer 4

I would wrap the whole thing in a div, then use relative/absolute positioning between the wrapper and the paragraph number div to get the numbers on the right-hand side like that.

Here's a fiddle showing how to do it.

Alleviate

Answer 5

There are several ways I can think of:

• Float + absolute position (I'll let the purists explain this one)
• Old style table (I'll explain this since it's the easiest):

If the total width of the area is, say, 300px

<table><tr>
   <td width="30"></td>
   <td width="240" align="center">bullets</td>
   <td width="30" align="right">number</td>
</tr></table>

Many people prefer using pure CSS, but I like my tables, they just work for me

Soup

Recommending tables for layout is sloppy. – Carafe

bookmark me and prepare to downvote me all over the place then :) – Soup

As long as I never have to edit any of your code, we're cool. ;) – Alleviate

Answer 6

There are a couple ways I can think of.

Add a <div> between the paragraphs, then add two <p>'s: <p class="dot"></p> and <p class="pnum">1</p>.

Style the <div> to the width of the the paragraphs, and set in the CSS the following:

.dot{ text-align: center; }
.pnum{ float: right; }

Meredi

Won't that float cause the center to be left-biased? I think @Copartner has the correction to make this style work. – Beaufort

Answer 7

`#container {
    counter-reset: nums;
}
p {
    position: relative;
    margin: 21px 0;
}
p:before {
    content: '\2022 \2022';
    font-size: 2em;
    position: absolute;
    top: -8px;
    left: 0;
    line-height: 1px;``
    color: #888;
    width: 100%;
    text-align: center
}
p:after {
    content: counter(nums);
    counter-increment: nums;
    font-size: 1.5em;
    position: absolute;
    top: -8px;
    right: 0;
    line-height: 1px;
    color: #888;
    font-family: sans-serif
}`

Anele