Opened 8 years ago
Closed 8 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 )
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)
Change History (22)
comment:1 Changed 8 years ago by
| Component: | General → Dijit - Form |
|---|---|
| Owner: | set to charly |
| Status: | new → pending |
comment:2 Changed 8 years ago by
| Status: | pending → new |
|---|
Attachment (commat_before_number.jpg) added by ticket reporter.
comment:4 Changed 8 years ago by
| Status: | new → pending |
|---|
RTL needs to be lowercase. Also, images are not test cases.
comment:5 Changed 8 years ago by
| Status: | pending → new |
|---|
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 8 years ago by
| Status: | new → pending |
|---|
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.
comment:7 Changed 8 years ago by
| Status: | pending → new |
|---|
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.
comment:8 Changed 8 years ago by
| Owner: | changed from charly to Douglas Hays |
|---|---|
| Status: | new → assigned |
| 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 8 years ago by
| Milestone: | tbd → 1.9 |
|---|
I don't like ignoring the dir parameter explicitly set on the widget but I agree with ignoring an inherited attribute.
comment:10 follow-up: 11 Changed 8 years ago by
| 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.
comment:11 Changed 8 years ago by
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:13 Changed 8 years ago by
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 8 years ago by
| Attachment: | 16077.patch added |
|---|
comment:17 Changed 8 years ago by
| Milestone: | 1.9 → 1.8.2 |
|---|
comment:18 Changed 8 years ago by
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 8 years ago by
The same changes to NumberSpinner but probably not _Spinner in general (e.g. dojox/form/TimeSpinner).
RTL needs to be lowercase. Does it work then?
If not attach full testcase using attach file button.