Opened 7 years ago

Closed 7 years ago

#16077 closed defect (fixed)

NumberTextBox: comma, dot, minus etc. are at the wrong place by dir:'RTL'

Reported by: charly Owned by: Douglas Hays
Priority: undecided Milestone: 1.8.2
Component: Dijit - Form Version: 1.8.0
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by Douglas Hays)

comma, dot, minus, etc. are at the wrong place by dir:'RTL', after input a number.

example: .563

<input id="item_value"
  data-dojo-type="dijit/form/NumberTextBox"
  data-dojo-props="trim:true,
                   required:false,
                   dir:'RTL'
>

Attachments (2)

commat_before_number.jpg (2.7 KB) - added by charly 7 years ago.
comma is before number
16077.patch (360 bytes) - added by Douglas Hays 7 years ago.

Download all attachments as: .zip

Change History (22)

comment:1 Changed 7 years ago by bill

Component: GeneralDijit - Form
Owner: set to charly
Status: newpending

RTL needs to be lowercase. Does it work then?

If not attach full testcase using attach file button.

Changed 7 years ago by charly

Attachment: commat_before_number.jpg added

comma is before number

comment:2 Changed 7 years ago by charly

Status: pendingnew

Attachment (commat_before_number.jpg) added by ticket reporter.

comment:3 Changed 7 years ago by charly

lowercase = true doesn't work.

comment:4 Changed 7 years ago by bill

Status: newpending

RTL needs to be lowercase. Also, images are not test cases.

comment:5 Changed 7 years ago by charly

Status: pendingnew

Test case:

<html>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<head>
 
<script type="text/javascript" src="/JavascriptLibraries/dojo-release-1.8.0-src/dojo/dojo.js"
   data-dojo-config="async: true, parseOnLoad: true, isDebug: true, useCommentedJson: true, locale:'en-us', require:['dojo/parser']">
</script>

<link rel="stylesheet" type="text/css" href="/JavascriptLibraries/dojo-release-1.8.0-src/dijit/themes/tundra/tundra.css" >


<body class="tundra">
<form>

<input id="item_value"
       data-dojo-type="dijit/form/NumberTextBox"
       data-dojo-props="dir:'rtl',               
                        lowercase:true"                                            
>


</form>

<script type="text/javascript">
require(["dijit/form/NumberTextBox"],
        
  function(){
        
  
});//require
</script>

comment:6 Changed 7 years ago by bill

Status: newpending

Thanks for the testcase.

What makes you think the dot is in the wrong place? IIUC numbers, just like english text, are always displayed left to right, regardless of the DIR setting.

Last edited 7 years ago by bill (previous) (diff)

comment:7 Changed 7 years ago by charly

Status: pendingnew

Difficult to explain, I try.

When I enter the first number (5) and then dot. Dot switch to first place (.5). Then the next number (3) dot switch to the right place (5.3). This switch from dot is inexplicable.

Last edited 7 years ago by charly (previous) (diff)

comment:8 Changed 7 years ago by bill

Owner: changed from charly to Douglas Hays
Status: newassigned
Summary: dijit/form/NumberTextBox: comma, dot, minus etc. are at the wrong place by dir:'RTL'NumberTextBox: comma, dot, minus etc. are at the wrong place by dir:'RTL'

Ah I see. With a string like ".5" the browser doesn't know if the dot is a decimal point or a period, and it guesses the latter.

Your test case is strange in that there's no reason to set dir: "rtl" on a NumberTextBox. However, I can imagine a more realistic example where direction is set on an ancestor node, or inherited from the page itself.

In other words, seems like numbers should always be displayed left-to-right, so a NumberTextBox's <input> should always have an "ltr" direction setting, regardless of inherited "dir", or "dir" parameter.

comment:9 Changed 7 years ago by Douglas Hays

Milestone: tbd1.9

I don't like ignoring the dir parameter explicitly set on the widget but I agree with ignoring an inherited attribute.

comment:10 Changed 7 years ago by Douglas Hays

Description: modified (diff)

charly,bill: just to make sure everyone agrees, NumberTextBox dir="ltr" within a "rtl" Dialog will make those widgets left-aligned which looks odd when all the other fields are right-aligned.

Last edited 7 years ago by Douglas Hays (previous) (diff)

comment:11 in reply to:  10 Changed 7 years ago by bill

Replying to doughays:

I don't like ignoring the dir parameter explicitly set on the widget but I agree with ignoring an inherited attribute.

Yah, I just don't see how to differentiate the two. The inheritance is handled by the parser, or by ContentPane, and appears as an explicitly set parameter to the widget.

Replying to doughays:

charly,bill: just to make sure everyone agrees, NumberTextBox dir="ltr" within a "rtl" Dialog will make those widgets left-aligned which looks odd when all the other fields are right-aligned.

Hmm, that is odd, seems like text should always be right aligned. I don't know how to achieve that while at the same time making ".5" display in LTR format. One possibility for new browsers is to use type=number on the <input>. Not sure what effect that has.

comment:12 Changed 7 years ago by charly

But it's weird that the dot (comma etc.) is switching.

comment:13 Changed 7 years ago by bill

It's not weird to me. When the browser sees "0.5" it realizes that the string is LTR, and displays it as such.

@doughays: maybe we want CSS of dir: ltr, text-align: right?

Changed 7 years ago by Douglas Hays

Attachment: 16077.patch added

comment:14 Changed 7 years ago by Douglas Hays

charly, please test with the attached patch

comment:15 Changed 7 years ago by charly

yes it's working perfect. thanks

comment:16 Changed 7 years ago by charly

Can we change the milestone from 1.9 to 1.8.1?

comment:17 Changed 7 years ago by Douglas Hays

Milestone: 1.91.8.2

comment:18 Changed 7 years ago by Douglas Hays

A slight tweak will allow text-align to be specified in markup to customize NumberTextBox fields:

.dijitNumberTextBox {
        text-align: left;
        direction: ltr;
}
div.dijitNumberTextBoxRtl {
        text-align: right;
}
.dijitNumberTextBox input {
        text-align: inherit;
}

So now

<input dojotype="dijit/form/NumberTextBox" style="text-align:right;">

will generate a right-aligned number text field for decimal alignment scenarios even in a left-aligned page.

comment:19 Changed 7 years ago by Douglas Hays

The same changes to NumberSpinner but probably not _Spinner in general (e.g. dojox/form/TimeSpinner).

comment:20 Changed 7 years ago by Douglas Hays

Resolution: fixed
Status: assignedclosed

In [29825]:

Fixes #16077. Add default direction/text-align styling to NumberTextBox and NumberSpinner.

Note: See TracTickets for help on using tickets.