[TIMOB-16428] MobileWeb: Compile doesn't correctly parse font folders and font names

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2014-03-23T02:39:14.000+0000
Affected Version/s	Release 3.2.0
Fix Version/s	2014 Sprint 05, 2014 Sprint 05 Tooling, Release 3.3.0
Components	MobileWeb
Labels	n/a
Reporter	Andrew Greenstreet
Assignee	Chris Barber
Created	2014-02-08T19:03:15.000+0000
Updated	2014-06-19T12:42:35.000+0000

Description

Mobile web compile does not correctly setup up @font-face naming and path Currently if I have fonts in the android directory and the mobile web directory I will end up with this in the html of index.html @font-face{font-family:"android\fonts\HelveticaNeueLTPro-Bd";src:url("android\fonts\HelveticaNeueLTPro-Bd.otf");} @font-face{font-family:"mobileweb\fonts\HelveticaNeueLTPro-Bd";src:url("mobileweb\fonts\HelveticaNeueLTPro-Bd.otf");} It should look like @font-face{font-family:"HelveticaNeueLTPro-Bd";src:url("/fonts/HelveticaNeueLTPro-Bd.otf");} This is due to: 1. Not taking into account the directory separator for windows 2. Recursive search of all folders in Resources (Alloy projects), instead of just "mobileweb" Patched _build.js file is attached. Please see line 749.

Attachments

File	Date	Size
_build.js	2014-02-08T19:03:15.000+0000	34290

Comments

Ritu Agrawal 2014-02-09

Moving this ticket to engineering for further evaluation of the proposed fix.
Andrew Greenstreet 2014-02-09

I had to make one more change to this. Fonts of the same name, but with a different extension are not split into separate items. For example: @font-face{font-family:"HelveticaNeueLTPro-Bd";src:url("/fonts/HelveticaNeueLTPro-Bd.otf,/fonts/HelveticaNeueLTPro-Bd.woff");} should be @font-face{font-family:"HelveticaNeueLTPro-Bd";src:url("/fonts/HelveticaNeueLTPro-Bd.otf");} @font-face{font-family:"HelveticaNeueLTPro-Bd";src:url("/fonts/HelveticaNeueLTPro-Bd.woff");} Patch is: Object.keys(fonts).forEach(function (name) { fonts[name].forEach( function(path) { tiCSS.push('@font-face{font-family:"' + name + '";src:url("' + path + '");}\n'); } ) }, this);

Andrew Greenstreet 2014-02-14

I actually had to make quite a lot of tweaks to this code.

   Object.keys(fonts).forEach(function (name) {
   			var fontFace = '@font-face{font-family:"' + name + '";src:';
   			for (i = 0; i < fonts[name].length; i++) {
   				fontFace += "url(\"" + fonts[name][i] + "\")" ;
   				fontFace += getFormat(fonts[name][i]);
   				HTML_HEADER += "\n<link rel='prefetch' href='" + fonts[name][i] + "' />"; //Important for webkit
   				if (i + 1 < fonts[name].length) {
   					fontFace += ",\n";
   				}
   			}
   			fontFace += "}";
   			this.logger.info("Adding Font " + fontFace);
   			tiCSS.push(fontFace);
   		}, this);
   
   		function getFormat(path) {
   			var parts = path.split(".");
   			var ext = parts[parts.length-1];
   			switch (ext) {
   				case "ttf" : return " format('truetype')"; break;
   				default  : return " format('" + ext + "')";
   			}
   		}

Andrew Greenstreet 2014-02-14

If you do not prefetch the fonts, then FontWidget.js does not correctly measure the width of the fonts (especially on webkit) textRuler.clientWidth & textRuler.clientHeight will be not reflect the actually size of the text, causing wrapping, or clipping.