Can CSS tab along?

March 5, 2009 10:56 AM

Is there any way with CSS to position text with regular distances on lines; just like the old tabulator stop did on a typewriter, or does in a wordprocessor? Or is it back to tables to get this trick done?

And yes, I know about text indents. I just would like to use some functions that spew out text, and I like to position that text automatically on a webpage.

Not that I mind using tables. It's just that Firefox refuses to align normally in tables, and I would need to write a whole lot more CSS and code to correct this.

posted by ijsbrand to computers & internet (15 comments total)

If I understand your question correctly, I think you want to adjust the padding on your Div or Span.
posted by willnot at 11:00 AM on March 5

padding-left, specifically
posted by mkultra at 11:03 AM on March 5

I had struggled, just at an hour a so at a time, a few years back trying to do just this thing, in between also playing with the idea of trying to replicate the tab layout for screenwriting in CSS.

Of course, we are supposed to use table for ... wait for it ... tabular data. It seems like a heck of a lot of overhead, zillions of tags, though, for something relatively simple. It irritates me, too.

If you have just two columns, you can get away with a definition list. Float both the dt and dd to the left, but then do a clear: left; on the dt.

With more than two columns, you can do some float: left; and some predefined widths set, but I found this approach fragile and clumsy.

Proposals have been made to support tab stops in CSS, but I do not believe they have gone anywhere.
posted by adipocere at 11:31 AM on March 5

So you want to have, for example, several spans where each span starts at, for example, N*10 ems out? Am I understanding the problem correctly?

This is actually the underlying principle of the Blueprint CSS framework, but that may be overkill for your purposes. Still wouldn't hurt to look it over.

A much simpler version would be to do something like this:
HTML
<div class="tabbed">
<span>alpha</span><span>beta</span><span>gamma</span><span>delta</span>
</div>

CSS

.tabbed span {
width: 10em;
display: inline-block;
}
"inline-block" doesn't work in certain browsers (older versions of IE); if you want, you can use display: block; and float: left;
posted by adamrice at 11:32 AM on March 5

What kind of content are you trying to style? Knowing that might help with suggesting the best approach.
posted by malevolent at 12:17 PM on March 5

I'm not entirely sure what you're asking, typewriters being before my time, but maybe word-spacing? Combined with line-height?
posted by Mr. Anthropomorphism at 12:20 PM on March 5 [1 favorite]

Not meant as snark: would <PRE>col1 col2 col3</PRE> work?

...or write a javascript to surround text between \t with <SPAN> and between \n with <DIV> (an exercise left to the reader!)
posted by greensweater at 12:46 PM on March 5

Could you perhaps link to a scan of a page that has the effect you're trying to reproduce?
posted by DrJohnEvans at 1:17 PM on March 5

Firefox refuses to align normally in tables

How so?
posted by ook at 1:42 PM on March 5

Are you trying to justify the text on a line? An example of what you're trying to achieve would be helpful.
posted by jacquilinala at 2:07 PM on March 5

One example, as demanded:

I have a website with book reviews, and am struggling a bit to how to design the list with related titles to the book reviewed.

At least one element is certainly needed in that list: the title of the related book; of which the length cannot be predicted beforehand;

Another element could be the name of the writer[s], which also come with differing lengths;

Other elements still might be: the date of publication, the percentage of the relationship with the book reviewed [100% is absolute, 1% is a random relation], and maybe a star system with the judgements on those related titles.

Ideally, I would like to make a simple unordered list of this, with preferably one lines of text per item. However, this gets messy of all the info is showed without proper spacing.
posted by ijsbrand at 2:26 PM on March 5

What you are describing sounds like you should use a table. It really is tabular data, you know the maximum number of columns you'll be displaying in advance (which would be the only stumbling block I can think of), and it's easy to do this right with tables.
posted by adamrice at 2:42 PM on March 5

<table>
<thead>
<tr>
<th scope="col">Title</th>
<th scope="col">Author</th>
<th scope="col">Relationship</th>
<th scope="col">Stars</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><cite>Book Title</cite></th>
<td>John Q. Author</td>
<td>50%</td>
<td>***</td>
</tr>
</tbody>
</table>

Repeat the TRs for each book.

Reset CSS to minimize cross-browser/cross-platform rendering differences.
posted by kirkaracha at 4:12 PM on March 5

I'd either use a table or block-level elements floated against each other to form a suitably clear and logical layout (e.g. a div per related title containing h2 for title and list for other data, maybe put the percentage or star rating in the corner, something like that).
There are numerous ways you could lay out the data but few would benefit from a tabbing-type mechanism, think in terms of rows and columns instead.
posted by malevolent at 3:35 AM on March 6

Yeah, you're talkin' tables now.
posted by Mr. Anthropomorphism at 8:57 PM on March 6