PDA

View Full Version : [CLOSED] In Internet explorer 8.0 chart X & Y-axis label font not displaying readable format.



PriceRightHTML5team
Mar 25, 2014, 11:24 AM
Hi,

In Internet explorer 8.0 chart X & Y-axis label font not displaying readable format.

Please find attached image captured in IE8

Daniil
Mar 25, 2014, 3:48 PM
Hi @PriceRightHTML5team,

I cannot reproduce. Maybe, a required font is not installed in OS.

PriceRightHTML5team
Mar 26, 2014, 4:14 AM
Hi @PriceRightHTML5team,

I cannot reproduce. Maybe, a required font is not installed in OS.

Daniil font is already there in OS and that issue only able to replicate in Internet explorer 8.0 apart from IE 8.0 on same OS its working fine for other browsers like IE 9.0 & IE 10.0 ,Chrome,Mozilla FirFox.

Daniil
Mar 26, 2014, 7:39 PM
Daniil font is already there in OS and that issue only able to replicate in Internet explorer 8.0 apart from IE 8.0 on same OS its working fine for other browsers like IE 9.0 & IE 10.0 ,Chrome,Mozilla FirFox.

I guess you are testing on different machines, because you can have the only IE version installed at the same time. Right? Or you are testing some IE in different modes. Those modes can produce wrong results. I mean, for example, that IE9 in IE8 mode and original IE8 can produce different results.

PriceRightHTML5team
Mar 27, 2014, 6:25 AM
I guess you are testing on different machines, because you can have the only IE version installed at the same time. Right? Or you are testing some IE in different modes. Those modes can produce wrong results. I mean, for example, that IE9 in IE8 mode and original IE8 can produce different results.

Daniil,your saying correct on same OS only one IE version installed at same time but for this chart font issue i downgraded IE version from IE 11.0 to IE8 one by one and each time when i m downgraded IE tested the same chart then i come to know it working fine with IE 11.0,IE 10.0 & IE 9.0 but not working with IE 8.0 and same thing i tried with IE modes before downgrading IE but by changing IE modes i m unable to reproduce it.

geoffrey.mcgill
Mar 27, 2014, 4:37 PM
We have tested on BrowserStack using a full Windows install with native IE8 and were not able to reproduce the issue.

PriceRightHTML5team
Apr 08, 2014, 10:35 AM
We have tested on BrowserStack using a full Windows install with native IE8 and were not able to reproduce the issue.

Hi Geoffrey,

this issue not reproducing on BrowserStack to reproduce this we need install full version of IE 8 on local machine. we have tested this issue on three different machine with following configuration and all three machine we are facing same chart font issue in IE 8.0

Processor : Intel(R)Core(TM) i3-3120M CPU @ 2.50GHz
RAM : 8.00 GB
Operating System : Windows 7 Enterprise
System Type : 64 bit
Internet Explorer Version : 8.0.7601.17514 64 bit Edition
Ext.net version : 2.2.0.26551

PriceRightHTML5team
Apr 08, 2014, 11:08 AM
Hi,

i tested Ext.net.2.5 chart sample facing same issue please find attached image capture.

Daniil
Apr 08, 2014, 3:58 PM
I still cannot reproduce.

Please inspect the label elements. What font is being applied to them?

I see the following in the style attribute:

font-family: Arial, Helvetica, sans-serif;

What do you see?

Also please clarify the following. Can you reproduce it with other examples? Or is it only with the Column/Basic example? Could you, please, provide us with screenshots of other examples?

Also can you reproduce it in other browsers? IE9, IE10, Chrome, FireFox?

Daniil
Apr 08, 2014, 5:06 PM
The styles for an axis's labels are predefined in a Chart's themes. There is the Base theme by default.
http://docs.sencha.com/extjs/4.2.1/source/Base2.html#Ext-chart-theme-Base

There is the following "font" rule defined in the Base theme for an axis's labels.

font: '12px Arial, Helvetica, sans-serif'

