right aligned input field

[Markus Mueller]

Hi,

I'm using a form with a bunch of input tags to enter numbers. Is there any
way to make the input field right adjusted, so that the numbers align at the
right side instead of the left? Even plain html doesn't work, could java
script or something else help?

Bye
Markus

[Martin Honnen]

Markus Mueller wrote:

I'm using a form with a bunch of input tags to enter numbers. Is there any
way to make the input field right adjusted, so that the numbers align at the
right side instead of the left? Even plain html doesn't work, could java
script or something else help?

Try CSS
<style type="text/css">
@import url(styles.css);
</style>
with the file styles.css containing
input.rightAligned {
text-align: right;
}
and then
<input type="text" class="rightAligned">
--

Martin Honnen
http://JavaScript.FAQTs.com/

[Andreas Prilop]

On Tue, 18 May 2004, Markus Mueller wrote:

X-Newsreader: Microsoft Outlook Express 5.50.4927.1200
Please visit <http://piology.org/news/oe-erste-schritte.html>
I'm using a form with a bunch of input tags to enter numbers. Is there any
way to make the input field right adjusted, so that the numbers align at the
right side instead of the left?

DIR="RTL"
For example <http://www.google.co.il/>

--
Nicht's geht mehr ohne Apostroph.

[Ney André de Mello Zunino]

Martin Honnen wrote:

Try CSS
<style type="text/css">
@import url(styles.css);
</style>
with the file styles.css containing
input.rightAligned {
text-align: right;
}
and then
<input type="text" class="rightAligned">

True, that will often produce the desired effect. However, it is worth
mentioning that, in fact, it should not. According to the CSS2
Specification [1], the /text-align/ property applies only to block-level
elements, which /<input>/ is not. I do not know how or if CSS3 will
address this matter.

[1] http://www.w3.org/TR/REC-CSS2/text.html#alignment-prop

Regards,

--
Ney André de Mello Zunino

[Jukka K. Korpela]

Andreas Prilop <nh******@rrzn-user.uni-hannover.de> wrote:

I'm using a form with a bunch of input tags to enter numbers. Is
there any way to make the input field right adjusted, so that the
numbers align at the right side instead of the left?

DIR="RTL"

Isn't that a bit tricky? It's based on the effect that dir="rtl"
implicitly sets align="right", which you could set too but doesn't quite
work (and is obscurely defined) _and_ on the fact that digits have
inherent directionality so that they won't be written right to left.
I'm not that familiar with directionality, and I don't know how well it
has been implemented, but if I try
<input dir="rtl">
and type first "-", then "1", the field contains "1-". Similarly,
"." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".

So I would use
<input style="text-align: right; display: block">
together with precautions that deal with the block presentation, as
discussed at http://www.cs.tut.fi/~jkorpela/forms/present.html#align

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Andreas Prilop]

On Tue, 18 May 2004, Jukka K. Korpela wrote:

DIR="RTL"
Isn't that a bit tricky?

Yes.
So I would use
<input style="text-align: right; display: block">
together with precautions that deal with the block presentation, as
discussed at http://www.cs.tut.fi/~jkorpela/forms/present.html#align

Agree!

--
Top-posting.
What's the most irritating thing on Usenet?

[Stanimir Stamenkov]

/Jukka K. Korpela/:

So I would use
<input style="text-align: right; display: block">
together with precautions that deal with the block presentation, as
discussed at http://www.cs.tut.fi/~jkorpela/forms/present.html#align

Why 'display: block'? Isn't the INPUT element already an 'inline-block'?

--
Stanimir

[Jukka K. Korpela]

Stanimir Stamenkov <s7****@netscape.net> wrote:

Why 'display: block'? Isn't the INPUT element already an
'inline-block'?

Who knows? There is no _normative_ specification of the rendering of
INPUT elements in CSS terms, just a vague "sample style sheet". But
in any case, inline-block is not a CSS 2 concept at all, and the sample
style sheet http://www.w3.org/TR/REC-CSS2/sample.html assigns no display
value to it, hence defaulting to display: inline, which implies that
text-align does not apply. Setting display: block fixes this.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Stanimir Stamenkov]

/Jukka K. Korpela/:

Stanimir Stamenkov <s7****@netscape.net> wrote:

Why 'display: block'? Isn't the INPUT element already an
'inline-block'?

Who knows? There is no _normative_ specification of the rendering of
INPUT elements in CSS terms, just a vague "sample style sheet". But
in any case, inline-block is not a CSS 2 concept at all, and the sample
style sheet http://www.w3.org/TR/REC-CSS2/sample.html assigns no display
value to it, hence defaulting to display: inline, which implies that
text-align does not apply. Setting display: block fixes this.

As you mention, CSS2 doesn't specify how replaced elements are
affected by the style rules, so I don't think setting 'display:
block' fixes anything, really. IIRC the later development on CSS
defines replaced elements as blocks and setting 'display: inline' or
'display: inline-block' on them is effectively the same. But I don't
recall if it is determined how other properties would affect
replaced elements (their content) and every style applied would be
just a wild guess.

--
Stanimir

[Jukka K. Korpela]

Stanimir Stamenkov <s7****@netscape.net> wrote:

As you mention, CSS2 doesn't specify how replaced elements are
affected by the style rules, so I don't think setting 'display:
block' fixes anything, really.

So it seems, in practice - IE, Opera, Firefox all right-align the field
content, when I use text-align: right, no matter whether there's
display: block too.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Andreas Prilop]

On Tue, 18 May 2004, Jukka K. Korpela wrote:

I'm not that familiar with directionality, and I don't know how well it
has been implemented, but if I try
<input dir="rtl">
and type first "-", then "1", the field contains "1-".
Internet Explorer, I presume? So this behaviour depends on the browser.
Similarly,
"." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".

At least one digit _before_ and _after_ the decimal sign is required.
(ISO 31, ISO 1000)

--
Top-posting.
What's the most irritating thing on Usenet?

[Jukka K. Korpela]

Andreas Prilop <nh******@rrzn-user.uni-hannover.de> wrote:

On Tue, 18 May 2004, Jukka K. Korpela wrote:

I'm not that familiar with directionality, and I don't know how well
it has been implemented, but if I try
<input dir="rtl">
and type first "-", then "1", the field contains "1-".

Internet Explorer, I presume? So this behaviour depends on the
browser.

Yes. I must admit I'm even more confused than before, but surely this
means that dir="rtl" isn't the right way to right align! (Maybe some HTML
zealots would prefer it since it's "pure HTML" and does not need CSS.)

Similarly,
"." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".

At least one digit _before_ and _after_ the decimal sign is required.
(ISO 31, ISO 1000)

In some notation systems (which also prefer the decimal _comma_ to
decimal point if I remember correctly), but this is about something that
operates in a situation where we only know that it deals with "numbers"
in an input field. The application might restrict numbers to unsigned
integers, but the behavior would still be surprising and most confusing
to a user who tries to enter numbers by some intuitive (to him) rules.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html