Dynamic hanging indent

[Harlan Messinger]

A publication style guide indicates that for a table heading like the
following,

Table 3. Wheat and rye harvest in European countries in years that end in 3
or 7 or when a new prime minister takes office.

when the heading flows over more than one line, a hanging indent should be
used, such that the remainder of the heading should be left-aligned, in this
example, with "Wheat", leaving "Table 3. " standing off by itself on the
left.

The style guide was created by print-based designers, and some of their
guidelines will need to be altered or scrapped for web publication. But is
there some way to fulfill this particular guideline as specified on the WWW?
The problem is that the width of the indent has to be dynamic, since the
table designator's width depends on the font and on its content (which could
just as well be Table 37M). The distance between the first period and the
following word is specified as two em spaces, which maybe padding or a
margin could take care of.

I suppose this should all be in a CAPTION element, but alternatively it
could be an H1 preceding the TABLE element.

--
Harlan Messinger
Remove the first dot from my e-mail address.
Veuillez ôter le premier point de mon adresse de courriel.

[Harlan Messinger]

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2p************@uni-berlin.de...

A publication style guide indicates that for a table heading like the
following,

Table 3. Wheat and rye harvest in European countries in years that end in 3 or 7 or when a new prime minister takes office.

when the heading flows over more than one line, a hanging indent should be
used, such that the remainder of the heading should be left-aligned, in this example, with "Wheat", leaving "Table 3. " standing off by itself on the
left.

In other words, the kind of indent you get if you paste the following into a
fixed-width editor:

Table 3. Wheat and rye harvest in European countries
in years that end in 3 or 7 or when a new prime
minister takes office.

[Neal]

On Mon, 30 Aug 2004 14:14:22 -0400, Harlan Messinger
<h.*********@comcast.net> wrote:

Table 3. Wheat and rye harvest in European countries
in years that end in 3 or 7 or when a new prime
minister takes office.

Sadly, caption is inline. Perhaps something like this? Untested.

caption {display: block; width: 100%; font-size: 100%; text-indent: -3em}

Adjust ems of the indent to what works. Fails in non-CSS environments, but
that's to be expected.

[Jukka K. Korpela]

"Harlan Messinger" <h.*********@comcast.net> wrote:

A publication style guide indicates that for a table heading - -
when the heading flows over more than one line, a hanging indent
should be used, such that the remainder of the heading should be
left-aligned,
I'd like to refer to the recent thread "CSS: basic indentation question",
which was mistakenly started in c.i.w.a.h but continued here. It dealt
with similar issues for headings (h2 etc.) and paragraphs. Some of the
ideas suggested there might apply to your case.
I suppose this should all be in a CAPTION element, but alternatively
it could be an H1 preceding the TABLE element.

Using a heading element of suitable level is imaginable, and then e.g.
the technique I suggested would seem to work. However, H1 does not sound
natural if it's "Table 3".

In this case my approach could mean markup like

<h2><span class="nr">Table 3.</span>
Wheat and rye harvest in European countries in years that end
in 3 or 7 or when a new prime minister takes office.</h2>

and CSS code like

h2 { position: relative;
margin-left: 4.5em; }
h2 .nr { position: absolute;
left: -4.5em; }
h2 { font-size: 100%;
margin-bottom: 0.5em; }

The awkward part is guessing a value like 4.5em so that there's not too
much gap and no overlap of the "Table 3." text and the heading text -
because the width of the text "Table 3." varies by font size.

It would in my opinion be better to use <caption> markup, but e.g. <h2>
isn't wrong either, and styling <caption> seems to be more difficult.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Harlan Messinger]

"Neal" <ne*****@yahoo.com> wrote in message
news:op**************@news.individual.net...

On Mon, 30 Aug 2004 14:14:22 -0400, Harlan Messinger
<h.*********@comcast.net> wrote:

Table 3. Wheat and rye harvest in European countries
in years that end in 3 or 7 or when a new prime
minister takes office.
Sadly, caption is inline. Perhaps something like this? Untested.

caption {display: block; width: 100%; font-size: 100%; text-indent: -3em}

