Legends and Head­ings

One day in the last de­cem­ber I tried to find out what we can do with the leg­end el­e­ment. I wanted to move it in the field­set’s frame, and did­n’t want to style it out ’cause the field­sets with leg­end have this spe­cial be­hav­ior: the field­set’s bor­der gets the gap for the leg­end to fit in.

So, I made some tricks to em­u­late dif­fer­ent be­hav­iors: move the leg­end to the right, cen­ter or even make vi­su­ally two leg­ends in one fieldset.

The eas­i­est part is the po­si­tion­ing of the leg­end to the right: use the di­rec­tion: rtl and the po­si­tion of the leg­end would ad­juct ac­cord­ingly. And don’t for­get to bring back the ltr di­rec­tion on the child el­e­ments.

For the cen­tered and the dou­ble one I used a hack with ex­tra el­e­ments and stretched leg­end. There could be pseu­dos in­stead of some ex­tra el­e­ments, but there were some bugs with them there, so I just used the ex­tras here. Of course it’s not that «fair», but you can style it so it would look like bor­ders, so… Here is a dab­blet with those field­sets and legends:

And there is a sim­plier demo of the head­ings with rulers on the sides. The main point is to use only one el­e­ment and to make the bor­ders some­what «fair», so if there would be a back­ground, there would be vi­sual gaps. Other sim­i­lar meth­ods I saw used the fake back­ground on the cen­tered item to cover the line un­der it.

It’s sad that you can’t do mul­ti­line vari­ant us­ing only one el­e­ment —so in that case there is one ex­tra span. In other cases there is only the header and the pseu­dos —and it must de­grade grace­fully. So here is it’s dabblet:


Here are the centered headings with horizontal lines.

They are one-lined by default, but if it needs to be multiline, then you can add an extra span.

Multiline heading
with an extra wrapping span

Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown. Some long, long heading without a wrapping span, so it would be overflown.

↑ Here you can see one-lined heading, with text-overflow: ellipsis. Since it's too long, the horizontal lines cannot be seen.