Could you, please, run the following page on your requirement and post a screenshot?

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<div style="font: 12px Arial, Helvetica, sans-serif;">Some text to test the font rule!</div>
</body>
</html>

PriceRightHTML5team
Apr 09, 2014, 6:19 AM
The styles for an axis's labels are predefined in a Chart's themes. There is the Base theme by default.
http://docs.sencha.com/extjs/4.2.1/source/Base2.html#Ext-chart-theme-Base

There is the following "font" rule defined in the Base theme for an axis's labels.

font: '12px Arial, Helvetica, sans-serif'

Could you, please, run the following page on your requirement and post a screenshot?

Example

<%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<div style="font: 12px Arial, Helvetica, sans-serif;">Some text to test the font rule!</div>
</body>
</html>



Thanks Daniil for detailed reply.

Daniil,this issue is coming only on chart label or text not with other controls and only reproduce in full version of IE 8.0 not in any other browser Chrome,Mozilla which i already mention in my previous post. the example which you have given in last post some text in a div with font i tested it and its working fine because this font issue is not with other controls except text on chart with this post i attached other chart example screenshot from ext.net samples with its render code in IE 8.0 i hope that can help us to find solution.

Daniil
Apr 09, 2014, 6:04 PM
Thank you.

It looks people have similar problems with fonts in IE8.
http://answers.microsoft.com/en-us/ie/forum/ie9-windows_7/new-computer-using-internet-explorer-8-displays/b5cd7f71-4d78-4fbd-8f27-00c81c00e539
http://answers.microsoft.com/en-us/ie/forum/ie8-windows_other/all-browsers-are-having-corrupted-arial-font/1eae289a-dd2a-46f3-94eb-20752155d281

Now I am pretty sure something is wrong with fonts in your Windows/IE8 setup.

PriceRightHTML5team
Apr 10, 2014, 8:56 AM
Thank you.

It looks people have similar problems with fonts in IE8.
http://answers.microsoft.com/en-us/ie/forum/ie9-windows_7/new-computer-using-internet-explorer-8-displays/b5cd7f71-4d78-4fbd-8f27-00c81c00e539
http://answers.microsoft.com/en-us/ie/forum/ie8-windows_other/all-browsers-are-having-corrupted-arial-font/1eae289a-dd2a-46f3-94eb-20752155d281

Now I am pretty sure something is wrong with fonts in your Windows/IE8 setup.

Daniil,i went through both Microsoft answer link provided by you and tried following solution one by one which is mention in microsoft answer link

tried Solution 1 : i copied Arial font from another system where it working fine and installed in my system and without restarting system tested same chart with IE 8.0 by clearing its history but facing same issue.

tried Solution 2 : i copied Arial font from another system where it working fine and installed in my system and now restart the system tested same chart with IE 8.0 by clearing its history but getting same issue

tried Solution 3 : by Restore default font settings option from Control Panel > All Control Panel Items > Fonts >Font settings and tested same chart with IE 8.0 by clearing its history but still getting same issue

tried Solution 4 : tried with by uncheck "Ignore font styles specified on web page" option from Tools>Internet Options >General tab > Accessibility and tested same chart with IE 8.0 by clearing its history but no any luck same issue

while reading both the answer links i come to conclusion that the font issue which they people getting its not any specific control like answer link 1
http://answers.microsoft.com/en-us/ie/forum/ie9-windows_7/new-computer-using-internet-explorer-8-displays/b5cd7f71-4d78-4fbd-8f27-00c81c00e539 in question they mention that facing issue in HTML text in Internet Explorer 8 displaying Italic font but in our case we are facing issue only with the text which we have on chart not any other HTML text or any other control and answer link 2 they mentioned facing issue in all browser in our case we are facing in only IE 8.0 but any way we tried all the solution mentioned in both Microsoft answer links.

one thing i want to mention here while searching about this issue on google i come to know that same chart font issue with sencha also please refer following link for more details http://www.sencha.com/forum/showthread.php?231240-IE9-x64-Chart-Display-Italic-fonts

