Text field text alignment

Discussion in 'HTML' started by Karsten Wutzke, Dec 14, 2006.

  1. Hi all!

    How do you right align text within a text field (<input ...> tag) for
    decimal/floating point values??

    Sorry for this short q, tried many things that don't seem to work.

    align="right"
    halign="right"

    ....don't work.

    Karsten

    PS: is it possible to align at the decimal point?
     
    Karsten Wutzke, Dec 14, 2006
    #1
    1. Advertising

  2. Karsten Wutzke wrote:
    > Hi all!
    >
    > How do you right align text within a text field (<input ...> tag) for
    > decimal/floating point values??
    >
    > Sorry for this short q, tried many things that don't seem to work.
    >
    > align="right"
    > halign="right"
    >
    > ...don't work.


    In stylesheet:
    /* make right aligned */
    ..toright { text-align: right; }


    HTML:
    <input name="test" type="text" size="10" class="toright" value="sample">



    > PS: is it possible to align at the decimal point?
    >


    Not on INPUT elements, on table cells but I believe browser support it
    spotty

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 14, 2006
    #2
    1. Advertising

  3. Scripsit Jonathan N. Little:

    >> PS: is it possible to align at the decimal point?
    >>

    >
    > Not on INPUT elements, on table cells but I believe browser support it
    > spotty


    By the CSS 2.0 specification, you can use text-align: ".", and you could
    even use the display property to turn input elements into cells in CSS sense
    (i.e., as elements to be rendered as table cells). But string values for
    text-align haven't been implemented at all, and the drafts for CSS 2.1 (work
    in progress) have this feature removed.

    For table cells, there are somewhat contrived techniques to create the
    impression of aligning at the decimal point, and they work part of the time.
    I guess it would be possible to do something similar with input elements,
    using JavaScript to insert special space characters as needed, but it would
    not work reliably at all in any open environment.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Dec 14, 2006
    #3
  4. Jukka K. Korpela wrote:
    > Scripsit Jonathan N. Little:
    >
    >>> PS: is it possible to align at the decimal point?
    >>>

    >>
    >> Not on INPUT elements, on table cells but I believe browser support it
    >> spotty

    >
    > By the CSS 2.0 specification, you can use text-align: ".", and you could
    > even use the display property to turn input elements into cells in CSS
    > sense (i.e., as elements to be rendered as table cells). But string
    > values for text-align haven't been implemented at all, and the drafts
    > for CSS 2.1 (work in progress) have this feature removed.
    >
    > For table cells, there are somewhat contrived techniques to create the
    > impression of aligning at the decimal point, and they work part of the
    > time. I guess it would be possible to do something similar with input
    > elements, using JavaScript to insert special space characters as needed,
    > but it would not work reliably at all in any open environment.
    >

    I thought I had seen it somewhere but could not find it. Moot though,
    because I haven't a browser that supports it.

    For OP your best solution is to style for right alignment and make sure
    your font is monospace "fix-width" and has a consistent number of
    decimal digits.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 14, 2006
    #4
  5. Karsten Wutzke

    Bergamot Guest

    Jonathan N. Little wrote:
    >
    > .toright { text-align: right; }
    >
    > <input name="test" type="text" size="10" class="toright" value="sample">


    You should use a class name that describes the content, not the style.
    In the OP's case, class="amount" or something else indicative of numeric
    content would be more suitable.

    --
    Berg
     
    Bergamot, Dec 14, 2006
    #5
  6. Bergamot wrote:
    > Jonathan N. Little wrote:
    >> .toright { text-align: right; }
    >>
    >> <input name="test" type="text" size="10" class="toright" value="sample">

    >
    > You should use a class name that describes the content, not the style.
    > In the OP's case, class="amount" or something else indicative of numeric
    > content would be more suitable.
    >

    Normally *I* would, like I have a class "bucks" for formating my
    currency cells, but A) I did not know what the OP's purpose for his
    right aligned cells since he did not supply a URL and B) If a made one
    up, it might confuse the OP so I chose a very clear demo label

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 14, 2006
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jerry Manner
    Replies:
    5
    Views:
    583
    Jonathan N. Little
    Jun 9, 2005
  2. bg

    Bit Field Alignment

    bg, Apr 17, 2006, in forum: C Programming
    Replies:
    4
    Views:
    455
    Vladimir S. Oka
    Apr 18, 2006
  3. eddie wang

    Alignment of a result field

    eddie wang, Feb 10, 2004, in forum: ASP General
    Replies:
    3
    Views:
    116
    eddie wang
    Feb 10, 2004
  4. Sound
    Replies:
    2
    Views:
    503
    Randy Webb
    Sep 28, 2006
  5. jr
    Replies:
    3
    Views:
    502
Loading...

Share This Page