Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reverts parts of 60f4d16360: Use old font-is-loaded mechanism + some code refactoring to add bindDOM and bindWorker.

Browse Source
This commit is contained in:
Julian Viereck 2011-06-23 22:55:26 +02:00
parent d6239571e9
commit 3bef1534b4
1 changed files with 102 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
fonts.js
View File

@ -135,15 +135,28 @@ var Font = (function () {
break; break;
} }
var data = this.font;
Fonts[name] = { Fonts[name] = {
data: this.font, data: data,
properties: properties, properties: properties,
loading: true, loading: true,
cache: Object.create(null) cache: Object.create(null)
} }
// Attach the font to the document // Convert data to a string.
this.bind(); var dataStr = "";
var length = data.length;
for (var i = 0; i < length; ++i)
dataStr += String.fromCharCode(data[i]);
// Attach the font to the document. If this script is runnig in a worker,
// call `bindWorker`, which sends stuff over to the main thread.
if (typeof window != "undefined") {
this.bindDOM(dataStr);
} else {
this.bindWorker(dataStr);
}
}; };
function stringToArray(str) { function stringToArray(str) {
@ -755,49 +768,99 @@ var Font = (function () {
return fontData; return fontData;
}, },
bind: function font_bind() { bindWorker: function font_bind_worker(dataStr) {
var data = this.font; postMessage({
action: "font",
data: {
raw: dataStr,
fontName: this.name,
mimetype: this.mimetype
}
});
},
bindDOM: function font_bind_dom(dataStr) {
var fontName = this.name; var fontName = this.name;
// Get the base64 encoding of the binary font data /** Hack begin */
var str = ""; // Actually there is not event when a font has finished downloading so
var length = data.length; // the following code are a dirty hack to 'guess' when a font is ready
for (var i = 0; i < length; ++i) var canvas = document.createElement("canvas");
str += String.fromCharCode(data[i]); var style = "border: 1px solid black; position:absolute; top: " +
(debug ? (100 * fontCount) : "-200") + "px; left: 2px; width: 340px; height: 100px";
canvas.setAttribute("style", style);
canvas.setAttribute("width", 340);
canvas.setAttribute("heigth", 100);
document.body.appendChild(canvas);
// Insert the font-face css on the page. In a web worker, this needs to // Get the font size canvas think it will be for 'spaces'
// be forwareded on the main thread. var ctx = canvas.getContext("2d");
if (typeof window == "undefined") { ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
postMessage({ var testString = " ";
action: "font",
data: {
raw: str,
fontName: fontName,
mimetype: this.mimetype
}
});
} else {
var base64 = window.btoa(str);
// Add the @font-face rule to the document // When debugging use the characters provided by the charsets to visually
var url = "url(data:" + this.mimetype + ";base64," + base64 + ");"; // see what's happening instead of 'spaces'
var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}"; var debug = false;
var styleSheet = document.styleSheets[0]; if (debug) {
styleSheet.insertRule(rule, styleSheet.length); var name = document.createElement("font");
name.setAttribute("style", "position: absolute; left: 20px; top: " +
(100 * fontCount + 60) + "px");
name.innerHTML = fontName;
document.body.appendChild(name);
var div = document.createElement("div"); // Retrieve font charset
var style = 'font-family:"' + fontName + var charset = Fonts[fontName].properties.charset || [];
'";position: absolute;top:-99999;left:-99999;z-index:-99999';
div.setAttribute("style", style);
document.body.appendChild(div);
Fonts[fontName].loading = true; // if the charset is too small make it repeat a few times
window.setTimeout(function() { var count = 30;
Fonts[fontName].loading = false; while (count-- && charset.length <= 30)
// Timeout of just `0`, `10` doesn't work here, but for me all values charset = charset.concat(charset.slice());
// above work. Setting value to 50ms.
}, 50); for (var i = 0; i < charset.length; i++) {
var unicode = GlyphsUnicode[charset[i]];
if (!unicode)
continue;
testString += String.fromCharCode(unicode);
}
ctx.fillText(testString, 20, 20);
} }
// Periodicaly check for the width of the testString, it will be
// different once the real font has loaded
var textWidth = ctx.measureText(testString).width;
var interval = window.setInterval(function canvasInterval(self) {
this.start = this.start || Date.now();
ctx.font = "bold italic 20px " + fontName + ", Symbol, Arial";
// For some reasons the font has not loaded, so mark it loaded for the
// page to proceed but cry
if ((Date.now() - this.start) >= kMaxWaitForFontFace) {
window.clearInterval(interval);
Fonts[fontName].loading = false;
warn("Is " + fontName + " for charset: " + charset + " loaded?");
this.start = 0;
} else if (textWidth != ctx.measureText(testString).width) {
window.clearInterval(interval);
Fonts[fontName].loading = false;
this.start = 0;
}
if (debug)
ctx.fillText(testString, 20, 50);
}, 30, this);
/** Hack end */
// Convert the data string and add it to the page.
var base64 = window.btoa(dataStr);
// Add the @font-face rule to the document
var url = "url(data:" + this.mimetype + ";base64," + base64 + ");";
var rule = "@font-face { font-family:'" + fontName + "';src:" + url + "}";
var styleSheet = document.styleSheets[0];
styleSheet.insertRule(rule, styleSheet.length);
} }
}; };