one more thing i observe that if we export same chart to image on exported image we are not getting that font issue.

geoffrey.mcgill
Apr 10, 2014, 11:32 AM
Yes, this is likely an issue with Chart JavaScript (Rapha?lJS or varient of Rapha?l) and VML support within IE8.

That is likely the cause, but finding a fix may not be possible and will be considered a Defect of Ext JS.

We will do some research to try and find a fix (or work-around). Not being able to reproduce the issue on our side is going to make testing difficult, so if we do come up with a possible solution, we may ask for some testing assistance from you.

PriceRightHTML5team
Apr 10, 2014, 12:16 PM
Geoffrey,We are ready provide testing assistance you and your team, you can ask us when you required but the only concern is that within a week our client going start using this application and most of our clients using IE 8.0 if that font issue reproduce on client machine that could be a major disappointment for us..!

Daniil
Apr 10, 2014, 3:39 PM
Please try this override.

Ext.draw.engine.Vml.override({
setTextAttributes: function (sprite, params) {
var me = this,
vml = sprite.vml,
textStyle = vml.textpath.style,
spanCacheStyle = me.span.style,
zoom = me.zoom,
round = Math.round,
fontObj = {
fontSize: "font-size",
fontWeight: "font-weight",
fontStyle: "font-style"
},
fontProp,
paramProp;

if (sprite.dirtyFont) {
if (params.font) {
textStyle.font = spanCacheStyle.font = params.font;
}

if (params["font-family"]) {
//textStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(me.fontFamilyRe, "") + '"';
//spanCacheStyle.fontFamily = params["font-family"];

textStyle.fontFamily = '"sans-serif"';
spanCacheStyle.fontFamily = '"sans-serif"';
}

for (fontProp in fontObj) {
paramProp = params[fontObj[fontProp]];
if (paramProp) {
textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
}
}

me.setText(sprite, params.text);

if (vml.textpath.string) {
me.span.innerHTML = String(vml.textpath.string).replace(/</g, "<").replace(/&/g, "&").replace(/\n/g, "<br/>");
}

vml.W = me.span.offsetWidth;
vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath

// text-anchor emulation
if (params["text-anchor"] == "middle") {
textStyle["v-text-align"] = "center";
}
else if (params["text-anchor"] == "end") {
textStyle["v-text-align"] = "right";
vml.bbx = -Math.round(vml.W / 2);
}
else {
textStyle["v-text-align"] = "left";
vml.bbx = Math.round(vml.W / 2);
}
}
vml.X = params.x;
vml.Y = params.y;
vml.path.v = Ext.String.format("m{0},{1}l{2},{1}", Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
// Clear bbox cache
sprite.bbox.plain = null;
sprite.bbox.transform = null;
sprite.dirtyFont = false;
}
});

It should change the default "Arial" font to "sans-serif" here:

textStyle.fontFamily = '"sans-serif"';
spanCacheStyle.fontFamily = '"sans-serif"';

If it doesn't help, please try another fonts like "Tahoma", etc. Please ensure the font is being applied to the elements by inspecting it.

If it is not applied, please ensure the overridden setTextAttributes method is executed. You can put this inside the method:

alert("I am here");

PriceRightHTML5team
Apr 11, 2014, 1:16 PM
Daniil, i tried solution given by you but still no any luck. as you said i tested it by different fonts like "sans-serif" ,Tahoma,Calibri but same issue and if we check it by inspect element there it showing font Arial only then to confirm our setTextAttributes method is executing or not i have putted alert message inside the method and run application again by clearing IE 8.0 history then it prompting alert message properly but no change in font issue.
Please find attached screenshot.

One thing i want to mention here is we have created complete chart from code behind.

Daniil
Apr 11, 2014, 3:34 PM
It is better to test with the same example. I'll post below.

I guess why the font-family is not applied on your side. There is a bit different override in the example below. Please try the example. What do you see inspecting the label elements now?

Example

<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store s = this.Chart1.GetStore();
s.DataSource = new object[]
{
new
{
month = "January",
y = 25
},
new
{
month = "February",
y = 50
},
new
{
month = "March",
y = 100
}
};
}
}
</script>

