How do you align text in a web page?

[benali72]

Anybody know how to horizontally align text across lines in a web page?

I'm trying to display programming code that I want lined up between different lines on the page.

I've used tables to align things in the past but that wouldn't be practical here.... monospaced fonts didn't seem to do it either.

Any ideas? Thanks.

[The Gorn]

Typographically, I do not understand the look that you want. Do you want lines that have their ends all in a vertical row, just as the start of lines in most displayed text all fall in a vertical line? If both start and end of all lines are in a vertical line, that is called full justification. Left justified looks like a standard letter with the right hand side ragged. Right justified looks like the block at the top of this forum page that starts "Discussion about computer careers..."

Can you post a link to an example of the look you want?

[JavaMouse]

I can't figure out exactly what you wanted either, but since you mention displaying code, perhaps the pre tag will be sufficient. - JavaMouse

[benali72]

I'm sorry I wasn't more clear.

I'm trying to post code on a web site that is lined up like this --

select condition_clause
     when '1'  do           /* first alternative                                                               */
            action_a
            action_b
     when '2' do           /* second alternative                                                          */
            action_c
     end
end_select               /* last example line and end of comments match too   */

Lines of code are aligned with those above or below them as makes sense to a programmer.  Plus the start and ending of the comments align, too.  So I want the freedom to align any parts of the code with those above or below them.

Thank you for your help. I'm afraid I've been in the server room too long to know much about HMTL.

[The Gorn]

Benali,  what you are looking for is indentation techniques.

I Googled with the search term 

Code: [Select]

HTML indentation and I came up with this:

http://www.blooberry.com/indexdot/html/topics/indent.htm

As JavaMouse stated, the pre tag is probably what you want. The choices shown in this article run from easy and obvious to jumping through hoops (easier techniques are at the top of the list.)  The non breaking space character is probably the biggest PITA shown.

Note that tabs will not be interpreted correctly, so any source code that you wrap in pre and code should be run through some application or otherwise modified so that all tabs are expanded to spaces.

[JavaMouse]

OK, that's the way I interpreted what he said, and pre is really the easiest thing to do.

I've used   (non-breaking space) for this kind of thing in cases where I couldn't use the pre tag, and it wasn't too big a pain.

If your code sample is already indented with whitespace consistently, you can use a "replace all" to replace whitespace with the " " string.

JavaMouse

[benali72]

Thank you both for your help.  I think I wasn't finding what I needed through Google searches because I didn't realize "indentation" is what I'm trying to do. The article you found, G0ddard, is perfect. The PRE tag might do it for me but I'll read the full article first.

Thanks again!