Draw line from label to right margin

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Haines Brown - 29 Nov 2006 17:37 GMT

I would like to have a label followed by a line to the right margin,
such as this:

Label: _____________________________________________________________

There are ways to define lines having specific length, but I wanted
one that would have variable length, surviving a change in display
window size or font. I came up with the ugly markup below. It looks OK
in a browser, but for some reason the line disappears when I print it.

span.label { float: left; padding-right: 2px; }
hr.line { border-style: solid; border-width: 1px 0 0 0;
position: relative; top: 1em;}

<span class="label">Label:</span><hr class="line" />

Is there a better way to go about this?

Signature

Haines Brown, KB1GRM

Reply to this Message

Spartanicus - 29 Nov 2006 18:03 GMT

>I would like to have a label followed by a line to the right margin,
>such as this:
>
>Label: _____________________________________________________________

Proper advice can only be given when you divulge what it is that you are
actually trying to do.

Lacking that information it looks like you are trying to use HTML to
create a form for people to print out, fill in and post off. If so then
the answer is that HTML is not the right tool to use, PDF would suit
that purpose much better.

Signature

Spartanicus

Reply to this Message

Haines Brown - 30 Nov 2006 02:30 GMT

I guess I'd best throw in my ugly hack. I was hoping that someone had a
more elegant solution than this.

The markup below does the job (run a line from a label to the right
margin so that folks can print a form), but a) It has not been tested
on different browsers, and I suspect some would not like it, b) I find
that my printer simply won't print a line that is only 1.1 px wide,
and hence the 1.2px. I don't know how other printers do. c) It also
presumes a white background. d) And it presumes what is not included
here, which is a containing div that stops the line at its right
border.

    div.label { height: 1em;
        border: solid white 1.2px;
        display: inline; float: left; }
    div.line { height: 1em;
        border-top: solid white 1.2px;
        border-right: solid white 1.2px;
        border-bottom: solid black 1.2px; }

    <div class="label">Label:</div><div class="line"></div>

Signature

Haines Brown, KB1GRM

Reply to this Message

Spartanicus - 30 Nov 2006 09:36 GMT

>I guess I'd best throw in my ugly hack.

In future don't waste our time if you are going to persist with a
method after having been made aware that it is broken and having been
given a proper solution.

Signature

Spartanicus

Reply to this Message

Haines Brown - 30 Nov 2006 13:04 GMT

> In future don't waste our time if you are going to persist with a
> method after having been made aware that it is broken and having
> been given a proper solution.

I trust you will never consider a teaching career ;-)

I was not told the method was "broken", but simply ordered to use a
different one. In fact it is not broken, for I demonstrated how to
draw such a line from a label to the right margin. I recognized some
weaknesses in my approach, and so I simply asked if there were a
better way to do it in CSS. There may be reasons why I should choose
PDF instead, but so far no one has said what they are.

I did try to convert the HTML to PDF directly, but had a problem with
a character that I'm using for a "checkbox": □, which is
interpreted literally rather than as a character. This is not the
forum in which to discuss this problem.

I realize that the best approach to create a PDF is to go from TeX to
PS to PDF, but since I already had a html file and no reason to think
I couldn't draw the needed lines, I saw no reason to go to the extra
trouble.

Signature

Haines Brown, KB1GRM

Reply to this Message

Spartanicus - 30 Nov 2006 13:57 GMT

>I was not told the method was "broken", but simply ordered to use a
>different one.

No such language or tone was used.

>In fact it is not broken, for I demonstrated how to
>draw such a line from a label to the right margin. I recognized some
>weaknesses in my approach, and so I simply asked if there were a
>better way to do it in CSS. There may be reasons why I should choose
>PDF instead, but so far no one has said what they are.

An HTML + CSS method is unlikely to be a good solution. There are
certain assumptions in that statement due to the fact that you continue
to refuse to disclose what it is that you are actually trying to do.

It appears that you have already decided on a certain implementation and
are unwilling to consider that your choice was a poor one to start with.

That being the case there is little point in asking for advice in this
hierarchy where the knowledgable regulars are known to point out the
underlying problems associated with shooting one's self through the foot
instead of explaining the loading and trigger mechanism of the gun.

>I did try to convert the HTML to PDF directly, but had a problem with
>a character that I'm using for a "checkbox": □, which is
[quoted text clipped - 5 lines]
>I couldn't draw the needed lines, I saw no reason to go to the extra
>trouble.

Since you have not disclosed what it is that you are actually trying to
do the above makes no sense.

Signature

Spartanicus

Reply to this Message

Harlan Messinger - 30 Nov 2006 14:40 GMT

> I was not told the method was "broken", but simply ordered to use a
> different one. In fact it is not broken, for I demonstrated how to
> draw such a line from a label to the right margin. I recognized some
> weaknesses in my approach, and so I simply asked if there were a
> better way to do it in CSS. There may be reasons why I should choose
> PDF instead, but so far no one has said what they are.

What you're looking for is a method of transmitting material laid out
specifically for the printed page. HTML is not designed for or well
suited for that purpose. PDF is designed precisely for that purpose.

Reply to this Message

Haines Brown - 30 Nov 2006 22:10 GMT

>> I was not told the method was "broken", but simply ordered to use a
>> different one. In fact it is not broken, for I demonstrated how to
[quoted text clipped - 6 lines]
> specifically for the printed page. HTML is not designed for or well
> suited for that purpose. PDF is designed precisely for that purpose.

Thank you for at least some explanation. I'll knock up the files in
TeX and go the -> PS -> PDF route.

Signature

Haines Brown, KB1GRM

Reply to this Message

Gus Richter - 30 Nov 2006 15:44 GMT

> I would like to have a label followed by a line to the right margin,
> such as this:
[quoted text clipped - 13 lines]
>
> Is there a better way to go about this?

Opera is not happy with it. Try this method for your needs. Fx, Opera
and IE are happy with it.

p { border-bottom: 1px solid black;
}
p span {background-color: white; /* same as used background-color */
position: relative;
top: 0.25em;
padding: 0 1em 0 0;
}

<p><span>Label:</span></p>

Signature

Gus

Reply to this Message

Haines Brown - 30 Nov 2006 22:34 GMT

Gus,

Thanks for the interesting markup. I've decided on PDF, but this is
good to know.

Signature

Haines Brown, KB1GRM

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / November 2006

Draw line from label to right margin