<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
Ext.draw.engine.Vml.override({
setTextAttributes: function (sprite, params) {
var me = this,
vml = sprite.vml,
textStyle = vml.textpath.style,
spanCacheStyle = me.span.style,
zoom = me.zoom,
round = Math.round,
fontObj = {
fontSize: "font-size",
fontWeight: "font-weight",
fontStyle: "font-style"
},
fontProp,
paramProp;

if (sprite.dirtyFont) {
if (params.font) {
textStyle.font = spanCacheStyle.font = params.font;
}

textStyle.fontFamily = '"sans-serif"'; // added
spanCacheStyle.fontFamily = '"sans-serif"'; // added

if (params["font-family"]) {
//textStyle.fontFamily = '"' + params["font-family"].split(",")[0].replace(me.fontFamilyRe, "") + '"';
//spanCacheStyle.fontFamily = params["font-family"];

textStyle.fontFamily = '"sans-serif"';
spanCacheStyle.fontFamily = '"sans-serif"';
}

for (fontProp in fontObj) {
paramProp = params[fontObj[fontProp]];
if (paramProp) {
textStyle[fontProp] = spanCacheStyle[fontProp] = paramProp;
}
}

me.setText(sprite, params.text);

if (vml.textpath.string) {
me.span.innerHTML = String(vml.textpath.string).replace(/</g, "<").replace(/&/g, "&").replace(/\n/g, "<br/>");
}

vml.W = me.span.offsetWidth;
vml.H = me.span.offsetHeight + 2; // TODO handle baseline differences and offset in VML Textpath

// text-anchor emulation
if (params["text-anchor"] == "middle") {
textStyle["v-text-align"] = "center";
}
else if (params["text-anchor"] == "end") {
textStyle["v-text-align"] = "right";
vml.bbx = -Math.round(vml.W / 2);
}
else {
textStyle["v-text-align"] = "left";
vml.bbx = Math.round(vml.W / 2);
}
}
vml.X = params.x;
vml.Y = params.y;
vml.path.v = Ext.String.format("m{0},{1}l{2},{1}", Math.round(vml.X * zoom), Math.round(vml.Y * zoom), Math.round(vml.X * zoom) + 1);
// Clear bbox cache
sprite.bbox.plain = null;
sprite.bbox.transform = null;
sprite.dirtyFont = false;
}
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Chart
ID="Chart1"
runat="server"
Width="400"
Height="400">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="month" />
<ext:ModelField Name="y" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:CategoryAxis Title="CategoryAxis" Fields="month" Position="Left" />
<ext:NumericAxis Title="NumericAxis" Fields="y" Position="Bottom" />
</Axes>
<Series>
<ext:BarSeries Titles="Chart" XField="month" YField="y" />
</Series>
</ext:Chart>
</form>
</body>
</html>

PriceRightHTML5team
Apr 14, 2014, 10:44 AM
Danill, i copied updated sample code run that sample code in IE 8.0 but still i m getting same issue then i tried by changing font in setTextAttributes method from sans-serif to some other font like Calibri and Arial one by one and run sample again and observe that it working fine for Calibri and Arial fonts please look attached file.

As it working fine sample code then i copied your updated setTextAttributes method with Arial font in my code and ran my application there also its working and tested it two three times by clearing history of IE 8.0 but not able to replicate our cursive writing font issue

So, finally we can say we have fixed our problem.


Thank you very much Daniil for your support and taking it on priority.

Daniil
Apr 14, 2014, 5:15 PM
It is very weird that it helped with "Arial", because it appears to be applied by default. Very strange issue.

We are glad to help you and thank you for providing us with all the requested information.