Stylesheets - Dynamic hanging indent

Author

Dynamic hanging indent

Harlan Messinger

2004-08-30, 7:17 pm

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

2004-08-30, 7:17 pm

"Harlan Messinger" <h.messinger@comcast.net> wrote in message
news:2ph8bbFkcs57U1@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

2004-08-30, 11:16 pm

On Mon, 30 Aug 2004 14:14:22 -0400, Harlan Messinger
<h.messinger@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

2004-08-30, 11:16 pm

"Harlan Messinger" <h.messinger@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

2004-08-30, 11:16 pm

"Neal" <neal413@yahoo.com> wrote in message
news:opsdj9pvxc6v6656@news.individual.net...
> On Mon, 30 Aug 2004 14:14:22 -0400, Harlan Messinger
> <h.messinger@comcast.net> wrote:
>
>
> 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

2004-08-30, 11:16 pm

"Jukka K. Korpela" <jkorpela@cs.tut.fi> wrote in message
news:Xns9555EF34E37A3jkorpelacstutfi@193.229.0.31...
> "Harlan Messinger" <h.messinger@comcast.net> wrote:
>
>
> 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.

>
>
> 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.