But then the indent is hard-coded, which I could do with padding-left and
text-indent.

Adjust ems of the indent to what works. Fails in non-CSS environments, but
that's to be expected.

One of my attempts is now at

http://gavelcade.com/tests/hangindent.html

In IE6 the general arrangement is right, but as I widen or narrow the
browser, the distance between the Table 3 and the rest of the heading
varies, and NOT in a uniform direction! It jumps back and forth. In Mozilla
and Opera, it's hopeless--the main part of the heading appears below the
Table 3.

It doesn't matter whether I include the style on the THEAD or not.

[Harlan Messinger]

"Jukka K. Korpela" <jk******@cs.tut.fi> wrote in message
news:Xn*****************************@193.229.0.31. ..

"Harlan Messinger" <h.*********@comcast.net> wrote:

A publication style guide indicates that for a table heading - -
when the heading flows over more than one line, a hanging indent
should be used, such that the remainder of the heading should be
left-aligned,
I'd like to refer to the recent thread "CSS: basic indentation question",
which was mistakenly started in c.i.w.a.h but continued here. It dealt
with similar issues for headings (h2 etc.) and paragraphs. Some of the
ideas suggested there might apply to your case.

Thanks, I'll look.

I suppose this should all be in a CAPTION element, but alternatively
it could be an H1 preceding the TABLE element.
Using a heading element of suitable level is imaginable, and then e.g.
the technique I suggested would seem to work. However, H1 does not sound
natural if it's "Table 3".

It's for a section of the site where a series of tables are listed. The
page's sole purpose is to display the table. So it makes sense to use a
heading, though I suppose indeed it would be H2 or H3.

In this case my approach could mean markup like

<h2><span class="nr">Table 3.</span>
Wheat and rye harvest in European countries in years that end
in 3 or 7 or when a new prime minister takes office.</h2>

and CSS code like

h2 { position: relative;
margin-left: 4.5em; }
h2 .nr { position: absolute;
left: -4.5em; }
h2 { font-size: 100%;
margin-bottom: 0.5em; }

The awkward part is guessing a value like 4.5em so that there's not too
much gap and no overlap of the "Table 3." text and the heading text -
because the width of the text "Table 3." varies by font size.
Yep.

It would in my opinion be better to use <caption> markup, but e.g. <h2>
isn't wrong either, and styling <caption> seems to be more difficult.

Thanks for the tips.

[Harlan Messinger]

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2p************@uni-berlin.de...

"Harlan Messinger" <h.*********@comcast.net> wrote in message
news:2p************@uni-berlin.de...

A publication style guide indicates that for a table heading like the
following,

Table 3. Wheat and rye harvest in European countries in years that end in

3

or 7 or when a new prime minister takes office.

when the heading flows over more than one line, a hanging indent should

be used, such that the remainder of the heading should be left-aligned, in

this

example, with "Wheat", leaving "Table 3. " standing off by itself on the left.

In other words, the kind of indent you get if you paste the following into

a fixed-width editor:

Table 3. Wheat and rye harvest in European countries
in years that end in 3 or 7 or when a new prime
minister takes office.

I wound up deciding to do this with display: table and display: table-cell
for browsers more advanced than IE, and it works beautifully in Opera and in
everything Mozilla-related from Netscape 6 on. For IE I decided to take the
simple approach, allowing a fixed 5em for the Table designation.

/* Hanging table title indent for IE only, overridden below for more
sophisticated browsers. (Hide it from Netscape 4.x. and below.) */
/*/*/
h3 { position: relative; left: 5em; font-weight: bold;
text-align: left; margin-right: 6em; }
h3 .tablenum { position: absolute; top: 0; left: -5em;
width: 5em; padding: 0; text-align: left; }
h3 .tabledesc { }
/* */

/* Hanging table title indent for more CSS-compliant browsers */
*>h3 { position: static; display: table; text-align: left; margin-right:
auto; }
*>h3 .tablenum { position: static; width: auto; display: table-cell;
white-space: nowrap; padding: 0 1em 0 0; text-align: left; }
*>h3 .tabledesc { display: table-cell; }