Draw line from label to right margin

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?

--

Haines Brown, KB1GRM

Haines Brown <brownh (AT) teufel (DOT) hartford-hwp.com> wrote:

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.

--
Spartanicus

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>


--

Haines Brown, KB1GRM

Haines Brown <brownh (AT) teufel (DOT) hartford-hwp.com> wrote:

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.

--
Spartanicus

Spartanicus <invalid (AT) invalid (DOT) invalid> writes:

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.

--

Haines Brown, KB1GRM

Haines Brown <brownh (AT) teufel (DOT) hartford-hwp.com> wrote:

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

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

--
Spartanicus

Haines Brown wrote:

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.

Haines Brown wrote:

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?

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>

--
Gus

Harlan Messinger <hmessinger.removethis (AT) comcast (DOT) net> writes:

Haines Brown wrote:
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.

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

--

Haines Brown, KB1GRM

Gus,

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

--

Haines Brown, KB1GRM