how to break long legend tag caption into multiple lines?

Hi,

We have some html source like this:

<div class="survey">
<form action="students/cbe-graduate-students/survey.html"
method="post" id="frmPbSurvey">

<fieldset class="survey_item">
<legend class="question"><span class="questionNumber">6.</span>If the
answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?</legend>

<input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="1" /

No<br /

<input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="2" /

Yes<br /
/fieldset

....
<fieldset ...>
</fieldset>

</form>
</div>

Some questions are pretty long and cannot fit in the layout. My
current style sheet has,

..survey div {margin-bottom: 10px;}
..survey_item {margin-top: 10px; margin-bottom: 10px;}
..question {font-size: 100%; font-weight: bold; }

What should I so long questions can be broken into multiple lines to
fit in the layout that has 450px width?

Thanks in advance for any help,

Bing

Scripsit dubing (AT) gmail (DOT) com:

legend class="question"><span class="questionNumber">6.</span>If the
answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?</legend

From the styling point of view, <legend> is a nightmare. The common
rendering of <legend> in browsers cannot be described in CSS terms, and CSS
settings have varying effects on it.

One of the problems is that normal wrapping does not take place, and setting
white-space: normal doesn't change this. You can insert explicit line breaks
in the markup, using <br>, but that would be awkward.

From the markup point of view, the problem of excessively long <legend>
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:

<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
...
</FIELDSET>

So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.

Some questions are pretty long and cannot fit in the layout.

Just put the questions inside the <fieldset> after the <legend> element.

.question {font-size: 100%; font-weight: bold; }

Bolding long texts is generally counter-productive, since bold text is more
difficult to read. The legend might be bolded, but the question should be
normal text so that it can be read conveniently.

What should I so long questions can be broken into multiple lines to
fit in the layout that has 450px width?

For all that you can know, 450px might not accommodate a _word_ without
wrapping. Stop imposing fixed widths, _especially_ on forms. A page with a
form is not supposed to be primarily an esthetic experience but a user
interface. Let form follow function. The user may need all the space
available.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

On Feb 23, 2:07 am, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Scripsit dub... (AT) gmail (DOT) com:

legend class="question"><span class="questionNumber">6.</span>If the
answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?</legend

From the styling point of view, <legend> is a nightmare. The common
rendering of <legend> in browsers cannot be described in CSS terms, and CSS
settings have varying effects on it.

One of the problems is that normal wrapping does not take place, and setting
white-space: normal doesn't change this. You can insert explicit line breaks
in the markup, using <br>, but that would be awkward.

From the markup point of view, the problem of excessively long <legend
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:

FIELDSET
LEGEND>Current Medication</LEGEND
Are you currently taking any medication?
INPUT name="medication_now"
...
/FIELDSET

So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.

Some questions are pretty long and cannot fit in the layout.

Just put the questions inside the <fieldset> after the <legend> element.

.question {font-size: 100%; font-weight: bold; }

Bolding long texts is generally counter-productive, since bold text is more
difficult to read. The legend might be bolded, but the question should be
normal text so that it can be read conveniently.

What should I so long questions can be broken into multiple lines to
fit in the layout that has 450px width?

For all that you can know, 450px might not accommodate a _word_ without
wrapping. Stop imposing fixed widths, _especially_ on forms. A page with a
form is not supposed to be primarily an esthetic experience but a user
interface. Let form follow function. The user may need all the space
available.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

Thanks much for the lucid explanation! Really appreciated it. Looks
like <fieldset> and <legend> doesn't fit in out situation. I changed
to <div>, all looks better now.

Bing

dubing (AT) gmail (DOT) com wrote:

On Feb 23, 2:07 am, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Scripsit dub... (AT) gmail (DOT) com:

From the markup point of view, the problem of excessively long <legend
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:

FIELDSET
LEGEND>Current Medication</LEGEND
Are you currently taking any medication?
INPUT name="medication_now"
...
/FIELDSET

So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.

Some questions are pretty long and cannot fit in the layout.

Just put the questions inside the <fieldset> after the <legend> element.


Thanks much for the lucid explanation! Really appreciated it. Looks
like <fieldset> and <legend> doesn't fit in out situation. I changed
to <div>, all looks better now.

Then it seems as if you didn't read all of Jukka's words. What's wrong with:

<fieldset class="survey_item">
<legend class="question"><span class="questionNumber">6.</span></legend>
If the answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?
<input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="1" />No<br />
?

--
John

On Feb 23, 9:04 am, John Hosking <J... (AT) DELETE (DOT) Hosking.name.INVALID>
wrote:

dub... (AT) gmail (DOT) com wrote:
On Feb 23, 2:07 am, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Scripsit dub... (AT) gmail (DOT) com:
From the markup point of view, the problem of excessively long <legend
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:

FIELDSET
LEGEND>Current Medication</LEGEND
Are you currently taking any medication?
INPUT name="medication_now"
...
/FIELDSET

So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.

Some questions are pretty long and cannot fit in the layout.

Just put the questions inside the <fieldset> after the <legend> element.

Thanks much for the lucid explanation! Really appreciated it. Looks
like <fieldset> and <legend> doesn't fit in out situation. I changed
to <div>, all looks better now.

Then it seems as if you didn't read all of Jukka's words. What's wrong with:

fieldset class="survey_item"
legend class="question"><span class="questionNumber">6.</span></legend
If the answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?
input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="1" />No<br /
?

--
John

Aha! Thanks much for waking me up. I got the point now. Yup, looks
like that helps fix my problem.

Bing