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]

Re: right aligned input field



Markus Mueller wrote:
[color=blue]
> 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?[/color]

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

Martin Honnen

http://JavaScript.FAQTs.com/

[Andreas Prilop]

Re: right aligned input field

On Tue, 18 May 2004, Markus Mueller wrote:
[color=blue]
> X-Newsreader: Microsoft Outlook Express 5.50.4927.1200[/color]

Please visit <http://piology.org/news/oe-erste-schritte.html>
[color=blue]
> 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?[/color]

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

--
Nicht's geht mehr ohne Apostroph.

[Ney André de Mello Zunino]

Re: right aligned input field

Martin Honnen wrote:
[color=blue]
> Try CSS
> <style type="text/css">
> @import url(styles.css) ;
> </style>
> with the file styles.css containing
> input.rightAlig ned {
> text-align: right;
> }
> and then
> <input type="text" class="rightAli gned">[/color]

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]

Re: right aligned input field

Andreas Prilop <nhtcapri@rrz n-user.uni-hannover.de> wrote:
[color=blue][color=green]
>> 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?[/color]
>
> DIR="RTL"[/color]

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]

Re: right aligned input field

On Tue, 18 May 2004, Jukka K. Korpela wrote:
[color=blue][color=green]
>> DIR="RTL"[/color]
>
> Isn't that a bit tricky?[/color]

Yes.
[color=blue]
> 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[/color]

Agree!

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

[Stanimir Stamenkov]

Re: right aligned input field

/Jukka K. Korpela/:
[color=blue]
> 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[/color]

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

--
Stanimir

[Jukka K. Korpela]

Re: right aligned input field

Stanimir Stamenkov <s7an10@netscap e.net> wrote:
[color=blue]
> Why 'display: block'? Isn't the INPUT element already an
> 'inline-block'?[/color]

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]

Re: right aligned input field

/Jukka K. Korpela/:[color=blue]
> Stanimir Stamenkov <s7an10@netscap e.net> wrote:
>[color=green]
>> Why 'display: block'? Isn't the INPUT element already an
>> 'inline-block'?[/color]
>
> 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.[/color]

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]

Re: right aligned input field

Stanimir Stamenkov <s7an10@netscap e.net> wrote:
[color=blue]
> 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.[/color]

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]

Re: right aligned input field

On Tue, 18 May 2004, Jukka K. Korpela wrote:
[color=blue]
> 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-".[/color]

Internet Explorer, I presume? So this behaviour depends on the browser.
[color=blue]
> Similarly,
> "." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".[/color]

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]

Re: right aligned input field

Andreas Prilop <nhtcapri@rrz n-user.uni-hannover.de> wrote:
[color=blue]
> On Tue, 18 May 2004, Jukka K. Korpela wrote:
>[color=green]
>> 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-".[/color]
>
> Internet Explorer, I presume? So this behaviour depends on the
> browser.[/color]

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.)
[color=blue][color=green]
>> Similarly,
>> "." followed by "1" (meant to mean ".1", i.e. "0.1") produces "1.".[/color]
>
> At least one digit _before_ and _after_ the decimal sign is required.
> (ISO 31, ISO 1000)[/color]

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