PDA

View Full Version : [FIXED] 4.2 Incorrect component width when web font is used



Cake_Seller
19 Apr 2013, 4:46 AM
REQUIRED INFORMATION

Ext version tested:


Ext 4.2
Browser versions tested against:

Google Chrome 26.0.1410.64 m (Windows 8) PASS

Firefox 20.0.1 (Windows 8) FAIL

Firefox 20.0 (Windows 7) FAIL
DOCTYPE tested against:

<!doctype html>
Description:

When "Ubuntu" font is included on page and default font for all elements is changed to it Ext JS evaluates width of some components incorrectly.
Steps to reproduce the problem:

Fastest way to reproduce is open ext-4.2\examples\message-box\msg-box.html in editor and add next line into head section:

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic' rel='stylesheet' type='text/css'>


<style type="text/css">


* {
font-family: 'Ubuntu', sans-serif !important;
}
</style>

As you can see we included CSS file with web fonts from Google.


Than open this page in Firefox.
Click on first "Show" button.
The result that was expected:

Window will appear with single line message
The result that occurs instead:

last word is moved on next line
it's because the container into which text is rendered has smaller size than it's contents
Test Case:

<!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MessageBox</title>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<style type="text/css">


* {
font-family: 'Ubuntu', sans-serif !important;
}


.x-message-box .ext-mb-download {
background: url("images/download.gif") no-repeat scroll 6px 0px transparent;
height: 52px!important;
}
</style>
<link rel="stylesheet" type="text/css" href="../shared/example.css" />


<!-- GC -->


<script type="text/javascript" src="../../examples/shared/include-ext.js"></script>
<script type="text/javascript" src="../../examples/shared/options-toolbar.js"></script>
<script type="text/javascript" src="../shared/examples.js"></script>
<script src="msg-box.js"></script>
</head>
<body>
<h1>MessageBox Dialogs</h1>
<p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
<p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>


<p>
<b>Confirm</b><br />
Standard Yes/No dialog. &nbsp;
<button id="mb1">Show</button>
</p>


<p>
<b>Prompt</b><br />
Standard prompt dialog. &nbsp;
<button id="mb2">Show</button>
</p>


<p>
<b>Multi-line Prompt</b><br />
A multi-line prompt dialog. &nbsp;
<button id="mb3">Show</button>
</p>


<p>
<b>Yes/No/Cancel</b><br />
Standard Yes/No/Cancel dialog. &nbsp;
<button id="mb4">Show</button>
</p>


<p>
<b>Progress Dialog</b><br />
Dialog with measured progress bar. &nbsp;
<button id="mb6">Show</button>
</p>


<p>
<b>Wait Dialog</b><br />
Dialog with indefinite progress bar and custom icon (will close after 8 sec). &nbsp;
<button id="mb7">Show</button>
</p>


<p>
<b>Alert</b><br />
Standard alert message dialog. &nbsp;
<button id="mb8">Show</button>
</p>


<p>
<b>Icons</b><br />
Standard alert with optional icon. &nbsp;
<select id="icons">
<option id="error" selected="selected">Error</option>
<option id="info">Informational</option>
<option id="question">Question</option>
<option id="warning">Warning</option>
</select> &nbsp;
<button id="mb9">Show</button>
</p>


<p>
<b>Custom button text</b><br />
MessageBox with custom button text. &nbsp;
<button id="mb10">Show</button>
</p>


</body>
</html>




HELPFUL INFORMATION

Screenshot or Video:
43244

Additional info:

also issue was reproduced with PT Sans and couple of other web fonts
issue was reproduced into Toolbar
tried to install font into OS instead of loading it from Google Fonts.
probably issue caused by how Firefox renders fonts or by how Ext JS computates sizes of containers or both.
Operating System:

Windows 7, 8

slemmon
19 Apr 2013, 7:50 AM
Thanks for the report! I have opened a bug in our bug tracker.

Cake_Seller
22 Apr 2013, 3:46 AM
I have inserted the span into first paragraph on page.

As you can see from screenshots div inside message box and span which I added have same width (198px) and same text inside them. But for some reason the last word into message box is moved to second line.

If enlarge div inside message box by 1px than text inside message box becomes in one line.

Here fullsized versions of screenshots:
http://imageshack.us/f/443/201304221433.png/
http://imageshack.us/f/43/201304221434.png/ (http://imageshack.us/f/443/201304221433.png/)

Cake_Seller
22 Apr 2013, 5:54 AM
On more important thing.

Issue is reproduced only when Hardware acceleration is enabled in Firefox.
To enable it go to: Options ? Advanced ? Browsing ? Use hardware acceleration when available. To make changes applied you need to restart Firefox.

evant
22 Apr 2013, 6:00 AM
I don't know if this will ever be resolved. A similar bug was logged over at the Mozilla bug tracker. The best we can do is measure what the browser gives us:

https://bugzilla.mozilla.org/show_bug.cgi?id=782253

Cake_Seller
22 Apr 2013, 6:37 AM
But what connection has getBBox method to computing the size of elements? As far as I understand getBBox used only in SVG graphics.

Also an you please tell me where in Ext JS source code the width of the element, which is highlighted on screenshot, is calculated. I tried to debug but it didn't bring me anywhere.

Screenshot:
http://imageshack.us/photo/my-images/221/201304221732.png/

evant
22 Apr 2013, 2:13 PM
I was referring to hardware acceleration, specifically:



The fact that DirectWrite (used when hardware acceleration is on) and GDI (used by default when it's off) give slightly different font metrics is not a bug.


Note that Ext doesn't "calculate" the size of an element, it just asks the browser what the size is.

Cake_Seller
25 Apr 2013, 4:35 AM
All fonts except are Arial are affected by this issue, so potentially it's not safe to use any other fonts except Arial in Ext JS based applications.

I've created bug report for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=865623
(https://bugzilla.mozilla.org/show_bug.cgi?id=865623)Hope they will fix it in near future.

medv
14 May 2013, 6:26 PM
Confirm that this (or something similar) happens on win7 chrome 26.0.1410.64 m and firefox 20.0.1.

In this image (http://i.imgur.com/sej1HjV.png)of a right-aligned container with buttons, the top screenshot is a broken load. Just as likely when refreshing into the app, the result might end up looking correct (bottom screenshot).

The closest way I can describe what I think is happening is FOUT. Flash of unstyled type.

Load, dom is ready, everything is dandy, Ext measures stuff. Now font-face is applied slightly too late, and whatever elements contain the newly styled text obviously expand to contents. But Ext has already done its thing. There is timing involved, as it is possible to load in with everything measured properly.

robstove
8 May 2015, 12:22 PM
Is there a way to patch version 3.4 with this fix?