PDA

View Full Version : [FIXED] axis label has spacing where it shouldn't



jep
1 Nov 2012, 3:00 PM
In ST 2.1 RC2

There's some strange spacing on axis labels. Here's an example. Notice the red dots (I added the dots with Paint to point to the problem). Right above them are extra spaces that shouldn't be there.
39762



Ext.application({
launch:function () {
this.viewport = Ext.create('Ext.chart.CartesianChart', {
fullscreen:'true',
store:Ext.create('Ext.data.Store', {
fields:[
{name:'x', type:'int'},
{name:'y', type:'int'}
],
data:[
{x:10000, y:50000},
{x:20000, y:20000},
{x:30000, y:30000}
]
}
),
series:[
{type:'line', xField:'x', yField:'y', style:{stroke:'#00cb00', lineWidth:2}}
],
axes:[
{type:'numeric', minimum:0, position:'right', fields:['y']},
{type:'numeric', minimum:0, position:'bottom', fields:['x']}
]
});
}
});

mitchellsimoens
2 Nov 2012, 5:23 AM
Can I see how you are injecting the red dots?

jep
2 Nov 2012, 5:33 AM
Mspaint? :)

I just put the dots on to point out the areas of text with spacing issues. And because I was too lazy to draw arrows.

mitchellsimoens
2 Nov 2012, 5:43 AM
Do you mean the numbers should touch the line?

jep
2 Nov 2012, 5:51 AM
No, I mean there's extra spacing between the letters where it shouldn't be. Right above the dots.

For example:

5000 (looks fine)
100 00 (not fine - extra spacing between the 100 and the 00)

mitchellsimoens
2 Nov 2012, 5:54 AM
No, I mean there's extra spacing between the letters where it shouldn't be. Right above the dots.

For example:

5000 (looks fine)
100 00 (not fine - extra spacing between the 100 and the 00)

I see what you mean now

jep
2 Nov 2012, 5:55 AM
Sorry for the distraction of the dots. Next time - arrows. :D

I added a statement in the first post to clarify.

mitchellsimoens
2 Nov 2012, 6:00 AM
Looks to be a windows only issue. Can reproduce on win 7 32bit using Chrome 22 but not on Mac or iOS Simulator.

mitchellsimoens
2 Nov 2012, 6:00 AM
Thanks for the report! I have opened a bug in our bug tracker.

jep
2 Nov 2012, 6:20 AM
Confirmed. I only see it in Chrome on XP. I don't see it in Safari on XP, and I don't see it on my iPad or in either Chrome or Dolphin on my android tablet. It's mainly frustrating because Chrome is what I use to demo all my apps with my boss because we can both watch it on a machine I remotely connect to. Oh, and it's also what we use to demo apps in teleconferences with potential clients. :(

BrendanC
12 Nov 2012, 1:49 PM
This appears to be a problem with Chrome Windows text rendering in general. The solution I suggest is to use a different font for the label config.
Default helvetica:
39989
Verdana:

label: {
fontFamily: 'verdana'
}
39990

jep
12 Nov 2012, 2:07 PM
Huh, how bizarre. Thanks for chasing that down. I had planned on changing the font anyway but it's good to know I need to look out for that. Did you happen to find a link to a bug on chromium's bugtracker? I'd like to monitor it.

BrendanC
12 Nov 2012, 3:00 PM
Too many to bugs list here, but googling "Chrome Windows text" should give you what you are looking for. However, you might find this in depth article (http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/) I came across informative. While there are inherent issues with Window XP's text rendering I'm guessing this issue in particular is exacerbated by the labels being transformed on the canvas.